vue.js学习笔记:如何加载本地json文件
2017-01-17 15:08
1076 查看
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发。但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来。(此时项目是由webpack打包而成)。
整个项目是由webpack打包而成。具体项目结构如下:
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如何加载本地json文件
- Node.js学习笔记(8、配置文件package.json)
- [dotnetCore2.0]学习笔记之二: ASP.NET Core中,如何灵活使用静态文件和加载自定义配置
- iOS学习笔记 1 —— UIWebView加载本地HTML5文件
- vue2.0 如何通过本地json文件模拟后台数据接口
- VUE 学习笔记之,如何对公共JS,CSS进行统一管理,全局调用
- 详解vue 模拟后台数据(加载本地json文件)调试
- linux学习笔记:本地如何上传文件到linux服务器
- seaJs学习笔记之seaJs的异步加载和加载多个js文件
- vue加载本地json文件
- SharePoint学习笔记002:未能加载文件或程序集'Microsoft.SharePoint.Sandbox.dll
- EF学习笔记28:如何实现自己的预先加载(Eager Loading)策略
- js 如何通过js脚本动态加载js文件及读写cookie
- VS2008 VC 如何把图片等资源文件通过本地路径加载方式加载
- poco库学习笔记(3) 加载配置文件
- Qt学习笔记:如何运行Qt程序所生成的.exe文件
- 如何按需动态加载js文件
- 如何在js文件中写加载Applet控件(js与jsp分离技术)
- C++Builder学习笔记5.1(连接数据库,读写配置文件,加载DLL)
- SilverLight学习笔记--silverlight如何在客户端读取文件