Passing data from Node to Vuejs

问题:

I have a local Node.js server running on port 3000. I have another dev server for front end using webpack, running on 8080. Node is connected to MySQL server. My project structure looks like this:-

SampleProject   -> BackEnd   -> FrontEnd 

I have used webpack-dev-server proxy option to proxy requests from webpack-dev-server (8080) to Node (3000).

The dev server configuration my webpack.config.js looks like this:-

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

I have written a Node api in 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 }); });} 

And in app.js i call the service like this

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

In my Vue component file I call the api like this:-

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);             })         }     } }

Both the servers are now running. When I open localhost:8080/profile, I see the entire json object on the screen.

The browser console does not show any object. But my network says localhost:3000/profile. What wrong am I doing here? How can I rectify this issue and get the data?

回答1:

it's displaying exactly what you asked it to display.

change your axios response callback to look like this:

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

文章来源: Passing data from Node to Vuejs