有没有更好的方法从 vue.js 中的数据库检索前端用户

Question

所以我下面有我的javascript代码，它本质上是用于社交媒体的，点击某个按钮后它会转到下一个用户页面，我的问题是这个设置是否正确。我没有可连接的数据库，所以我现在无法测试它。

   <template>
      <v-carousel>
        <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
            cover
        ></v-carousel-item>
    
        <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg"
            cover
        ></v-carousel-item>
      </v-carousel>
      <div class="matching">
        <h1>Welcome to the Matching Page</h1>
        <router-link @click = "edit()" class="button">Edit Profile</router-link>
      </div>
      <div class="infoBox">
        <p class ="img">{{user.profilePicture}}</p>
        <p class="boldText">{{user.displayName}}</p>
        <p>Full name: {{user.name}}</p>
        <p>Age: {{user.age}}</p>
        <p>Height: {{user.height}}</p>
        <p>Biography: {{user.biography}}</p>
        <p class="boldText">Dislikes</p>
        <p class="dislikes">{{user.dislikes}}</p>
      </div>
      <button class="button" onclick="nextUser">move to next</button>
    
    
    </template>
    
    
    
    
    <script>
    import { useRouter } from 'vue-router';
    import apiClient from '@/axiosConfig'; // Import the Axios configuration
    import { ref } from 'vue';
    
    export default {
      name: 'MatchingPage',
      data() {
        return {
          photo: '', // Replace with actual photo path or URL
          activeTab: 'personal',
          user: {
            email: '',
            address: '',
            phoneNumber: '',
            age: '',
            height: '',
            displayName: '',
            profilePicture: '',
            contact: '',
            biography: '',
            preferences: new Set(),
            dislikes: new Set()
          },
          selectedDislikes: [],
          selectedPreferences: []
    
        };
      },
      methods:{
        edit() {
          const router = useRouter();
    
          function goToEditProfile() {
            router.push('/edit-profile');
          }
    
          return {goToEditProfile};
        },
        setup(){
          const users = async () => {
            try{
              //actually figure out how to pull data from database later
              const response = await apiClient.get('/database');
              console.log('fetch data response:', response.data); // Logging response data
              // grabbing the token back from the server (which will be in local storage)
              const { token } = response.data;
              if (token) {
                localStorage.setItem('token', token); // Store the token
                apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`; // Set default header
                console.log('fecth successfully');
              } else {
                console.error('No token received from server');
                alert('Failed to sign up, no token received');
              }
            } catch (error) {
              console.error('Signup failed:', error.response ? error.response.data : error);
              alert(`Signup failed: ${error.response ? error.response.data.message : "Network or server error"}`);
            }
          };
          return {users};
        },
        nextUser() {
          let currentIndex = 0
          const users = setup()
      // Check if there are more users to iterate through
          if (currentIndex < users.length - 1) {
          currentIndex++;
          return users[currentIndex];
        } else {
        // If currentIndex is at the end, wrap around to the beginning
          currentIndex = 0;
          return users[currentIndex];
      }
    }
      },
      }
    </script>

有没有更好的方法来设置我的前端，以便它转到下一个用户并在单击按钮时显示所述用户信息？

谢谢你

Answer 1

setup函数不是方法的属性，在这种情况下你不需要setup函数，将用户函数移到方法中。

然后

const users = await users()

中的

nextUser()

，由于有await关键字，nextUser函数也应该是异步的。

users()

也存在问题，在得到响应后，更新请求头令牌很奇怪，嗯，这很奇怪，但是好吧，最好的方法可以在

axios

请求拦截器中执行此操作，无论如何，

response.data

应该包含一些属性，例如

data

保存所有用户列表，或者所有用户数据来自哪里？

所以也许还有一行

return response.data?.data || []

，如果

data

 中有 

response.data

属性

最后，数据库只是一个存储数据的地方，数据在哪里并不重要，可以从服务器请求，也可以只是本地的模拟数据。所以在

users()

如果这样做

const mockUserList = [
{
            email: '',
            address: '',
            phoneNumber: '',
            age: '18',
            height: '178',
            displayName: 'Flame Author',
            profilePicture: '',
            contact: '',
            biography: '',
            preferences: new Set(),
            dislikes: new Set()
          },
{
            email: '',
            address: '',
            phoneNumber: '',
            age: '36',
            height: '162',
            displayName: 'Sindy Clasue',
            profilePicture: '',
            contact: '',
            biography: '',
            preferences: new Set(),
            dislikes: new Set()
          }
]
return mockUserList

应该准备好进行测试了