数据Mock笔记

数据Mock相关教程参考:Vue项目入门教程6-数据mock

这里对这两种方法做一个简单的优化

备注:不管是使用vue还是react,数据Mock的方法是通用的

mockjs

自动获取并注册src/mock/目录下的js文件

  • src/目录下新建mock/目录

  • src/mock/目录下新建index.js文件

// 首先引入Mock const Mock = require('mockjs') // 设置拦截ajax请求的相应时间 Mock.setup({ timeout: '200-600' }) let configArray = [] // 使用webpack的require.context()遍历所有mock文件 const files = require.context('.', true, /\.js$/) files.keys().forEach((key) => { // index.js文件要排除 if (key === './index.js') return configArray = configArray.concat(files(key).default) }) // 注册所有的mock服务 configArray.forEach((item) => { for (const [path, target] of Object.entries(item)) { const protocol = path.split('|') Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target) } })
  • src/mock/目录下新建demoList.js文件测试
const demoList = [ { id: 1, name: 'zs', age: 23, job: '前端工程师' }, { id: 1, name: 'zs', age: 23, job: '前端工程师' } ] export default { // 可以这么直接返回 'get|/parameter/query': { code: 200, message: 'success', data: demoList }, // 也可以返回一个记录用于生成响应数据的函数。 // 当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。 'get|/parameter/query1': option => { // 可以在这个地方对数据进行一系列操作,例如增删改 // option 指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性 return { code: 200, message: 'success', data: demoList } }, // 也可以这么动态的生成 'get|/parameter/query2': { code: 200, message: 'success', data: { total: 100, 'rows|10': [{ id: '@guid', name: '@cname', 'age|20-30': 23, 'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'] }] } } }
  • 修改入口文件,比如vue-cli项目的src/main.js文件;create-react-app项目中的src/index.js文件
import './mock'
  • 在代码中使用ajax请求/parameter/query即可看到结果

koa

这里我们简单的把路由分离出来,封装一个处理返回值的中间件。

其他koa相关知识,参考:Koa笔记

  • mock/server/目录下新建responseFormatter.js文件
const responseFormatter = async ctx => { // 如果有返回值,将返回数据添加到data中 if (ctx.body) { ctx.body = { code: 200, msg: 'success', data: ctx.body } } } const urlFilter = pattern => { return async (ctx, next) => { const reg = new RegExp(pattern) // 先去执行路由 await next() // 通过正则的url进行格式化处理 if (reg.test(ctx.originalUrl)) { responseFormatter(ctx) } } } module.exports = urlFilter
  • 修改mock/server/index.js文件
const Koa = require('koa') const bodyparser = require('koa-bodyparser') const router = require('./router') const responseFormatter = require('./responseFormatter') const cors = require('koa2-cors') const app = new Koa() // 可以使用koa2-cors,也可以给devServer配置代理来跨域 // app.use(cors({ // origin: function (ctx) { // // if (ctx.url === '/test') { // // return "*"; // 允许来自所有域名请求 // // } // // return 'http://localhost'; // return '*' // // 这样就能只允许 http://localhost:8080 这个域名的请求了 // }, // exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'], // maxAge: 5, // credentials: true, // allowMethods: ['GET', 'POST', 'DELETE'], // allowHeaders: ['Content-Type', 'Authorization', 'Accept'], // })) // middleware app.use(bodyparser()) app.use(responseFormatter('^/api')) app.use(router.routes()).use(router.allowedMethods()) app.listen(3001)
  • mock/server/目录下新建router.js文件,用来存放各响应
const router = require('koa-router')() router.prefix('/api') // get请求 router.get('/vote/teams', async ctx => { const signature = ctx.query.signature const teams = [] for (let i = 0; i < 20; i++) { teams.push({ id: i + 1, name: 'xxx', icon: 'http://xxx/xxx.jpg', count: 1000, // 0 未投票 1 已投票 status: signature && i == 4 ? 1 : 0, }) } ctx.body = { teams: teams } }) // post请求 router.post('/vote/vote', async ctx => { const { id } = ctx.request.body ctx.body = { id } }) module.exports = router
  • 修改package.json文件,在scripts下添加命令:"mock": "nodemon --config nodemon --harmony ./mock/server.js"

  • nodemon.json配置介绍

{ // 重启的命令,默认是 rs "restartable": "rs", // 忽略的文件后缀名或者文件夹,文件路径的书写用相对于 nodemon.json 所在位置的相对路径 "ignore": ["./src/**"], // 表示输出详细启动与重启信息 "verbose": true, "execMap": { "": "node", "test": "gulp test" }, "events": { // 子进程(即监控的应用)启动 "start": "gulp", // 子进程崩溃,不会触发 exit "crash": "", // 子进程完全退出,不是非正常的崩溃 "exit": "", // 子进程重启 "restart": "gulp", }, // 监控指定后缀名的文件,用空格间隔。 // 默认监控的后缀文件:.js, .coffee, .litcoffee, .json。 // 但是对于没有文件后缀的文件,比如 www 文件,我暂时找不到怎么用 nodemon 去监控,就算在 watch 中包含了,nodemon 也会忽略掉 "ext": "js json", "watch": [ "./mock/**" ], "env": { // env:是开发环境; 运行环境 development; production 是生产环境 "NODE_ENV": "env", "PORT": "3000" }, // nodemon 使用 Chokidar 作为底层监控系统,但是如果监控失效,或者提示没有需要监控的文件时,就需要使用轮询模式(polling mode), // 即设置 legacy-watch 为 true,也可以在命令行中指定 "legacy-watch":false }

vue-cli4.x项目配置跨域方法参考:vue-cli2升级成vue-cli3 - 设置代理

create-react-app项目配置跨域方法参考:react-app-rewired使用 - proxy


创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: