ノードからVuejsへのデータの受け渡し

Question

私はローカルのNode.jsサーバーをポート3000で実行しています.8080で動作するwebpackを使用するフロントエンド用の別のdevサーバーがあります。ノードはMySQLサーバーに接続されています。

SampleProject 
    -> BackEnd 
    -> FrontEnd 

私はWebPACKの-devのサーバー（8080）からノード（3000）へのプロキシ要求へのWebPACK-devのサーバープロキシオプションを使用している - ：私のプロジェクト構造は次のようになります。私は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を書かれている

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

- ：

のdevのサーバー設定私のwebpack.config.jsは、次のようになります私はこのようなAPIを呼び出す私のVueのコンポーネントファイルで、この

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

のようなサービス： -

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と言っています。私はここで何をしていますか？この問題を解決してデータを取得するにはどうすればよいですか？

Answer 1

あなたが表示するように頼んだものを正確に表示しています。

はこのようにしてくださいaxios応答コールバックを変更

：

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