在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如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. pydev离线安装及安装后eclipse中不显示解决办法

    eclipse插件安装方法(离线安装)pydev进入eclipse目录1.创建links目录2.复制压缩包到目录前解压3.在links目录下新建pydev.link文件(记事本修改后缀名即可)4.py ...

  2. 09-numpy-笔记-repeat

    repeat:复制元素 axis = 0 复制每行 axis = 1 复制每列 2 表示复制一遍 不设置axis,复制每个,按行展开成一行. >>> import numpy as ...

  3. 趣味编程:静夜思(C++17 Ranges版)

    #include <iostream> #include <range/v3/all.hpp> #include <vector> #include <loc ...

  4. 复制excel表中的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【louguP2234】[HNOI2002]营业额统计(链表)

    题目链接 离线用链表维护,先按权值排序,建立链表,记录每一天在链表的位置,然后按天数从大到小查询,查询完删除 #include<algorithm> #include<iostrea ...

  6. 【cf补题记录】Codeforces Round #607 (Div. 2)

    比赛传送门 这里推荐一位dalao的博客-- https://www.cnblogs.com/KisekiPurin2019/ A:字符串 B:贪心 A // https://codeforces.c ...

  7. MySQL统计百分比结果

    1,不带小数点的百分比 SELECT CONCAT(ROUND(errorTable.errorCount / totalTable.totalCount * 100),'','%') FROM (S ...

  8. Docker安装及简单使用(Ubuntu)

    ### Ubuntu18下docker安装 * step 1: 安装必要的一些系统工具 sudo apt-get update sudo apt-get -y install apt-transpor ...

  9. docker 学习操作记录 5-2

    记录5-2 root@53d0a643a2c7:/# quit bash: quit: command not found root@53d0a643a2c7:/# exit exit -->@ ...

  10. [转帖]Kubernetes v1.17 版本解读 | 云原生生态周报 Vol. 31

    Kubernetes v1.17 版本解读 | 云原生生态周报 Vol. 31 https://www.kubernetes.org.cn/6252.html 2019-12-13 11:59 ali ...