详解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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
详细分析Node.js 多进程
Jun 22 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
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
一些不错的js函数ajax
2008/08/20 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
九种原生js动画效果
2015/11/11 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
python中global用法实例分析
2015/04/30 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
在python3中实现更新界面
2020/02/21 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
python开发入门——列表生成式
2020/09/03 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
幼儿园小班教学反思
2014/02/02 职场文书
火车来了教学反思
2014/02/11 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
人民调解员培训方案
2014/06/05 职场文书
校园文明标语
2014/06/13 职场文书
班主任经验交流材料
2014/12/16 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2015年教师节主持词
2015/07/03 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书