详解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绝句欣赏 一些经典的js代码
Feb 22 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
如何解决vue在ios微信"复制链接"功能问题
Mar 26 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
react-router实现按需加载
2017/05/09 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
python使用pymysql实现操作mysql
2016/09/13 Python
python使用fork实现守护进程的方法
2017/11/16 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
毕业学生推荐信
2013/12/01 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
经典团队口号大全
2014/06/21 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
经理聘任证明
2015/03/02 职场文书
观看《信仰》心得体会
2016/01/15 职场文书