vue.js学习笔记(二):如何加载本地json文件
在项目开发的过程中,如果后台接口还未开发完成,这个时候所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发。但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来。
整个项目是由vue-cli脚手架搭建而成。具体项目结构如下:
1:首先我们使用vue-cli脚手架工具打包成上图所示的样子,不会vue-cli请跳转至这里:传送门
2:我们找到bulid>dev-server.js,然后打开
3:在里面加入这段代码,大概在20行左右)。
- var app = express() // 从这后面开始加
- var goodsData = require('../data.json')
- var router = express.Router()
- router.get("/goods", function (req,res) {
- res.json(goodsData)
- })
- app.use(router)
这里用到的是node.js+express框架的知识。
4:将json文件放入项目中
- {
- "status":"0",
- "result":[
- {
- "productId":"10001",
- "productName":"小米6",
- "prodcutPrice":"2499",
- "prodcutImg":"mi6.jpg"
- },
- {
- "productId":"10002",
- "productName":"小米笔记本",
- "prodcutPrice":"3999",
- "prodcutImg":"note.jpg"
- },
- {
- "productId":"10003",
- "productName":"小米6",
- "prodcutPrice":"2499",
- "prodcutImg":"mi6.jpg"
- },
- {
- "productId":"10004",
- "productName":"小米6",
- "prodcutPrice":"2499",
- "prodcutImg":"1.jpg"
- },
- {
- "productId":"10001",
- "productName":"小米6",
- "prodcutPrice":"2499",
- "prodcutImg":"mi6.jpg"
- },
- {
- "productId":"10002",
- "productName":"小米笔记本",
- "prodcutPrice":"3999",
- "prodcutImg":"note.jpg"
- },
- {
- "productId":"10003",
- "productName":"小米6",
- "prodcutPrice":"2499",
- "prodcutImg":"mi6.jpg"
- },
- {
- "productId":"10004",
- "productName":"小米6",
- "prodcutPrice":"2499",
- "prodcutImg":"1.jpg"
- }
- ] }
5: 在某个组件中使用axios或者vue-resource调用:
- <script>
- import axios from 'axios'
- export default{
- data(){
- return {
- }
- }
- mounted () {
- this.getGoodsList()
- },
- methods: {
- getGoodsList () {
- axios.get('/goods').then((res) => {
- var result = res.data
- console.log(result)
- })
- }
- }
- }
- </script>
6:页面中打印这个结果:
vue.js学习笔记(二):如何加载本地json文件的更多相关文章
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- easyui 加载本地json 文件的方法
easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...
- vue 模拟后台数据(加载本地json文件)调试
首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages" ...
- vue中的img src 动态加载本地json的图片路径写法。
目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-b ...
- vue.js学习笔记(二)——vue-router详解
vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...
- vue.js 如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- vue加载本地json文件
背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地文件,简单记录一下 准备数据,放到static下 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
随机推荐
- 块和内嵌div和span
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 我的第一个Android项目之环境搭建
开发IDE Android Studio2.0 + Genymotion + JDK1.8 网盘地址:http://pan.baidu.com/s/1kUSVqaN Android Studio 我的 ...
- PAT1010
Given a pair of positive integers, for example, 6 and 110, 给出一对正整数,例如6和110 can this equation 6 = 110 ...
- 关于iOS性能调优
性能调优一直都是作为高阶iOS开发者的一个入门门槛,下面我搜集了日常查阅资料中见到的各种高质量调优博文,仅供参考 UIKit性能调优实战讲解 iOS 高效添加圆角效果实战讲解
- Java加密解密字符串
http://www.cnblogs.com/vwpolo/archive/2012/07/18/2597232.html Java加密解密字符串 旧文重发:http://www.blogjava ...
- (简单) 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 ...
- Android SQLite总结[转载]
[转载] :http://blog.163.com/zqy216_2008/blog/static/4119371820119954812509/ 最近在做的项目涉及到了SQLite,大学时没有好好学 ...
- 《javascript语言精粹》——第3章对象
第三章:对象: 属性名字:可以是包括空字符串在内的任意字符串: 属性值:是除undefined值之外的任何值; [1].对象字面量: var obj={}; //空对象 var obj = new O ...
- 【转】实用 .htaccess 用法大全
这里收集的是各种实用的 .htaccess 代码片段,你能想到的用法几乎全在这里. 免责声明: 虽然将这些代码片段直接拷贝到你的 .htaccess 文件里,绝大多数情况下都是好用的,但也有极个别情况 ...
- css(三)-- 常用属性
css的常用属性包括以下几种: CSS 背景CSS 文本CSS 字体CSS 列表CSS 表格 1.CSS 背景 /*操作背景的属性 */ body{ /*background-color:#CCC; ...