Question

我试图学习有关Vue的更多信息，并使其变得有趣，我已使用nodeJS连接到MySql-DB。

通过学习教程（https://webdeasy.de/en/complete-login-system-with-node-js-vue-js-restapi-jwt-part-1-2/），我可以使用登录系统。现在，我想从另一个表（称为“ clients”的表）中获取一些数据并进行简单的CRUD，但是我不明白如何将数据从服务器端（node-js）获取到客户端（ Vue）。

我已经建立了一个连接，可以在console.log中输出表数据-而且我知道我已经使用Axios（指向运行服务器的localhost：3000）来使它工作，但是我尝试了一切要么使我的应用程序崩溃，要么就无法正常工作。

我的router.js文件管理器（服务器端）看起来像这样（我没有粘贴所有登录名“ stuff”来保持您的干净）：

// 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;

在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'
  }

我的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端点获取客户端。

例如，您可以添加一个新的<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script> <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'> <link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" /> <div id="app"> <v-app id="inspire"> <v-container> <v-layout row wrap justify-center> <v-flex xs6 v-for="(food,index) in foodItems" :key="index"> <h1>{{ food.name }}</h1> <v-icon large left :color="reaction ? 'primary' : ''" @click="setReaction">sentiment_dissatisfied</v-icon> <v-icon large :color="reaction ? 'primary' : ''" @click="setReaction">sentiment_very_satisfied</v-icon> </v-flex> </v-layout> </v-container> </v-app> </div>端点，在其中读取所有客户端，然后使用/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); }); });文件夹下创建一个新文件ClientServices.js

services/

UI代码现在需要导入新文件并调用// 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); } };方法并将其列出。

getClients

使用NodeJs的Vue CRUD（MySql conncetion）-如何从服务器端到客户端获取数据？

1 个答案: