介绍
使用没有dev-server.js模板模拟接口返回数据
isMock开关切换mock数据和后端接口
使用mock.js生成数据
接口定义 method和url,快速响应后端变动
不需要改动项目代码
mock数据来源
- 本地*.json
- mock.js 随机数据
用到的依赖
npm install mockjs --save-dev //写入dev依赖中
axios 介绍看这
npm install axios --save //写入prod依赖
说明
借助axios 的baseURL 切换生产环境、开发环境和mock接口
修改的文件
- webopack.dev.con.js
12 const mockApi = require('../mock/mock-config')
···
47 before(app){ //在devServer中添加
48 mockApi(app)
49 }
- 新建mock文件夹
- mock.json 是本地假数据
- mock-config.js 接口返回数据的配置
- 新建src/api文件夹
- api.js 定义接口 method url
- config.js 配置axios
- 调用接口 在src/components/HelloWorld
- 渲染完成调用 api/seller get 本地json
- api/goods按钮 get 本地json
- api/ratings按钮 post 本地json
- api/list 按钮 get mock.js随机数据
Build Setup
# install dependencies
npm install or yarn
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build:prod
# build for buildtest with minification
npm run build:test