从节点传递数据到Vuejs

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

SampleProject 
    -> BackEnd 
    -> FrontEnd

我用的WebPack-DEV-服务器代理选项从的WebPack-dev的服务器（8080）代理请求到节点（3000）。

开发服务器配置我webpack.config.js看起来是这样的： -

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

我在services.js

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我拨叫节点API这样

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。我在这里做什么错了？我如何纠正这个问题并获取数据？

来源

2017-08-07 APJ

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

改变你的爱可信响应的回调看起来像这样：

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

来源

2017-08-08 06:29:39 mackmack

从节点传递数据到Vuejs

回答

相关问题