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


Posted in Javascript onJune 22, 2017

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
js实现无缝滚动图
Feb 22 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
vue使用stompjs实现mqtt消息推送通知
Jun 22 #Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 #Javascript
详解用webpack2搭建angular2的项目
Jun 22 #Javascript
vue2.0实现分页组件的实例代码
Jun 22 #Javascript
纯JS实现只能输入数字的简单代码
Jun 21 #Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 #Javascript
Vue实现百度下拉提示搜索功能
Jun 21 #Javascript
You might like
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PDO::commit讲解
2019/01/27 PHP
javascript 实现map集合
2015/04/03 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python中异常重试的解决方案详解
2017/05/05 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
毕业生的自我评价范文
2013/12/31 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
二手房购房意向书范本
2014/04/01 职场文书
请假条范文大全
2014/04/10 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
爱护公共设施标语
2014/06/24 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
酒店服务员岗位职责
2015/02/09 职场文书