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


Posted in Javascript onJanuary 17, 2017

在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发。但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来。(此时项目是由webpack打包而成)。

整个项目是由webpack打包而成。具体项目结构如下:

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

1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux

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

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

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);

4:使用方法:

你可以在浏览器地址栏填写http://localhost:8080/api/seller  或者http://localhost:8080/api/goods  或者http://localhost:8080/api/ratings   查看数据

因为加载的json数据没有格式,看起来很乱,所以我们可以使用谷歌的扩展程序JSONView。

贴上读取数据的页面

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 #Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 #Javascript
微信小程序实战之运维小项目
Jan 17 #Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 #Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 #Javascript
浅析vue数据绑定
Jan 17 #Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 #Javascript
You might like
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP中Array相关函数简介
2016/07/03 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Django的性能优化实现解析
2019/07/30 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
安全协议书
2014/04/23 职场文书
运动会加油稿100字
2014/09/19 职场文书
护理见习报告范文
2014/11/03 职场文书
天气温馨提示语
2015/07/14 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
小学信息技术教学反思
2016/02/16 职场文书
《学会看病》教学反思
2016/02/17 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS