详解vue 配合vue-resource调用接口获取数据

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/'));

  // 引入 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>

<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>