详解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自动显示最后更新时间
Mar 15 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
javascript+Canvas实现画板功能
Jun 23 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php输入流php://input使用浅析
2014/09/02 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
详解vuex的简单使用
2018/03/12 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
python将图片转base64,实现前端显示
2020/01/09 Python
在keras里实现自定义上采样层
2020/06/28 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
主题班会演讲稿
2014/05/22 职场文书
工作失误检讨书
2015/01/26 职场文书
2015感人爱情寄语
2015/02/26 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server