vue.js 如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发。但是,如何在一个vue.js 项目中引入本地的json文件
vue.js代码如下:
var app = express() //从这后面开始加
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
var apiRoutes = express.Router();
apiRoutes.get('/seller',function (req,res) {
res.json({
errno:0,
data:seller
});
});
apiRoutes.get('/goods',function (req,res) {
res.json({
errno:0,
data:goods
});
});
apiRoutes.get('/ratings',function (req,res) {
res.json({
errno:0,
datta:ratings
});
});
app.use('/api',apiRoutes);
我们JSON数据结构如下:

vue.js 如何加载本地json文件的更多相关文章
- easyui 加载本地json 文件的方法
easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...
- vue.js学习笔记(二):如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- vue 模拟后台数据(加载本地json文件)调试
首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages" ...
- vue加载本地json文件
背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地文件,简单记录一下 准备数据,放到static下 ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- WebView加载本地Html文件并实现点击效果
Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行j ...
- UIWebView加载本地html文件
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight-)]; ...
- 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
- Mysql加载本地CSV文件
Mysql加载本地CSV文件 1.系统环境 系统版本:Win10 64位 Mysql版本: 8.0.15 MySQL Community Server - GPL Mysql Workbench版本: ...
随机推荐
- $.fn与$.fx什么意思; $.extend与$.fn.extend用法区别; $(function(){})和(function(){})(jQuery)
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...
- Spring Data Elasticsearch 聚合查询
如需要统计某件商品的数量,最高价格,最低价格等就用到了聚合查询,就像数据库中的group by 首先需要注入ElasticsearchTemplate @Autowired private Elast ...
- 3.shell编程-文件查找之find命令
3.1.语法格式 find [路劲][选项][操作] 选项参数对照表 3.2.-name 查找/etc/目录下以.conf结尾的文件 find /etc/ -name "*.conf&quo ...
- Http 状态码(Status Codes)
七.状态码(Status Codes)*服务器向用户返回的状态码和提示信息,常见的有以下一些(方括号中是该状态码对应的HTTP动词).200 OK - [GET]:服务器成功返回用户请求的数据,该操作 ...
- 深入js系列-类型(开篇)
思考 作为一个编程人员,你可能从来没仔细思考过,为什么这么多高级语言会有类型这东西. 实际上,类型有点类似生活中的类别,我们日常生活,早已经把这个概念理解到了,切肉和切水果会用不同的刀. 语言级别的类 ...
- Elasticsearch状态API接口排障总结
ES的Restful API,共四类API: 1. 检查集群.节点.索引等健康与否,以及获取其相应状态. 2. 管理集群.节点.索引及元数据 3. 执行CRUB操作(即:增删查改) 4. 执行高级操作 ...
- vs连接oracle
参考: https://www.cnblogs.com/gguozhenqian/p/4262813.html
- Glimma 包
http://master.bioconductor.org/packages/3.9/bioc/html/Glimma.html 安装 if (!requireNamespace("Bio ...
- 《Linux就该这么学》培训笔记_ch14_使用DHCP动态管理主机地址
<Linux就该这么学>培训笔记_ch14_使用DHCP动态管理主机地址 文章最后会post上书本的笔记照片. 文章主要内容: 动态主机地址管理协议 部署dhcpd服务程序 自动管理IP地 ...
- Topshelf 搭建 Windows 服务
Topshelf 是一个用来部署基于.NET Framework 开发的服务的框架.简化服务创建于部署过程,并且支持控制台应用程序部署为服务.本文基于 .net core 控制台应用程序部署为服务(. ...