json-server 在vue模块化项目中的配置

原创 lingwer111 随笔 vue 341阅读 2017-06-16 22:03:33 举报

在前后端分离的项目中,前端需要自己模拟数据来调试,最后和后端进行联调。
模拟后端接口数据,在模块化的开发中需要借助工具:json-server
不过这个工具的缺点是只能获取get请求的数据,post请求是增加数据。如果需要用到post,需要用express

下面将记录jons-server在vue项目中的配置
准备一个json数据。命名为 db.json
json 代码

工具基于node环境
进入项目跟目录下
安装  [backcolor=#dbe5f1]npm install json-server --save[/bgcolor]
--save 作用更新package.json配置文件,把json-server 信息写入

进入build/dev-server.js 文件。这是vue测试配置的文件,是node的脚本。需要在这个文件下更新拓展一下
去到json-server 的github仓库文档,https://github.com/typicode/json-server

json-server在vue模块化项目中的配置
把框框中的代码,拷贝到dev-server.js 文件下
(注意变量名server,router 可能会冲突,所以这里在前面加上api)

3000表示json-server.js监听的端口号,dev-server.js中默认监听的端口号为8080,变量为port。
可以把端口号改为 port + 1表示监听 8081端口
db.json 是以 文件入口 index.html为路径基点的。 所以db.json路径与index.html的路径平级。(也就是最外层)

json-server在vue模块化项目中的配置

启动node服务器 : [backcolor=#dbe5f1]npm run dev[/bgcolor]
可以访问 localhost: 8080是项目的地址
Localhost:8081端口是 josn-server监听的端口

json-server在vue模块化项目中的配置

最后一步,使用代理
打开config/index.js

json-server在vue模块化项目中的配置
修改proxyTable对象 为图中的代码。表示当访问 /api/时,将自动转跳到8081端口

同时需要修改 build/dev-server.js 代码中。在前面加一层根目录来的‘/api’

json-server在vue模块化项目中的配置

这时可以访问 
localhost:8081/api/getNewList
取到数据 (8080也是一样的)

json-server在vue模块化项目中的配置

这时候就可以在组件代码中用 created钩子,vue-resource插件, 模拟请求数据,地址为 api/数据对象

json-server在vue模块化项目中的配置
this.newList 为data数据。 在html中循环渲染这个数据。更新页面

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复