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);//需要这样获取到数组
});
学习笔记,如有不足请多多指教!
vue 模拟后台数据(加载本地json文件)调试的更多相关文章
- easyui 加载本地json 文件的方法
easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...
- vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)
最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...
- vue加载本地json文件
背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地文件,简单记录一下 准备数据,放到static下 ...
- vue.js学习笔记(二):如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- vue.js 如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- Mysql加载本地CSV文件
Mysql加载本地CSV文件 1.系统环境 系统版本:Win10 64位 Mysql版本: 8.0.15 MySQL Community Server - GPL Mysql Workbench版本: ...
- UIWebView加载本地html文件
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight-)]; ...
随机推荐
- weblogic 修改控制台console访问路径 url
出于安全的考虑需要对weblogic的console进行屏避,或者修改默认的访问路径,主要有两种方法:(这里针对weblogic8.1) 一.进入默认的控制台,例如“localhost/console ...
- Asp.net 两个链接实现虾米音乐搜索
起因 暑假刚结束,又要回到学校写代码了,本人写代码的时候特别喜欢听歌,一直使用的是虾米音乐,出于好奇,想给自己的网站集成虾米音乐搜索功能,但是一直找不到虾米开放api,所以只能自己找办法了,之后发现一 ...
- eclipse debug configurations arguments指定文件路径参数
1 eclipse debug configurations arguments指定文件路径参数 使用绝对路径,但是这个文件必须要放在该project的源码路径的外面才行,否则eclipse不认这个文 ...
- css简单的数学运算
calc()是css3的一个新增的属性, .box{border:1px solid #ddd; width:calc(100% - 100px); background:#9AC8EB;} 兼容 ...
- 在无代码文件的aspx文件中添加类、函数和字段的方法
大家都知道,在开始WebForm程序时,一个WebForm由.cs代码文件与.aspx页面文件组成.在aspx文件中可以嵌入C#代码,但无法在aspx的嵌入C#代码中定义类,函数和字段等.这样,就限制 ...
- IDHTTP用法详解 good
一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接等 IDHttp的创建,需要引入ID ...
- css3中我们不知道的一些属性
1.图片作为边框:border-image; 2.圆角问题:border-radius:上.下.左.右: 3.字体的阴影与自动换行: 阴影: h1 {text-shadow: 5px 5px 5px ...
- 一步一步学Silverlight 2系列(24):与浏览器交互相关辅助方法
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScript
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- BZOJ_1492_[NOI2007]货币兑换Cash_CDQ分治+斜率优化
BZOJ_1492_[NOI2007]货币兑换Cash_CDQ分治+斜率优化 Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券 ...