一、背景

mock數(shù)據(jù)在前端需求前期開發(fā)的中，發(fā)揮著重要的角色。是前后臺(tái)同時(shí)開發(fā)，必不可缺少的環(huán)節(jié)。市面上也有很多第三方的mock數(shù)據(jù)的庫，功能很多，庫也大，接入復(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)

說明：mock服務(wù)只需要根據(jù)業(yè)務(wù)需求選擇合適的mock數(shù)據(jù)方式。并不局限于某一種。其目的就是為了提高開發(fā)的效率，能解決前后端同時(shí)開發(fā)的問題。

相關(guān)技術(shù)NPM包：
自動(dòng)路由
接口模擬請(qǐng)求mock數(shù)據(jù)
vue腳手架