将数据从 Node 传递到 Vuejs

Posted 2023-02-22

【中文标题】将数据从 Node 传递到 Vuejs

【英文标题】：Passing data from Node to Vuejs

【发布时间】：2018-01-15 03:55:23

【问题描述】：

我有一个本地 Node.js 服务器在端口 3000 上运行。我有另一个使用 webpack 的前端开发服务器，在 8080 上运行。节点连接到 mysql 服务器。我的项目结构如下：-

SampleProject
  -> BackEnd
  -> FrontEnd

我使用 webpack-dev-server 代理选项将请求从 webpack-dev-server (8080) 代理到 Node (3000)。

我的 webpack.config.js 的开发服务器配置如下所示：-

devServer: 
    proxy: 
        '/api': 
            target: 'http://localhost:3000'
        
    ,
    historyApiFallback: true,
    noInfo: true

我在 services.js 中写了一个 Node api

exports.getAllPatientData = function(req, res) 

con.connection.query("SELECT fname, lname, city, country_code, TIMESTAMPDIFF(YEAR, DOB, CURDATE()) AS age FROM sbds_patient_data where pid = 1", function(err, result, fields) 
    if (err) 
        throw err;
        res.json( status: "error", message: "An error has occurred. Please try again later" );
    

    console.log(result);
    res.json( status: "success", results: result );
);

在 app.js 中我这样调用服务

app.get('/profile', services.getAllPatientData);

在我的 Vue 组件文件中，我这样调用 api：-

import axios from 'axios';

export default
    data()
        return
            firstName: '',
            lastName: '',
            age: '',
            errors: []
        
    ,

    created: function()
        this.getPatientInfo();
    ,

    methods:

        // Function to get the patient's personal information 
        getPatientInfo: function()
            axios.get('http://localhost:3000/profile')
            .then(response =>
                this.firstName = response.data;
                    this.lastName = response.data;
                    this.age = response.data;
            )
            .catch(e => 
                this.errors.push(e);
            )
        
    

两台服务器现在都在运行。当我打开 localhost:8080/profile 时，我在屏幕上看到了整个 json 对象。

浏览器控制台不显示任何对象。但我的网络显示 localhost:3000/profile。我在这里做错了什么？如何解决此问题并获取数据？

【参考方案1】：

它正在显示您要求它显示的内容。

将您的 axios 响应回调更改为如下所示：

var user = JSON.parse( response.data ).results[0]
this.firstName = user.fname;
this.lastName = user.lname;
this.age = user.age;