Vue CRUD using NodeJs (MySql conncetion) - 如何从服务器端获取到客户端的数据?

Question

我正在尝试了解有关Vue的更多信息，并使其有趣，我已经使用nodeJS连接到了我的MySql-DB。

通过遵循教程(https://webdeasy.de/en/complete-login-system-with-node-js-vue-js-restapi-jwt-part-1-2/(，我有一个有效的登录系统。现在我想从另一个表(称为"客户端"的表(获取一些数据并制作一个简单的 CRUD，但我不明白如何将数据从服务器端(node-js(获取到客户端(Vue(。

我有一个连接在工作，我可以在控制台中输出我的表数据.log - 我知道我已经使用 Axios(指向我的服务器正在运行的 localhost：3000(来使其工作，但我尝试过的所有内容要么使我的应用程序崩溃，要么根本不起作用。

我的路由器.js文件管理器(服务器端(看起来像这样(我没有粘贴所有登录"东西"来为您保持干净(：

// routes/router.js
const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const uuid = require('uuid');
const jwt = require('jsonwebtoken');
const db = require('../lib/db.js');
const userMiddleware = require('../middleware/users.js');
// All the login code is here
// All the login code is here
// All the login code is here

db.query
("SELECT * FROM clients", function (err, result, fields) {
if (err) throw err;
console.log(result);
});

module.exports = router;

这在控制台中正确返回以下内容.log：

[nodemon] starting `node Server`
The server running on port 3000
[
RowDataPacket {
id: 1,
name: 'Sample Client One',
email: '[e-mail]',
phone: '12345678'
},
RowDataPacket {
id: 3,
name: 'Sample Client two',
email: '[e-mail]',
phone: '12345678'
}

My Clients.vue 现在看起来像这样：

<template>
<div>
<h1>Hi {{ username }}, Welcome to Clients</h1>
<p>{{ secretMessage }}</p>
</div>
</template>
<script>
import AuthService from '@/services/AuthService.js';

export default {
data() {
return {
secretMessage: 'Sample secret message',
username: '',
};
},
async created() {
if (!this.$store.getters.isLoggedIn) {
this.$router.push('/login');
}
this.username = this.$store.getters.getUser.username;
this.secretMessage = await AuthService.getSecretContent();
},
methods: {
logout() {
this.$store.dispatch('logout');
this.$router.push('/login');
}
}
};
</script>

我安装了Axios，我只是删除了它的导入以避免错误。 正如您可能看到的新手一样，请告诉我是否做错了，或者您是否需要查看更多我的代码。

//街

Answer 1

确保从 CRUD 终结点提取客户端。

例如，您可以添加新的/clients端点，您可以在其中读取所有客户端，然后使用res.status(200).send(result)将它们返回到客户端，如下所示：

router.get('/clients', (req, res, next) => {
db.query("SELECT * FROM clients", function (err, result, fields) {
if (err) {
res.status(400).send();
throw err;
};
console.log(result);
res.status(200).send(result);
});
});

您的客户端代码现在需要从服务器端获取数据。可以在services/文件夹下创建一个新文件ClientServices.js如下所示

// src/services/ClientServices.js
import axios from 'axios';
const url = 'http://localhost:3000/api/';
export default {
getClients() {
return axios
.get(url + 'clients/')
.then(response => response.data);
}
};

UI 代码现在需要导入新文件并调用getClients方法并列出它们。

<template>
<div>
<h1>Hi {{ username }}, Welcome to Clients</h1>
<p>{{ secretMessage }}</p>
</div>
<div :key="client.id" v-for="client in clients">
<strong>client.name</strong>
<small>client.email</small> | <small>client.phone</small>
</div>
</template>
<script>
import AuthService from '@/services/AuthService.js';
import ClientService from '@/services/ClientService.js';

export default {
data() {
return {
secretMessage: 'Sample secret message',
username: '',
clients: [],
};
},
async created() {
if (!this.$store.getters.isLoggedIn) {
this.$router.push('/login');
}
this.username = this.$store.getters.getUser.username;
this.secretMessage = await AuthService.getSecretContent();
var self = this
ClientService.getClients().then((clients) => {
self.clients = clients;
});
},
methods: {
logout() {
this.$store.dispatch('logout');
this.$router.push('/login');
}
}
};
</script>