V-data-table无法使用Axios从API获取用户列表数据

eblbsuwk  于 2022-10-21  发布在  iOS
关注(0)|答案(2)|浏览(133)

我需要在数据表中显示用户列表,但它显示没有可用的数据。我需要做什么才能让它工作?
这是我的用户目录页面,只是添加了一个子标题和一个数据表,这是我从Vutify获得的

<template>
  <div class="userDirectory">
    <v-subheader class="d-flex justify-space-between align-center">
      <h3>User Directory</h3>
    </v-subheader>
    <v-row>
      <v-card>
        <template>
          <v-data-table :headers="headers" :items="users" :items-per-page="5" class="elevation-1"></v-data-table>
        </template>
      </v-card>
    </v-row>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  data: () => ({
    headers: [
    {
            text: 'User ID',
            align: 'start',
            sortable: false,
            value: 'u.id',
          },
          { text: 'Created At', value: 'created_at' },
          { text: 'Email', value: 'email' },
          { text: 'Is Premium', value: 'is_premium' },
          { text: 'Goal', value: 'goal' },
          { text: 'Fitness Level', value: 'fitness_level' },
          { text: 'Profile Completed', value: 'profile_completed' },
          { text: 'Accepted Health Warning', value: 'accepted_health_warning' },
          { text: 'Role', value: 'roles_list' },
    ],
    users: [],
  }),
  methods: {
    async loadUsers() {
      axios.get('https://somehost/api/admin/getUserList', { headers: {Authorization : 'Bearer ' + 'token' }})
      .then(res=> console.log(res))
  .catch(err=> console.log(err))
    }
  },
}
</script>

<style scoped>

</style>

这是API文件。我可以通过在ThunderClient中使用承载令牌发出GET请求来获取数据,但相同的令牌在Vue中不起作用。

const { response } = require("express");
const pool = require("../../config/database");

async function listUsers() {

    let sqlquery = `select
                        u.id, 
                        created_at,
                        email,
                        is_premium,
                        goal,
                        fitness_level,
                        profile_completed,
                        accepted_health_warning,
                        group_concat(r.name) as roles_list
                    from users u
                    left join user_role ur on ur.user_id = u.id
                    left join role r on r.id = ur.role_id
                    group by u.id;`
    return new Promise((resolve, reject) => {
        pool.query(sqlquery,
            (error, results) => {
                if (error) {
                    return reject(error)
                }
                return resolve(results)
            })
    })
}

module.exports.listUsers = listUsers;
qoefvg9y

qoefvg9y1#

您会在任何时候调用loadUsers函数吗?

<script>
export default { 
  // ... data
  created() {
    this.loadUsers();
  }, 
  methods: {
    loadUsers() {
      axios.get('https://somehost/api/admin/getUserList', { headers: {Authorization : 'Bearer ' + 'token' }})
      .then(res=> {
          // assign the result to the users array
          this.users = res;
       })
      .catch(err=> console.log(err))
    }
  },
}
</script>
yr9zkbsy

yr9zkbsy2#

就像Matt Say一样,如果没有发生任何事情,您需要调用您的函数。

created() {
    this.loadUsers();
  },

但实际上(如果你现在叫它的话)CORS失败了,你得不到任何回应。这很正常。
请求所在的服务器API会阻止访问,并收到CORS错误,我在您的文件中看到您需要Express,所以我非常肯定您使用Express(NodeJS)。
您可以尝试使用以下命令安装node-cors程序包:

npm install cors

文档编号:https://expressjs.com/en/resources/middleware/cors.html
在您的app.js中,您可以这样做:

const app = express()
const cors = require('cors');

app.use(cors({
    origin: 'https://mywebsite.com'
}))

来源是授权你的Vuejs应用程序,所以如果你的Vue应用程序在localhost:3000上运行或在线在mondomaine.com上运行,你可以这样做:

origin: 'http://mondomaine.com'

此解决方案适用于在线域。

如果您是在本地主机中,您必须在vue.js上设置代理,这并不困难。

在您的情况下,当您遇到以下情况时,您必须替换URL:

axios.get('/api/admin/getUserList', ... // let what you have before

为了理解,GET调用现在在localhost:1000/api/admin/getUserList上,这个调用在同一个域上,不能工作,但您没有CORS问题。
现在你必须设置一个代理,这很容易!

devServer: {
    proxy: {
      '^/api/*': {
        target: 'https://somehost/'
      }
    }
  },

您的调用localhost:1000/api/admin/getUserList将触发代理^/api/*,并将此调用重定向到https://somehost/api/admin/getUserList

不要忘记在vue.fig.js中每次更新后重新启动您的VUE服务器。

相关问题