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

1、

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

虽然网上说Vue2.0之后请求数据一般都用axios，但其实都是一样的。记一次学习的代码。

2、先用node+express+mysql简单配置一下后台

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

3、前台请求接口，调用数据来渲染页面（vue + vue-resource）

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

4、节选：https://www.cnblogs.com/feiseli/p/668008.html