详解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 相关文章推荐
jQuery Autocomplete自动完成插件
Jul 17 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
计算机操作自荐信
2013/12/07 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
总裁办公室主任职责
2014/01/02 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
献爱心标语
2014/06/21 职场文书
学生会个人总结范文
2015/02/15 职场文书
办公室岗位职责范本
2015/04/11 职场文书
教师思想工作总结2015
2015/05/13 职场文书
建国大业观后感
2015/06/01 职场文书
关于环保的广播稿
2015/12/17 职场文书