将数据从Node传递给Vuejs

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

SampleProject -> BackEnd -> FrontEnd 

我已经使用webpack-dev-server代理选项将来自webpack-dev-server(8080)的请求代理到节点(3000)。

开发服务器configuration我的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对象。

浏览器控制台不显示任何对象。 但我的networking说本地主机:3000 /configuration文件。 我在这里做什么错了? 我怎样才能纠正这个问题,并获得数据?

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

改变你的axios响应callback看起来像这样:

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