一勤家、背景
mock數(shù)據(jù)在前端需求前期開(kāi)發(fā)的中腹尖,發(fā)揮著重要的角色。是前后臺(tái)同時(shí)開(kāi)發(fā)伐脖,必不可缺少的環(huán)節(jié)热幔。市面上也有很多第三方的mock數(shù)據(jù)的庫(kù),功能很多讼庇,庫(kù)也大绎巨,接入復(fù)雜。所以可以使用node搭建一個(gè)簡(jiǎn)便的生成mock的服務(wù)器蠕啄。(還有一種是直接使用接口管理工具提供的mock servers,比如YAPI,APIFOX场勤,這種方式是比較推薦的。)
二歼跟、使用的技術(shù)
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') // 處理靜態(tài)資源
// 靜態(tài)文件處理
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()) // 啟動(dòng)路由
app.use(router.allowedMethods())
app.listen(9000, console.log('application is start at port 9000'))
module.exports = {
router,
app,
staticPath
}
四、使用方式
安裝
npm i ff-koa
導(dǎo)入
import myKoa from 'ff-koa/lib/mock.js'
const router = myKoa.router
mock數(shù)據(jù)返回示例
const users = {
'superadmin-token': {
permission: [1],
introduction: 'I am a super admin',
name: '超級(jí)管理員'
},
'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')是啟動(dòng)打包文件的留瞳。
使用場(chǎng)景:
測(cè)試線上打包文件是否正常,有以下幾種方式:
1骚秦、將打包dist文件使用nginx發(fā)布服務(wù)
2她倘、使用browser-sync運(yùn)行文件
npm install -g browser-sync
// 終端運(yùn)行
browser-sync start --server --files "*.css, *.html , *.js" --reload-delay 800 -no-ghost-mode --open external --host= I P
3璧微、使用mock數(shù)據(jù),啟動(dòng)mock服務(wù)硬梁,配置打包文件路徑’../dist‘往毡,運(yùn)行127.0.0.1:9000 即可運(yùn)行打包文件。
9000端口可自定義靶溜,定義方式:
import myKoa from 'ff-koa/lib/mock.js'
const app = myKoa. app
app.listen(9001)
說(shuō)明:mock服務(wù)只需要根據(jù)業(yè)務(wù)需求選擇合適的mock數(shù)據(jù)方式。并不局限于某一種懒震。其目的就是為了提高開(kāi)發(fā)的效率罩息,能解決前后端同時(shí)開(kāi)發(fā)的問(wèn)題。
相關(guān)技術(shù)NPM包:
自動(dòng)路由
接口模擬請(qǐng)求mock數(shù)據(jù)
vue腳手架