详解vue 模拟后台数据(加载本地json文件)调试
时间:2019-03-31
本文章向大家介绍详解vue 模拟后台数据(加载本地json文件)调试,主要包括详解vue 模拟后台数据(加载本地json文件)调试使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文介绍了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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PS常用命令之WmiObject操作
- 『爬虫四步走』手把手教你使用Python抓取并存储网页数据!
- 快速掌握并发编程---synchronized篇(下)
- pivottablejs|在Jupyter中尽情使用数据透视表!
- 快速掌握并发编程---锁优化篇
- 弄懂这 6 个问题,拿下 Python 生成器!
- 快速掌握并发编程---线程阻塞与唤醒
- DOM优化之重绘和回流
- 本地储存之 Cookie、webStorage、indexedDB
- 使用DocumentFragment优化DOM操作
- 事件的防抖和节流
- JS事件循环之宏任务和微任务
- 小程序生成图片并保存
- 快速掌握接口测试利器Postman
- 小程序中使用less