首先创建一个本地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);//需要这样获取到数组
});

学习笔记,如有不足请多多指教!

vue 模拟后台数据(加载本地json文件)调试的更多相关文章

  1. easyui 加载本地json 文件的方法

    easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...

  2. vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

    最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...

  3. vue加载本地json文件

    背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地文件,简单记录一下 准备数据,放到static下 ...

  4. vue.js学习笔记(二):如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  5. vue.js 如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  6. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)

    实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...

  7. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  8. Mysql加载本地CSV文件

    Mysql加载本地CSV文件 1.系统环境 系统版本:Win10 64位 Mysql版本: 8.0.15 MySQL Community Server - GPL Mysql Workbench版本: ...

  9. UIWebView加载本地html文件

    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight-)]; ...

随机推荐

  1. 编写自定义PE结构的程序(如何手写一个PE,高级编译器都是编译好的PE头部,例如MASM,TASM等,NASM,FASM是低级编译器.可以自定义结构)

    正在学PE结构...感谢个位大哥的文章和资料...这里先说声谢谢 一般高级编译器都是编译好的PE头部,例如MASM,TASM等一直都说NASM,FASM是低级编译器.可以自定义结构但是苦于无人发布相关 ...

  2. Introduce Null Object

    今天继续总结<重构>这本书中的一个重构手法,Introduce Null Object.写这个手法是因为它确实很巧妙,在实际编程中经常会遇到这种情况,前人总结出来了这么一个经典的手法,当然 ...

  3. fminunc

    options = optimset('GradObj', 'on', 'MaxIter', 400); % Run fminunc to obtain the optimal theta% This ...

  4. 成本函数计算方法J

    J = 1/(2*m) * sum((X*theta - y).^2);  OR

  5. bzoj4664: Count

    是bzoj4498: 魔法的碰撞的哥哥题,我只写了一种 不一样的地方在于贡献有负数,第三维要保存的不能仅仅是0~L,这样空间会炸裂 考虑如何把贡献变成正的 假如要求最优解,那么一定是按顺序排,混乱度为 ...

  6. Couldn't connect to host, port: smtp.163.com, 25; timeout -1;

    运行出现以下报错: Couldn't connect to host, port: smtp.163.com, 25; timeout -1; 也要设置端口 spring.mail.port=25

  7. Ural 1109 Conference(最小路径覆盖数)

    题意:A国家有M个代表,B国有N个代表,其中有K对代表可以进行谈判(一个是A国的,一个是B国的),并且每一个代表至少被包含在其中一对中(也就是说,每个人可以至少找到另外一个人谈判),每一对谈判需要一对 ...

  8. impdp+network link 跳过expdp直接导入目标库

    impdp命令特殊用途,可以将数据库的一个用户迁移到另一台机器上的数据库的用户中.如果目标用户不存在,还可以对应的创建该用户.  快速的把A库上的用户迁移到B库上. 下面就来看一下命令格式: B库下执 ...

  9. SPOJ:Robot(数学期望)

    There is a robot on the 2D plane. Robot initially standing on the position (0, 0). Robot can make a ...

  10. Python的多进程锁的使用

    很多时候,我们需要在多个进程中同时写一个文件,如果不加锁机制,就会导致写文件错乱 这个时候,我们可以使用multiprocessing.Lock() 我一开始是这样使用的: import multip ...