前端 mock 完美解决方案实战
程序员成长指北
共 21893字,需浏览 44分钟
·
2020-12-11 18:41
加入我们一起学习,天天进步
开发打包有不同配置 eslint 验证 代码风格统一 commit 规范验证 接口mock 热更新 异步组件
Mock功能介绍
mock功能和前端代码解耦 一个接口支持多种mock情况 无需依赖另外的后端服务和第三方库 能在network看到mock接口的请求且能区分 mock数据、接口配置和页面在同一个目录下 mock配置改变无需重启前端dev 生产打包可以把mock数据注入到打包的js中走前端mock 对于后端已有的接口也能快速把Response数据转化为mock数据
对于第8点在开发环境后端服务经常不稳定下,不依赖后端也能做页面开发,核心是能实现一键生成mock数据。
配置解耦
耦合情况
webpack-dev后端测试环境变了需要改git跟踪的代码 dev和build的时候 需要改git跟踪的代码 开发的时候想这个接口mock 需要改git跟踪的代码 mockUrl ,mock?
如何解决
├── config
│ ├── conf.json # git 不跟踪
│ ├── config.js # git 不跟踪
│ ├── config_default.js
│ ├── index.js
│ └── webpack.config.js
├── jsconfig.json
├── mock.json # git 不跟踪
// config/index.js
const _ = require("lodash");
let config = _.cloneDeep(require("./config_default"))
try {
const envConfig = require('./config') // eslint-disable-line
config = _.merge(config, envConfig);
} catch (e) {
//
}
module.exports = config;
// config/config_default.js
const pkg = require("../package.json");
module.exports = {
projectName: pkg.name,
version: pkg.version,
port: 8888,
proxy: {
"/render-server/api/*": {
target: `http://192.168.1.8:8888`,
changeOrigin: true, // 支持跨域请求
secure: true, // 支持 https
},
},
...
conf: {
dev: {
title: "前端模板",
pathPrefix: "/react-starter", // 统一前端路径前缀
apiPrefix: "/api/react-starter", //
debug: true,
delay: 500, // mock数据模拟延迟
mock: {
// "global.login": "success",
// "global.loginInfo": "success",
}
},
build: {
title: "前端模板",
pathPrefix: "/react-starter",
apiPrefix: "/api/react-starter",
debug: false,
mock: {}
}
}
};
// package.json{ "name": "react-starter", "version": "1.0.0", "description": "react前端开发脚手架", "main": "index.js", "scripts": { "start": "webpack-dev-server --config './config/webpack.config.js' --open --mode development", "build": "cross-env BUILD_ENV=VERSION webpack --config './config/webpack.config.js' --mode production --progress --display-modules && npm run tar", "build-mock": "node ./scripts/build-mock.js " }, ...}
// config/webpack.config.js
const config = require('.')
const env = process.env.BUILD_ENV ? 'build' : 'dev'
const confJson = env === 'build' ? config.conf.build : config.conf.dev
fs.writeFileSync(path.join(__dirname, './conf.json'), JSON.stringify(confGlobal, null, '\t'))
引用配置
// src/common/utils.jsx
import conf from '@/config/conf.json'
export const config = Object.assign(conf, window.conf)
import {config} from '@src/common/utils'
class App extends Component {
render() {
return (
)
}
}
ReactDOM.render(
, document.getElementById('root'),
)
Mock实现
效果
// src/pages/login/login-io.js
import {createIo} from '@src/io'
const apis = {
// 登录
login: {
method: 'POST',
url: '/auth/login',
},
// 登出
logout: {
method: 'POST',
url: '/auth/logout',
},
}
export default createIo(apis, 'login') // 对应login-mock.json
// src/pages/login/login-mock.json
{
"login": {
"failed": {
"success": false,
"code": "ERROR_PASS_ERROR",
"content": null,
"message": "账号或密码错误!"
},
"success": {
"success": true,
"code": 0,
"content": {
"name": "admin",
"nickname": "超级管理员",
"permission": 15
},
"message": ""
}
},
"logout": {
"success": {
"success": true,
"code": 0,
"content": null,
"message": ""
}
}
}
// config/conf.json
{
"title": "前端后台模板",
"pathPrefix": "/react-starter",
"apiPrefix": "/api/react-starter",
"debug": true,
"delay": 500,
"mock": {
"login.logout": "success"
}
}
思路
proxy: {
"/api/react-starter/*": {
target: `http://192.168.90.68:8888`,
changeOrigin: true,
secure: true,
// onError: (),
// onProxyRes,
// onProxyReq
},
},
option.onError 出现错误
option.onProxyRes 后端响应后
option.onProxyReq 请求转发前
option.onProxyReqWs
option.onOpen
option.onClose
onProxyReq
mock-key 来匹配mock文件如login-mock.json的内容, 如login
mock-method 来匹配对应文件内容的方法项 如logout
onProxyRes
├── api-cache # git 不跟踪
│ ├── login.login.json
│ └── login.logout.json
// api-cache/global.logout.json
{
"success": {
"date": "2020-11-17 05:32:17",
"method": "POST",
"path": "/render-server/api/logout",
"url": "/render-server/api/logout",
"resHeader": {
"content-type": "application/json; charset=utf-8",
...
},
"reqHeader": {
"host": "127.0.0.1:8888",
"mock-key": "login",
"mock-method": "logout"
...
},
"query": {},
"reqBody": {},
"resBody": {
"success": true,
"code": 0,
"content": null,
"message": ""
}
}
}
前端接口封装
使用
// src/pages/login/login-io.js
import {createIo} from '@src/io'
const apis = {
// 登录
login: {
method: 'POST',
url: '/auth/login',
},
// 登出
logout: {
method: 'POST',
url: '/auth/logout',
},
}
export default createIo(apis, 'login') // login注册到header的mock-key
// src/pages/login/login-store.js
import {observable, action, runInAction} from 'mobx'
import io from './login-io'
// import {config, log} from './utils'
export class LoginStore {
// 用户信息
@observable userInfo
// 登陆操作
@action.bound
async login(params) {
const {success, content} = await io.login(params)
if (!success) return
runInAction(() => {
this.userInfo = content
})
}
}
export default LoginStore
createIo 请求封装
// src/io/index.jsx
import {message, Modal} from 'antd'
import {config, log, history} from '@src/common/utils'
import {ERROR_CODE} from '@src/common/constant'
import creatRequest from '@src/common/request'
let mockData = {}
try {
// eslint-disable-next-line global-require, import/no-unresolved
mockData = require('@/mock.json')
} catch (e) {
log(e)
}
let reloginFlag = false
// 创建一个request
export const request = creatRequest({
// 自定义的请求头
headers: {'Content-Type': 'application/json'},
// 配置默认返回数据处理
action: (data) => {
// 统一处理未登录的弹框
if (data.success === false && data.code === ERROR_CODE.UN_LOGIN && !reloginFlag) {
reloginFlag = true
// TODO 这里可能统一跳转到 也可以是弹窗点击跳转
Modal.confirm({
title: '重新登录',
content: '',
onOk: () => {
// location.reload()
history.push(`${config.pathPrefix}/login?redirect=${window.location.pathname}${window.location.search}`)
reloginFlag = false
},
})
}
},
// 是否错误显示message
showError: true,
message,
// 是否以抛出异常的方式 默认false {success: boolean判断}
throwError: false,
// mock 数据请求的等待时间
delay: config.delay,
// 日志打印
log,
})
// 标识是否是简单传参数, 值为true标识复杂封装
export const rejectToData = Symbol('flag')
/**
* 创建请求IO的封装
* @param ioContent {any { url: string method?: string mock?: any apiPrefix?: string}}
}
* @param name mock数据的对应文件去除-mock.json后的
*/
export const createIo = (ioContent, name = '') => {
const content = {}
Object.keys(ioContent).forEach((key) => {
/**
* @param {baseURL?: string, rejectToData?: boolean, params?: {}, query?: {}, timeout?: number, action?(data: any): any, headers?: {}, body?: any, data?: any, mock?: any}
* @returns {message, content, code,success: boolean}
*/
content[key] = async (options = {}) => {
// 这里判断简单请求封装 rejectToData=true 表示复杂封装
if (!options[rejectToData]) {
options = {
data: options,
}
}
delete options[rejectToData]
if (
config.debug === false &&
name &&
config.mock &&
config.mock[`${name}.${key}`] &&
mockData[name] &&
mockData[name][key]
) { // 判断是否是生产打包 mock注入到代码中
ioContent[key].mock = JSON.parse(JSON.stringify(mockData[name][key][config.mock[`${name}.${key}`]]))
} else if (name && config.debug === true) { //注入 mock请求头
if (options.headers) {
options.headers['mock-key'] = name
options.headers['mock-method'] = key
} else {
options.headers = {'mock-key': name, 'mock-method': key}
}
}
const option = {...ioContent[key], ...options}
option.url = ((option.apiPrefix ? option.apiPrefix : config.apiPrefix) || '') + option.url
return request(option)
}
})
return content
}
request封装axios
import axios from 'axios'
// 配置接口参数
// declare interface Options {
// url: string
// baseURL?: string
// // 默认GET
// method?: Method
// // 标识是否注入到data参数
// rejectToData?: boolean
// // 是否直接弹出message 默认是
// showError?: boolean
// // 指定 回调操作 默认登录处理
// action?(data: any): any
// headers?: {
// [index: string]: string
// }
// timeout?: number
// // 指定路由参数
// params?: {
// [index: string]: string
// }
// // 指定url参数
// query?: any
// // 指定body 参数
// body?: any
// // 混合处理 Get到url, delete post 到body, 也替换路由参数 在createIo封装
// data?: any
// mock?: any
// }
// ajax 请求的统一封装
// TODO 1. 对jsonp请求的封装 2. 重复请求
/**
* 返回ajax 请求的统一封装
* @param Object option 请求配置
* @param {boolean} opts.showError 是否错误调用message的error方法
* @param {object} opts.message 包含 .error方法 showError true的时候调用
* @param {boolean} opts.throwError 是否出错抛出异常
* @param {function} opts.action 包含 自定义默认处理 比如未登录的处理
* @param {object} opts.headers 请求头默认content-type: application/json
* @param {number} opts.timeout 超时 默认60秒
* @param {number} opts.delay mock请求延迟
* @returns {function} {params, url, headers, query, data, mock} data混合处理 Get到url, delete post 到body, 也替换路由参数 在createIo封装
*/
export default function request(option = {}) {
return async (optionData) => {
const options = {
url: '',
method: 'GET',
showError: option.showError !== false,
timeout: option.timeout || 60 * 1000,
action: option.action,
...optionData,
headers: {'X-Requested-With': 'XMLHttpRequest', ...option.headers, ...optionData.headers},
}
// 简单请求处理
if (options.data) {
if (typeof options.data === 'object') {
Object.keys(options.data).forEach((key) => {
if (key[0] === ':' && options.data) {
options.url = options.url.replace(key, encodeURIComponent(options.data[key]))
delete options.data[key]
}
})
}
if ((options.method || '').toLowerCase() === 'get' || (options.method || '').toLowerCase() === 'head') {
options.query = Object.assign(options.data, options.query)
} else {
options.body = Object.assign(options.data, options.body)
}
}
// 路由参数处理
if (typeof options.params === 'object') {
Object.keys(options.params).forEach((key) => {
if (key[0] === ':' && options.params) {
options.url = options.url.replace(key, encodeURIComponent(options.params[key]))
}
})
}
// query 参数处理
if (options.query) {
const paramsArray = []
Object.keys(options.query).forEach((key) => {
if (options.query[key] !== undefined) {
paramsArray.push(`${key}=${encodeURIComponent(options.query[key])}`)
}
})
if (paramsArray.length > 0 && options.url.search(/\?/) === -1) {
options.url += `?${paramsArray.join('&')}`
} else if (paramsArray.length > 0) {
options.url += `&${paramsArray.join('&')}`
}
}
if (option.log) {
option.log('request options', options.method, options.url)
option.log(options)
}
if (options.headers['Content-Type'] === 'application/json' && options.body && typeof options.body !== 'string') {
options.body = JSON.stringify(options.body)
}
let retData = {success: false}
// mock 处理
if (options.mock) {
retData = await new Promise((resolve) =>
setTimeout(() => {
resolve(options.mock)
}, option.delay || 500),
)
} else {
try {
const opts = {
url: options.url,
baseURL: options.baseURL,
params: options.params,
method: options.method,
headers: options.headers,
data: options.body,
timeout: options.timeout,
}
const {data} = await axios(opts)
retData = data
} catch (err) {
retData.success = false
retData.message = err.message
if (err.response) {
retData.status = err.response.status
retData.content = err.response.data
retData.message = `浏览器请求非正常返回: 状态码 ${retData.status}`
}
}
}
// 自动处理错误消息
if (options.showError && retData.success === false && retData.message && option.message) {
option.message.error(retData.message)
}
// 处理Action
if (options.action) {
options.action(retData)
}
if (option.log && options.mock) {
option.log('request response:', JSON.stringify(retData))
}
if (option.throwError && !retData.success) {
const err = new Error(retData.message)
err.code = retData.code
err.content = retData.content
err.status = retData.status
throw err
}
return retData
}
}
一键生成mock
# "build-mock": "node ./scripts/build-mock.js"
# 所有:
npm run build-mock mockAll
# 单个mock文件:
npm run build-mock login
# 单个mock接口:
npm run build-mock login.logout
# 复杂
npm run build-mock login.logout user
mock.json文件生成
根据配置动态生成mock.json的内容 监听config文件夹 判断关于mock的配置项是否有改变重新生成mock.json
// scripts/webpack-init.js 在wenpack配置文件中初始化
const path = require('path')
const fs = require('fs')
const {syncWalkDir} = require('./util')
let confGlobal = {}
let mockJsonData = {}
exports.getConf = () => confGlobal
exports.getMockJson =() => mockJsonData
/**
* 初始化项目的配置 动态生成mock.json和config/conf.json
* @param {string} env dev|build
*/
exports.init = (env = process.env.BUILD_ENV ? 'build' : 'dev') => {
delete require.cache[require.resolve('../config')]
const config = require('../config')
const confJson = env === 'build' ? config.conf.build : config.conf.dev
confGlobal = confJson
// 1.根据环境变量来生成
fs.writeFileSync(path.join(__dirname, '../config/conf.json'), JSON.stringify(confGlobal, null, '\t'))
buildMock(confJson)
}
// 生成mock文件数据
const buildMock = (conf) => {
// 2.动态生成mock数据 读取src文件夹下面所有以 -mock.json结尾的文件 存储到io/index.json文件当中
let mockJson = {}
const mockFiles = syncWalkDir(path.join(__dirname, '../src'), (file) => /-mock.json$/.test(file))
console.log('build mocks: ->>>>>>>>>>>>>>>>>>>>>>>')
mockFiles.forEach((filePath) => {
const p = path.parse(filePath)
const mockKey = p.name.substr(0, p.name.length - 5)
console.log(mockKey, filePath)
if (mockJson[mockKey]) {
console.error(`有相同的mock文件名称${p.name} 存在`, filePath)
}
delete require.cache[require.resolve(filePath)]
mockJson[mockKey] = require(filePath)
})
// 如果是打包环境, 最小化mock资源数据
const mockMap = conf.mock || {}
const buildMockJson = {}
Object.keys(mockMap).forEach((key) => {
const [name, method] = key.split('.')
if (mockJson[name][method] && mockJson[name][method][mockMap[key]]) {
if (!buildMockJson[name]) buildMockJson[name] = {}
if (!buildMockJson[name][method]) buildMockJson[name][method] = {}
buildMockJson[name][method][mockMap[key]] = mockJson[name][method][mockMap[key]]
}
})
mockJsonData = buildMockJson
fs.writeFileSync(path.join(__dirname, '../mock.json'), JSON.stringify(buildMockJson, null, '\t'))
}
// 监听配置文件目录下的config.js和config_default.js
const confPath = path.join(__dirname, '../config')
if ((env = process.env.BUILD_ENV ? 'build' : 'dev') === 'dev') {
fs.watch(confPath, async (event, filename) => {
if (filename === 'config.js' || filename === 'config_default.js') {
delete require.cache[path.join(confPath, filename)]
delete require.cache[require.resolve('../config')]
const config = require('../config')
// console.log('config', JSON.stringify(config))
const env = process.env.BUILD_ENV ? 'build' : 'dev'
const confJson = env === 'build' ? config.conf.build : config.conf.dev
if (JSON.stringify(confJson) !== JSON.stringify(confGlobal)) {
this.init()
}
}
});
}
接口代理处理
onProxyReq和onProxyRes
// scripts/api-proxy-cache
const fs = require('fs')
const path = require('path')
const moment = require('moment')
const {getConf, getMockJson} = require('./webpack-init')
const API_CACHE_DIR = path.join(__dirname, '../api-cache')
const {jsonParse, getBody} = require('./util')
fs.mkdirSync(API_CACHE_DIR,{recursive: true})
module.exports = {
// 代理前处理
onProxyReq: async (_, req, res) => {
req.reqBody = await getBody(req)
const {'mock-method': mockMethod, 'mock-key': mockKey} = req.headers
// eslint-disable-next-line no-console
console.log(`Ajax 请求: ${mockKey}.${mockMethod}`,req.method, req.url)
// eslint-disable-next-line no-console
req.reqBody && console.log(JSON.stringify(req.reqBody, null, '\t'))
if (mockKey && mockMethod) {
req.mockKey = mockKey
req.mockMethod = mockMethod
const conf = getConf()
const mockJson = getMockJson()
if (conf.mock && conf.mock[`${mockKey}.${mockMethod}`] && mockJson[mockKey] && mockJson[mockKey][mockMethod]) {
// eslint-disable-next-line no-console
console.log(`use mock data ${mockKey}.${mockMethod}:`, conf.mock[`${mockKey}.${mockMethod}`], 'color: green')
res.mock = true
res.append('isMock','yes')
res.send(mockJson[mockKey][mockMethod][conf.mock[`${mockKey}.${mockMethod}`]])
}
}
},
// 响应缓存接口
onProxyRes: async (res, req) => {
const {method, url, query, path: reqPath, mockKey, mockMethod} = req
if (mockKey && mockMethod && res.statusCode === 200) {
let resBody = await getBody(res)
resBody = jsonParse(resBody)
const filePath = path.join(API_CACHE_DIR, `${mockKey}.${mockMethod}.json`)
let data = {}
if (fs.existsSync(filePath)) {
data = jsonParse(fs.readFileSync(filePath).toString())
}
const cacheObj = {
date: moment().format('YYYY-MM-DD hh:mm:ss'),
method,
path: reqPath,
url,
resHeader: res.headers,
reqHeader: req.headers,
query,
reqBody: await jsonParse(req.reqBody),
resBody: resBody
}
if (resBody.success === false) {
data.failed = cacheObj
} else {
data.success = cacheObj
}
// eslint-disable-next-line no-console
fs.writeFile(filePath, JSON.stringify(data,'', '\t'), (err) => { err && console.log('writeFile', err)})
}
},
// 后端服务没启的异常处理
onError(err, req, res) {
setTimeout(() => {
if (!res.mock) {
res.writeHead(500, {
'Content-Type': 'text/plain',
});
res.end('Something went wrong. And we are reporting a custom error message.');
}
}, 10)
}
}
webpack配置
const config = require('.')
// config/webpack.config.js
const {init} = require('../scripts/webpack-init');
init();
// 接口请求本地缓存
const apiProxyCache = require('../scripts/api-proxy-cache')
for(let key in config.proxy) {
config.proxy[key] = Object.assign(config.proxy[key], apiProxyCache);
}
const webpackConf = {
devServer: {
contentBase: path.join(__dirname, '..'), // 本地服务器所加载的页面所在的目录
inline: true,
port: config.port,
publicPath: '/',
historyApiFallback: {
disableDotRule: true,
// 指明哪些路径映射到哪个html
rewrites: config.rewrites,
},
host: '127.0.0.1',
hot: true,
proxy: config.proxy,
},
}
总结
一键部署 npm run deploy 支持集群部署配置 是一个文件服务 是一个静态资源服务 在线可视化部署前端项目 配置热更新 在线Postman及接口文档 支持前端路由渲染, 支持模板 接口代理及路径替换 Web安全支持 Ajax请求验证,Referer 校验 支持插件开发和在线配置 可实现:前端模板参数注入、请求头注入、IP白名单、接口mock、会话、第三方登陆等等
❤️爱心三连击 1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。
2.关注公众号
程序员成长指北
,回复「1」加入Node进阶交流群!「在这里有好多 Node 开发者,会讨论 Node 知识,互相学习」!3.也可添加微信【ikoala520】,一起成长。
“在看转发”是最大的支持
评论