使用mockjs模拟数据

相关介绍

在常见的前后端开发模式中，经常因为一些接口的问题导致工程效率低。作为前端开发者我们有时候可以使用mockjs来模拟后端的接口，只需要做到模拟就行，主要是用来检测我们的接口请求是否正常。

场景

比如我们做了一个后端管理系统，在页面初始创建时就需要向后端发送请求取获取数据库的信息，之后我们点击编辑或是删除时都会向后端发送请求，请求中包含我们点击的某一个用户的相关信息。
但是如果后端此时没有接口，我们又想测试前端发送的接口是否正常，这个时候就可以使用mockjs来模拟数据

代码示例

  // 使用 Mock 构建本地服务器输出数据结果
const Mock = require('mockjs')
const express = require('express')
const app = express()
//根据传入的参数 num，生成 num 条模拟的数据列表
function generatorList (current, limit) {
  return Mock.mock({
    [`rows|${limit}`]: [{
      // // 模拟 ID，自增方式追加
      // 'id|+1': 1,
      // // 模拟标题，中文字符串长度为 20 位到 30 位
      // title: "@ctitle(15,25)",
      // // 模拟图片索引，自然数从 0 到 15
      // image: "@natural(0,15)",
      // // 模拟访问人数，自然数从 0 到 99999
      // reads: "@natural(0,99999)",
      // // 模拟新闻来源，中文字符串长度为 3 到 10 位
      // from: "@ctitle(3,7)",
      // // 模拟发布时间，时间格式
      // date:"@date('yyyy-MM-dd')"

      // 我们这里模拟数据库返回的成员数据
      'id|+1': 1,
      name: '@cname',
	  // 角色类型，0代表管理员，1代表普通成员
      'role|0-1': 1,
      'sex|0-1': 1,
      'age|5-100': 1,
      'level|1-4': 1,
      hometown: '@province',
      'workTime|1-20': 1,
      address: '@county(true)',
      phone: /^1[34578]\d{9}$/,
      gmtCreate: '@date',


    }],
    total: 60,
    current: current,
    limit: limit
  })
}
//允许跨域请求返回数据
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
  res.header("Access-Control-Allow-Headers", "X-Requested-With")
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next()
})
//截取路由并反馈数据
app.post("/employee/findPage/:page/:limit", function (req, res) {
  // 获取 get 请求数据条数参数 num
  const { page, limit } = req.params
  console.log(page, limit)
  return res.send(generatorList(page, limit))
})
//设置端口并打印对应调用结果
const server = app.listen(4000, function () {
  console.log("本地mock服务启动，接口地址为：http://localhost:4000/employee/findPage/:page/:limit")
})