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>pw_value.title <span>pw_value.name</span></h2>
   　　<p>pw_value.content</p>
 </div>
</div>

https://www.cnblogs.com/feiseli/p/6680008.html