在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如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文件的更多相关文章

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

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

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

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

  3. vue 模拟后台数据(加载本地json文件)调试

    首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages" ...

  4. vue加载本地json文件

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

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

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

  6. WebView加载本地Html文件并实现点击效果

    Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行j ...

  7. UIWebView加载本地html文件

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

  8. 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件

    使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...

  9. Mysql加载本地CSV文件

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

随机推荐

  1. 架构篇 | 带你轻松玩转 LAMP 网站架构平台(一)

    作者 | JackTian 微信公众号 | 杰哥的IT之旅(ID:Jake_Internet) 转载请联系授权(微信ID:Hc220066)备注:来自博客园 1.什么是 LAMP 架构? LAMP 架 ...

  2. rn相关文档

    RN相关文档: rn文档:https://reactnative.cn/ mbox文档:https://cn.mobx.js.org/ es6文档:http://es6.ruanyifeng.com/ ...

  3. Scrapy笔记11- 模拟登录

    Scrapy笔记11- 模拟登录 有时候爬取网站的时候需要登录,在Scrapy中可以通过模拟登录保存cookie后再去爬取相应的页面.这里我通过登录github然后爬取自己的issue列表来演示下整个 ...

  4. R语言学习(基本知识)

    0)查看帮助 library(help="ballgown") #查看包帮助 getwd() #查看当前工作目录 setwd('C:/Users/djx/Desktop/信号肽系统 ...

  5. 联想笔记本上Ubuntu无线网卡问题

    可能有两个问题: 1.无无线网卡驱动 2.无线网卡驱动不能自动加载 问题1:无线网卡驱动 百度出网卡驱动iwlwifi-9000,如iwlwifi-9000-pu-b0-jf-b0-34.618819 ...

  6. 关于三层架构和MVC模式的思考

    MVC模式 核心: 1.解耦Model和View,即使得Model可以被不同的展示,比如一批统计数据可以分别用柱状图.饼图表示 2.Controller用来保证Model和View的同步 Model ...

  7. 复旦大学2018--2019学年第二学期(18级)高等代数II期末考试第六大题解答

    六.(本题10分)  设 $A$ 为 $n$ 阶实对称阵, 证明: $A$ 有 $n$ 个不同的特征值当且仅当对 $A$ 的任一特征值 $\lambda_0$ 及对应的特征向量 $\alpha$, 矩 ...

  8. Bootstrap-duallistbox的使用

    1:首先引入相关js <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> &l ...

  9. Spring Security教程之退出登录logout(十)

    要实现退出登录的功能我们需要在http元素下定义logout元素,这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain.当我们指定 ...

  10. Burp Suite 入门教程(BURP SUITE TUTORIAL )

    参考链接1:https://www.pentestgeek.com/what-is-burpsuite 参考链接2:https://www.pentestgeek.com/web-applicatio ...