详解vue 模拟后台数据(加载本地json文件)调试


Posted in Javascript onAugust 25, 2017

本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记

首先创建一个本地json文件,放在项目中如下

{
 "runRedLight":{
  "CurrentPage": 1,
  "TotalPages": 0,
  "TotalItems": 0,
  "ItemsPerPage": 100,
  "Items":[
   {"DEVICEID":"121212","DEVICETYPE":"1","DEVICETIME":"2016-10-10","CREATEDTIME": "2016-10-11"},
   {"DEVICEID":"124412","DEVICETYPE":"1","DEVICETIME":"2016-10-10","CREATEDTIME": "2016-10-11"},
   {"DEVICEID":"121255","DEVICETYPE":"1","DEVICETIME":"2016-10-10","CREATEDTIME": "2016-10-11"},
   {"DEVICEID":"121266","DEVICETYPE":"1","DEVICETIME":"2016-10-10","CREATEDTIME": "2016-10-11"}
  ]
 },
 "redLightRoad": [
  {"CREATEDTIME":"2017-03-03 09:41:44","DEVICEID":"2","ID":"45afdc60f33443d28fe0171d0df40d14","NAME":"1"},
  {"CREATEDTIME":"2017-03-03 09:41:52","DEVICEID":"5","ID":"74cf7106f1fa406f9c32ad351e7dfc76","NAME":"2"}
 ]
}

然后在dev-server.js中配置

1.数据读取

var appData = require('../data.json');
var runRedLight = appData.runRedLight;
var redLightRoad = appData.redLightRoad;

2.定义路由

var apiRoute = express.Router();
apiRoute.get('/runRedLight',function(req, res){
 res.json({
  errno:0,//错误码
  data: runRedLight//具体数据
 })
})

apiRoute.get('/redLightRoad',function(req, res){
 res.json({
  errno:0,
  data: runRedLight
 })
})

3.注册定义的api

app.use('/api',apiRoute);

4.在页面使用url

this.$http.get("/api/runRedLight").then((response) => {
     response = response.body;
     console.log(response.data);//需要这样获取到数组
   });

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

Javascript 相关文章推荐
javascript 设置文本框中焦点的位置
Nov 20 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
JavaScript中的高级函数
Jan 04 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
react中props 的使用及进行限制的方法
Apr 28 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 #Javascript
AngularJS select设置默认值的实现方法
Aug 25 #Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 #Javascript
node跨域请求方法小结
Aug 25 #Javascript
AngularJS中filter的使用实例详解
Aug 25 #Javascript
微信小程序实现表单校验功能
Mar 30 #Javascript
Angularjs中ng-repeat的简单实例
Aug 25 #Javascript
You might like
解决CodeIgniter伪静态失效
2014/06/09 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python实现彩色图转换成灰度图
2019/01/15 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
html5时钟实现代码
2010/10/22 HTML / CSS
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
企业管理毕业生求职信范文
2014/03/07 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
大学生社会实践方案
2014/05/11 职场文书
书法大赛策划方案
2014/06/04 职场文书
怎么写工作检讨书
2014/11/16 职场文书
失职检讨书大全
2015/01/26 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL