详解vue 模拟后台数据(加载本地json文件)调试
作者:哎哟喂勒 发布时间:2023-07-16 18:25:57
标签: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);//需要这样获取到数组
});
来源:http://www.cnblogs.com/xianhuiwang/p/6733529.html
0
投稿
猜你喜欢
- ASP与MySQL的连接ASP和MySQL连接目前有两种方法:一种方法是使用MySQLX之类的组件,不过这种连接方法需要支付一定的费用;另外
- 在电子产品的设计中,大家经常提到简洁是设计的重要元素。可是很多产品,不见得简洁就是第一要素。简洁的设计,必须是在对用户需求透彻理解,引导用户
- 本文介绍了随机提取N条记录的例子,通过Sql server与access数据库的代码比较让你更快的掌握。随机提取10条记录的例子:Sql s
- 在dreamweaver4中,你可以存储你自己设定的图片,链接,flash影片,颜色表,模板等等,组成这个站点的资产,这就是Assets面板
- <!doctype><html><head><title>新闻图片轮换类</title
- 前段时间在网上找了一个“完美的”JavaScript对象克隆的函数,感觉还不错,但随后便出现了一些问题,发现这个克隆并不好用,在使用发现了如
- 这篇文章主要是把ASP代码变成组件,开发者不仅是加快了ASP的速度,而且也能保护加密自己的代码,编译asp代码为dll组件我想这个是最好的保
- meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head&
- 树形目录显示程序问题描述:在我们项目中常常会出现自关联的数据表,如果我们从整体看去,整个表就呈现为一个树形数据结构(对于复杂的情况,它可能变
- [pre]REPAIR [LOCAL | NO_WRITE_TO_BINLOG] TABLE[/pre][pre] tbl_name[,tb
- 最简单的方法:取整后判断是否和原值相等!javascript的取整函数是:parseIntif(parseInt(value)==value
- 赠送QQ秀流程是QQ秀商城关键流程之一,占了收入最直接的一部分。它的优化是后续商城流程优化的重要参考。OK,现在就用TA做例子,分享一下流程
- 用XMlhttp生成html页面,相关函数如下:<% ’定义xmlhttp function Get
- 迄今为止,导出/导入工具集仍是跨多个平台转移数据所需劳动强度最小的首选实用工具,尽管人们常常抱怨它速度太慢。导入只是将每条记录从导出转储文件
- 网站能切换几套CSS风格早已不是什么新鲜事了。大家也都知道怎么去弄。早上发现一个有意思得站点 http://www.leemunroe.co
- FSO,正如UFO般令人激动、令人神往,当然更多的亦是让人欢喜让人忧。君不见某空间服务商广告:100MB空间只要60RMB/年,支持数据库,
- SQL Server与Oracle、DB2的优劣对比:1.开放性:SQL Server只能在Windows上运行,没有丝毫的开放性,操作系统
- Sql Server的存储过程是一个被命名的存储在服务器上的Transacation-Sql语句集合,是封装重复性工作的一种方法,它支持用户
- 第一章:基本的圆角框第二章:透明圆角化背景图片第三章:圆角化图片 第四章:CSS圆角框组件 V1.0序言:在我的文章《超圆滑圆角框的半完美解
- 有三种主要的错误类型: 1.编译错误: 这种错误出现一般都是代码的语法问题。因为编译错误而导致辞ASP停止运行。 2.运行错误: 这个错误是