[英]Vue CRUD using NodeJs (MySql conncetion) - How do I get the data from server-side to client-side?
I'm trying to learn more about Vue and to make it interesting I have connected to my MySql-DB using nodeJS.我正在尝试了解有关 Vue 的更多信息并使其变得有趣,我已使用 nodeJS 连接到我的 MySql-DB。
By following a tutorial ( https://webdeasy.de/en/complete-login-system-with-node-js-vue-js-restapi-jwt-part-1-2/ ) I have a working Login system.按照教程( https://webdeasy.de/en/complete-login-system-with-node-js-vue-js-restapi-jwt-part-1-2/ )我有一个工作登录系统。 Now I want to fetch some data from another table (the table called 'clients') and make a simple CRUD, but I do not understand how to get the data from the Server-side(node-js) to the Client-side(Vue).
现在我想从另一个表(称为“客户端”的表)中获取一些数据并制作一个简单的 CRUD,但我不明白如何将数据从服务器端(node-js)获取到客户端(维)。
I got a connection working where I can output my table data in the console.log - And I know I have use Axios (pointing to localhost:3000 where my server is running) to make it work, but everything I have tried either crashes my app or just doesn't work.我有一个连接工作,我可以 output 我在 console.log 中的表数据 - 我知道我已经使用 Axios (指向我的服务器正在运行的 localhost:3000 )使其工作,但我尝试过的一切要么崩溃我应用程序或只是不工作。
My router.js filer (Server-side) looks like this (I didn't paste all the login 'stuff' to keep clean for you):我的 router.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;
Which correctly returns this in the console.log:在 console.log 中正确返回:
[nodemon] starting `node Server`
The server running on port 3000
[
RowDataPacket {
id: 1,
name: 'Sample Client One',
email: 'email-one@domain.com',
phone: '12345678'
},
RowDataPacket {
id: 3,
name: 'Sample Client two',
email: 'mail-two@domain.com',
phone: '12345678'
}
My Clients.vue looks like this now:我的 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>
I have Axios installed, I just removed the import of it to avoid the error.我已经安装了 Axios,我只是删除了它的导入以避免错误。 As you probably can see a am new at this so let me know if going about this all wrong or if you need to see more of my code.
正如您可能看到的那样,如果这一切都错了,或者您需要查看我的更多代码,请告诉我。
//Rue //后悔
Make sure that you are fetching the clients from an CRUD endpoint.确保您从 CRUD 端点获取客户端。
For instance, you can add a new /clients
endpoint where you read all the clients then return them back to client-side with res.status(200).send(result)
, as follows:例如,您可以添加一个新的
/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);
});
});
And your client-side code now needs to fetch data from server-side.您的客户端代码现在需要从服务器端获取数据。 One can create a new file
ClientServices.js
under services/
folder, like so可以在
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);
}
};
The UI code now needs to import the new file and call getClients
method and list them. 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.