我需要在数据表中显示用户列表,但它显示没有可用的数据。我需要做什么才能让它工作?
这是我的用户目录页面,只是添加了一个子标题和一个数据表,这是我从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;
2条答案
按热度按时间qoefvg9y1#
您会在任何时候调用
loadUsers
函数吗?yr9zkbsy2#
就像Matt Say一样,如果没有发生任何事情,您需要调用您的函数。
但实际上(如果你现在叫它的话)CORS失败了,你得不到任何回应。这很正常。
请求所在的服务器API会阻止访问,并收到CORS错误,我在您的文件中看到您需要Express,所以我非常肯定您使用Express(NodeJS)。
您可以尝试使用以下命令安装node-cors程序包:
文档编号:https://expressjs.com/en/resources/middleware/cors.html
在您的app.js中,您可以这样做:
来源是授权你的Vuejs应用程序,所以如果你的Vue应用程序在
localhost:3000
上运行或在线在mondomaine.com
上运行,你可以这样做:此解决方案适用于在线域。
如果您是在本地主机中,您必须在vue.js上设置代理,这并不困难。
在您的情况下,当您遇到以下情况时,您必须替换URL:
为了理解,GET调用现在在
localhost:1000/api/admin/getUserList
上,这个调用在同一个域上,不能工作,但您没有CORS问题。现在你必须设置一个代理,这很容易!
您的调用
localhost:1000/api/admin/getUserList
将触发代理^/api/*
,并将此调用重定向到https://somehost/api/admin/getUserList
不要忘记在vue.fig.js中每次更新后重新启动您的VUE服务器。