详解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 相关文章推荐
Javascript this指针
Jul 30 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
使用js实现数据格式化
Dec 03 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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
linux下php上传文件注意事项
2016/06/11 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
JS实现拼图游戏
2021/01/29 Javascript
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python中的字典操作及字典函数
2018/01/03 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
软件测试面试题
2015/10/21 面试题
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
《悯农》教学反思
2014/04/28 职场文书
中秋节活动总结
2014/08/29 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
学校团代会开幕词
2016/03/04 职场文书