從節點傳遞數據到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

回答

相關問題