当前位置:首页 > 日记 > 正文

详解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);//需要这样获取到数组   });

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

相关文章

excel表格百分比数据分析图表制作

excel表格百分比数据分析图表制作

图表,数据分析,百分比,表格,制作教程,  Excel中具体该如何制作百分比数据分析图进行数据分析呢?下面是由小编分享的excel表格百分比数据分析图表制作教程,以供大家阅读和学习。excel表格百分比数据分析图表制作教程:  数据分析图表制作步…

WPS表格怎样合并同一文件夹下的多

WPS表格怎样合并同一文件夹下的多

方法,显示,合并,多个,表格,  一个文件夹中有很多相同类型但是数值不同的表格,如何能够快速的把这些表格合并成一张表格呢?下面小编给大家分享WPS表格合并多个表格的方法,欢迎阅读。WPS表格合并同一文件夹下的多个表格的方法第一步:把想合并…

NodeJS链接MySql数据库的操作方法

NodeJS链接MySql数据库的操作方法

数据库,操作方法,链接,电脑软件,NodeJS,如下所示://1.用npm命令安装mysql模块npm install mysql//2.js文件中引入mysql模块const mysqlModule = require('mysql');//3.创建mysql链接对象const mysqlConnection = mysqlModule.createConnec…

Node.JS 循环递归复制文件夹目录及

Node.JS 循环递归复制文件夹目录及

循环,文件,递归,目录,电脑软件,实现代码一:var fs = require('fs')var path = require('path')var copyFile = function(srcPath, tarPath, cb) { var rs = fs.createReadStream(srcPath) rs.on('error', function(err) { if (err) …

Ajax异步获取html数据中包含js方法

Ajax异步获取html数据中包含js方法

方法,数据,无效,异步,解决方法,页面上使用js写了一个获取后台数据的方法function data() { var tab = $("#dic") $.ajax({ url: '../demo.ashx?method=GetList', data: {}, dataType: 'json', type: 'pos…

excel中交换两行数据的方法

excel中交换两行数据的方法

方法,数据,两行,电脑软件,excel,  Excel中两行数据该如何交换呢?下面是小编带来的关于excel中交换两行数据的方法,希望阅读过后对你有所启发!excel中交换两行数据的方法:  交换两行数据步骤1:打开excel表格,交换两行数据步骤2:选中要换的行…

怎么在excel2007设置数据组合在exc

怎么在excel2007设置数据组合在exc

设置,数据,组合,方法,教程,  在办公实际操作中excl表格有的时候需要看很多的数据常常需要上下浮动表格,这个是时候可以利用数据组合的方式,快捷的查看到你想要的数据,非常方便。下面小编教你怎么在excel2007设置数据组合,希望对你有帮助!在exc…

JavaScript数据结构之二叉树的计数

JavaScript数据结构之二叉树的计数

叉树,算法示例,数据结构,之二,电脑软件,本文实例讲述了JavaScript数据结构之二叉树的计数算法。分享给大家供大家参考,具体如下:二叉查找树的一个用途就是记录一组数据集中数据出现的次数。比如记录成绩的分布,给定一组考试成绩,如果未出现则加…

Excel2003怎么制作数据分析直方图

Excel2003怎么制作数据分析直方图

直方图,数据分析,方法,电脑软件,  用Excel 2003做数据分析直方图的人应该比较少吧,但是也一点也不影响数据分析直方图的作用和excel2003的地位,那么下面小编就教你怎么在excel2003中制作数据分析直方图,希望对你有帮助!Excel2003制作数据分析…

WPS表格怎么做数据对比图WPS表格做

WPS表格怎么做数据对比图WPS表格做

数据,方法,透析,步骤,表格,  在做wps表格过程中,我们经常会把一些早期的数据和现在的数据进行对比了,为了便于更加直观的浏览,做成数据对比图,效果会更好,那怎么做呢?下面小编告诉你吧。▼▼▼更多WPS表格的操作技巧,欢迎点击▼▼▼????WPS表格…

Excel中进行将两列数据互相找不同

Excel中进行将两列数据互相找不同

数据,操作技巧,操作步骤,电脑软件,Excel,  用于两列庞大数据做对比时,如果只用肉眼来看,那绝对是又耗时,准确率又不高的情况。今天,小编就教大家在Excel表格中,用两列数据互相找不同数据的操作技巧,希望对你有帮助!Excel中进行将两列数据互相找…

vue2笔记 — vue-router路由懒加载

vue2笔记 — vue-router路由懒加载

懒加载,路由,笔记,电脑软件,router,在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。懒加载(Load On Demand)是一种独特而又强…