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

1.先用node+express+mysql简单配置一下后台constexpress=require('express');constmysql=require('mysql');conststati

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 获取接口数据 vue2.0获取接口数据