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 相关文章推荐
javascript下string.format函数补充
Aug 24 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JavaScript严格模式详解
Nov 18 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
Node学习记录之cluster模块
May 31 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
详解Vue调用手机相机和相册以及上传
May 05 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
实用函数3
2007/11/08 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
高中物理教学反思
2014/02/08 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
委托书的格式
2014/08/01 职场文书
超市创业计划书
2014/09/15 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
2014年学习部工作总结
2014/11/12 职场文书
颐和园的导游词
2015/01/30 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python