使用webpack-dev-server创建mock server
项目地址:https://github.com/yuanyuansh...
在开发基于 api 交互、前后端分离的网页应用时,经常会遇到几个问题:
- 前端页面已经编排好了,但是后台接口还没准备好
- 我们希望服务器返回特定类型的数据,以测试某页面在特定条件下是否存在问题,但作为前端我们一般不会接触到后端代码和数据库,每次都找后端添加模拟数据又很麻烦。
为解决这两个问题,最简单的解决办法就是搭建一个 mock server,专门返回需要的模拟数据。
webpack-dev-server 是我们开发 vue、react 时必备的工具,既然是一个服务器,那么我们是不是可以让他实现一个 mock server 的功能。
原理:通过 webpack-dev-server 的 before 钩子,可以在 webpack-dev-server 上添加我们需要的 mock server 功能,而不需要另行搭建服务器。
只需要少许修改就能 webpack-dev-server 当做 mock server 来用,并且对同一 URL 下的 GET、POST、PATCH 等不同的 HTTP METHOD 做分别处理,支持热切换。
使用方法很简单,在 webpack.dev.conf.js 的 devServer 中添加新钩子 before,将所有请求交由 apiMocker 处理,然后当需要使用模拟数据时,只需要将请求的 URL 改为 webpack 服务器上既可。项目地址webpack_api_mocker
安装
npm install mocker-api --save-dev
使用
package.json中配置
"dev-mock": "cross-env MOCK=true webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
webpack.dev.conf.js中配置
devServer: { before (app) { if (process.env.MOCK) { apiMocker(app, path.resolve('mock/mocker'), { proxy: apiDomainMap, changeHost: true }) } } }
apiDomainMap.js配置
let urls = { 'https://api.github.com': ['/search/repositories*', '/use/repositories*'] }
mocker.js 配置
const proxy = { 'GET /api/user': { id: 1, username: 'kenny', sex: 60 }, 'GET /api/user/list': [ { id: 1, username: 'kenny', sex: 6 }, { id: 2, username: 'kenny', sex: 6 } ], 'GET /api/common/list': [ { id: 1, console: '光远接口啥时候好' }, { id: 2, console: '光远接口好了么' }, { id: 2, console: '赛迪工单能通' }, { id: 2, console: '赛迪工单能调么' } ] } module.exports = proxy
相关推荐
snowphy 2020-08-19
hwm 2020-06-14
free0day 2020-06-14
beibeijia 2020-06-07
84224552 2020-05-31
droidpioneer的IT 2020-05-20
85344193 2020-05-17
beibeijia 2020-05-16
Teamomc 2020-02-21
jxiao000 2020-02-20
MrHaoNan 2020-02-20
nimeijian 2020-02-15
Safari浏览器 2020-01-12
maicowxp 2019-12-29
TimeSky 2020-01-11
80487608 2014-07-04
aNian 2019-12-26
SDUTACM 2019-12-19