数据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
}