在项目开发的过程中,如果后台接口还未开发完成,这个时候所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发。但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来。

整个项目是由vue-cli脚手架搭建而成。具体项目结构如下:

1:首先我们使用vue-cli脚手架工具打包成上图所示的样子,不会vue-cli请跳转至这里:传送门

2:我们找到bulid>dev-server.js,然后打开

3:在里面加入这段代码,大概在20行左右)。

  1. var app = express() // 从这后面开始加
  2.  
  3. var goodsData = require('../data.json')
  4. var router = express.Router()
  5. router.get("/goods", function (req,res) {
  6. res.json(goodsData)
  7. })
  8. app.use(router)

这里用到的是node.js+express框架的知识。

4:将json文件放入项目中

  1. {
  2. "status":"0",
  3. "result":[
  4. {
  5. "productId":"10001",
  6. "productName":"小米6",
  7. "prodcutPrice":"2499",
  8. "prodcutImg":"mi6.jpg"
  9. },
  10. {
  11. "productId":"10002",
  12. "productName":"小米笔记本",
  13. "prodcutPrice":"3999",
  14. "prodcutImg":"note.jpg"
  15. },
  16. {
  17. "productId":"10003",
  18. "productName":"小米6",
  19. "prodcutPrice":"2499",
  20. "prodcutImg":"mi6.jpg"
  21. },
  22. {
  23. "productId":"10004",
  24. "productName":"小米6",
  25. "prodcutPrice":"2499",
  26. "prodcutImg":"1.jpg"
  27. },
  1.   {
  2. "productId":"10001",
  3. "productName":"小米6",
  4. "prodcutPrice":"2499",
  5. "prodcutImg":"mi6.jpg"
  6. },
  7. {
  8. "productId":"10002",
  9. "productName":"小米笔记本",
  10. "prodcutPrice":"3999",
  11. "prodcutImg":"note.jpg"
  12. },
  13. {
  14. "productId":"10003",
  15. "productName":"小米6",
  16. "prodcutPrice":"2499",
  17. "prodcutImg":"mi6.jpg"
  18. },
  19. {
  20. "productId":"10004",
  21. "productName":"小米6",
  22. "prodcutPrice":"2499",
  23. "prodcutImg":"1.jpg"
  24. }
  1. ] }

  

5: 在某个组件中使用axios或者vue-resource调用:

  1. <script>
  2. import axios from 'axios'
  3. export default{
  4. data(){
  5. return {
  6.  
  7. }
  8. }
  9. mounted () {
  10. this.getGoodsList()
  11. },
  12. methods: {
  13. getGoodsList () {
  14. axios.get('/goods').then((res) => {
  15. var result = res.data
  16. console.log(result)
  17. })
  18. }
  19. }
  20. }
  21. </script>

  

6:页面中打印这个结果:

  

vue.js学习笔记(二):如何加载本地json文件的更多相关文章

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

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

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

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

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

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

  4. vue中的img src 动态加载本地json的图片路径写法。

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-b ...

  5. vue.js学习笔记(二)——vue-router详解

    vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...

  6. vue.js 如何加载本地json文件

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

  7. vue加载本地json文件

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

  8. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  9. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

随机推荐

  1. 块和内嵌div和span

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 我的第一个Android项目之环境搭建

    开发IDE Android Studio2.0 + Genymotion + JDK1.8 网盘地址:http://pan.baidu.com/s/1kUSVqaN Android Studio 我的 ...

  3. PAT1010

    Given a pair of positive integers, for example, 6 and 110, 给出一对正整数,例如6和110 can this equation 6 = 110 ...

  4. 关于iOS性能调优

    性能调优一直都是作为高阶iOS开发者的一个入门门槛,下面我搜集了日常查阅资料中见到的各种高质量调优博文,仅供参考 UIKit性能调优实战讲解 iOS 高效添加圆角效果实战讲解

  5. Java加密解密字符串

    http://www.cnblogs.com/vwpolo/archive/2012/07/18/2597232.html Java加密解密字符串   旧文重发:http://www.blogjava ...

  6. (简单) POJ 2387 Til the Cows Come Home,Dijkstra。

    Description Bessie is out in the field and wants to get back to the barn to get as much sleep as pos ...

  7. Android SQLite总结[转载]

    [转载] :http://blog.163.com/zqy216_2008/blog/static/4119371820119954812509/ 最近在做的项目涉及到了SQLite,大学时没有好好学 ...

  8. 《javascript语言精粹》——第3章对象

    第三章:对象: 属性名字:可以是包括空字符串在内的任意字符串: 属性值:是除undefined值之外的任何值; [1].对象字面量: var obj={}; //空对象 var obj = new O ...

  9. 【转】实用 .htaccess 用法大全

    这里收集的是各种实用的 .htaccess 代码片段,你能想到的用法几乎全在这里. 免责声明: 虽然将这些代码片段直接拷贝到你的 .htaccess 文件里,绝大多数情况下都是好用的,但也有极个别情况 ...

  10. css(三)-- 常用属性

    css的常用属性包括以下几种: CSS 背景CSS 文本CSS 字体CSS 列表CSS 表格 1.CSS 背景 /*操作背景的属性 */ body{ /*background-color:#CCC; ...