在树林里，许多的小鸟在自由自在欢乐地飞翔着，高兴起来，便唱出清脆悦耳的曲子，和煦的春风吹拂着小河，河面上波光粼粼。我忽然被一阵悦耳、动听的笛声所牵动，放眼望去，一群顽皮的小孩子正用垂柳的茎做柳笛呢！他们吹出了心里的幸福和快乐。
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>
本文详解vue 配合vue-resource调用接口获取数据到此结束。和春天在一起，脸上就常带微笑。小编再次感谢大家对我们的支持！
