一、背景
mock数据在前端需求前期开发的中，发挥着重要的角色。是前后台同时开发，必不可缺少的环节。市面上也有很多第三方的mock数据的库，功能很多，库也大，接入复杂。所以可以使用node搭建一个简便的生成mock的服务器。（还有一种是直接使用接口管理工具提供的mock servers,比如YAPI,APIFOX，这种方式是比较推荐的。）
二、使用的技术
node koa koa-router koa-cors koa-badyparser koa-static
三、核心代码
const Koa = require('koa')
const app = new Koa()
const KoaRouter = require('koa-router')
const router = new KoaRouter()
const cors = require('koa2-cors')
const bodyparser = require('koa-bodyparser')
const staticKoa = require('koa-static') // 处理静态资源
// 静态文件处理
function staticPath(path){
app.use(staticKoa(path))
}
app.use(bodyparser())
// 跨域
app.use(cors({
origin: function(ctx) {
// 这里用 headers 和 header 属性皆可
return ctx.header.origin
}
}))
app.use(router.routes()) // 启动路由
app.use(router.allowedMethods())
app.listen(9000, console.log('application is start at port 9000'))
module.exports = {
router,
app,
staticPath
}
四、使用方式
安装
npm i ff-koa
导入
import myKoa from 'ff-koa/lib/mock.js'
const router = myKoa.router
mock数据返回示例
const users = {
'superadmin-token': {
permission: [1],
introduction: 'I am a super admin',
name: '超级管理员'
},
'admin-token': {
permission: [2],
introduction: 'I am an admin',
name: '管理员'
},
}
router.post('/user/login', ctx => {
const { username } = ctx.request.body
const token = tokens[username]
ctx.body = fhcode(token)
})
五、其他
import myKoa from 'ff-koa/lib/mock.js'
myKoa.staticPath('../dist')
myKoa.staticPath('../dist')是启动打包文件的。
使用场景：
测试线上打包文件是否正常，有以下几种方式：
1、将打包dist文件使用nginx发布服务
2、使用browser-sync运行文件
npm install -g browser-sync
// 终端运行
browser-sync start --server --files "*.css, *.html , *.js" --reload-delay 800 -no-ghost-mode --open external --host= I P
3、使用mock数据，启动mock服务，配置打包文件路径’../dist‘，运行127.0.0.1:9000 即可运行打包文件。
9000端口可自定义，定义方式：
import myKoa from 'ff-koa/lib/mock.js'
const app = myKoa. app
app.listen(9001)
说明：mock服务只需要根据业务需求选择合适的mock数据方式。并不局限于某一种。其目的就是为了提高开发的效率，能解决前后端同时开发的问题。
相关技术NPM包：
自动路由
接口模拟请求mock数据
vue脚手架
