1.与线上环境一致的接口地址，每次构建前端代码时不需要修改调用接口的代码
2.不同于使用mock直接拦截ajax请求，使用mock server能更好的模拟 POST、GET 请求（在控制台的Network选项页能看到真实的ajax请求信息）
3.mock 数据可以由工具生成不需要自己手动写，同时可以灵活的修改接口数据来适应开发
- 安装 koa-generator脚手架
npm install koa-generator -g
- 一键生成koa2项目
koa2 xxx
- 安装依赖
npm install
生成的koa2项目目录如下
xxx/
|
+——bin/
| |
| +—— www 程序入口
|
+——public/ 静态资源
| |
| +—— image/
| +—— javascripts/
| +—— stylesheets/
|
+——routes/ 路由配置
| |
| +—— index.js
| +—— users.js
|
+——views/ 页面模板引擎
| |
| +—— error.pug
| +—— index.pug
| +——
|
+——app.js 使用koa的js
|
+——package.json
bin/www 是入口文件，打开端口监听(默认3000)，启动koa服务
app.js 是使用koa的js，里面已经配置好了，解析http请求、使用静态资源、log埋点、使用路由等中间件。
- 安装mockjs
npm install mockjs --save
- 在routes中创建一个mockapi.js文件 (mockapi是名字，可以自己随便起)
const router = require('koa-router')()
const Mock = require('mockjs')
router.prefix('/mockapi') //路由路径
//ctx.params 路由传值
//ctx.query 参数传值
//ctx.request.body Post参数
//people
const mockPeople = Mock.mock({
'peoples|5000': [{
'id|+1': 1,
'guid': '@guid',
'name': '@cname',
'age': '@integer(20, 50)',
'birthday': '@date("MM-dd")',
'address': '@county(true)',
'email': '@email',
}]
});
router.get('/people', async (ctx, next) => {
ctx.body = ctx.query['id'] ? mockPeople['peoples'][ctx.query['id'] - 1] : mockPeople['peoples']
})
router.get('/people/:id', async (ctx, next) => {
ctx.body = mockPeople['peoples'][ctx.params['id'] - 1]
})
router.post('/people', async (ctx, next) => {
let postData = ctx.request.body
let id = postData.id ? postData.id : 1
ctx.body = mockPeople['peoples'][id - 1]
})
module.exports = router
- 在app.js里使用上面创建的路由
const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const index = require('./routes/index')
const users = require('./routes/users')
const mockapi = require('./routes/mockapi') //<--引用模块
// error handler
onerror(app)
// middlewares
app.use(bodyparser({
enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))
app.use(views(__dirname + '/views', {
extension: 'pug'
}))
// logger
app.use(async (ctx, next) => {
const start = new Date()
await next()
const ms = new Date() - start
console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
app.use(mockapi.routes(), mockapi.allowedMethods()) //<--配置路由
// error-handling
app.on('error', (err, ctx) => {
console.error('server error', err, ctx)
});
module.exports = app
完成上述步骤之后，你就成功搭建了一个mock server了。
使用npm start启动程序后，可以使用postman测试一下效果
虽然到上面mock server的搭建就结束了，但是你还可以做一些事情。 比如:
- 编写更多的mock数据接口，和一下常用接口
- 编写pug模板，让你的mock server有一个好看的首页
- 安装nodemon，使用nodemon启动mock server,使拥有热更新的能力
- 使用pm2将其部署到服务器上
我的mockApi：http://www.coolan.win:3333/mockapi
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent