vue 配合vue-resource調用接口，獲取數據

1.先用node+express+mysql簡單配置一下後臺

const express = require('express');
const mysql = require('mysql');
const static = require('express-static');

const db = mysql.createPool({
    host: 'localhost',
    user: 'nodejs',
    password: 'nodejs',
    database:'resume',
    port: 3306
});

var app = express();
//  ====》設置了一個 /resume 的接口，並將從數據庫獲取的數據data，send到前臺（接口名字隨便取的）
app.use('/resume', (req, res)=>{
    db.query(`SELECT * FROM about_table`, (err, data)=>{
        "use strict";
        if(err){
            res.status(500).send('databases error').end();
        }else{
            res.send(data).end();
        }
    })

})

app.listen(8080);
app.use(static('./static/'));

2. 前臺請求接口，調用數據來渲染頁面（vue + vue-resource）
 ===》 js                                                                                                                   // 引入 vue
<script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
// 引入 vue-resource                                                                                                        <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>

<script>
   window.onload = function () {
      new Vue({
         el: '#demo',
         data:{
            aboutData:[]  //建一個空數組，用來保存調用接口獲取的數據
         },
         created: function () {
            this.getRoute()
         },
         methods: {
            getRoute: function () {
               var that = this; 
               that.$http({
                  method: 'GET',
                  url: '/resume' //這裏填寫剛剛後臺設置的接口
               }).then(function(response){
                  this.aboutData = response.data; // promise的then成功以後，將response返回的數據data，保存到aboutData數組裏
               },function (error) {
                  console.log(error);
               })
            }
         }

      })
   }
</script>

===》 html

<div id="demo">　　<div class="item" v-for="value in aboutData">  // v-for 遍歷數組後，便可將數據以｛｛value.xxx｝｝的方式渲染出來   　　<h2>{{value.title}} <span>{{value.name}}</span></h2>   　　<p>{{value.content}}</p>　　</div></div>