2019-10-22 前端使用Mock模拟请求后端数据增删改查

为什么需要使用mock ？

作为一个从事前端工作的程序员与后端对接时，经常会遇到临近项目上线时才会收到后端人员的接口信息。大多数人很难在短的时间内完成渲染和调试。这时我们就需要在本地模拟后端接口用来测试前端效果这种做法称之为构建前端Mock。

方案1.使用mockjs进行Mock

安装：
npm install mockjs --save-dev
关于Mock的API使用介绍和官方文档请移步这里

在项目src目录中创建一个 mock.js文件
在main.js入口文件中引入刚刚创建的mock 文件
import './mock.js'

创建模拟数据
在 mock.js中创建一条用户信息模拟数据

import Mock from 'mockjs'

const Random = Mock.Random
// 设置全局延时，没有延时的话，有时候会检测不到数据变化
Mock.setup({
  timeout: '300-600'
})
// 创建一个数组用来接收模拟的数据
const mocklist = []
const count = 5;

for (let i = 0; i < count; i++) {
  mocklist.push(Mock.mock({
    id: '@id',
    name: '@cname',
    'phone|1': /^1[0-9]{10}$/,
    email: '@email',
    'education|1': ['本科', '大专', '硕士', '博士', '中专'],
    'graduationschool|1': ['西南财经', '北京交通大学', '重庆工商大学', '清华大学', '西南大学', '上海复旦大学'],
    'profession|1': ['教授', '律师', '医生', '公务员', '大学老师', '警察', '白领'],
    profile: '@cparagraph'
  }))
}

接下来进一步实现增删改查的各个数据接口，这里我的需求是，只使用一次模拟数据，后面使用 localStorage 来进行存储数据。

// 获取用户信息列表
function getList() {
  // 若 localStorage 没有数据，则将 Mock 的数据存入
  if (!localStorage.getItem('userlist')) {
    localStorage.setItem('userlist',JSON.stringify(mocklist))
  }
  // 每次获取数据时，再从 localStorage 中拉取数据
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  return userlist
}

// 获取单个用户信息
function getUser(options) {
  // 先从 localStorage 中拉取数据
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  // 遍历数组，返回id 与传来 id 相当的一个对象
  for( let index in userlist) {
    if (userlist[index].id === options.body) {
      var user = userlist[index]
      return user
    }
  }
}

// 删除用户信息
function deleteUser(options) {
  // 先从 localStorage 中拉取数据
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  // 根据传递的 id 删除 用户
  for( let index in userlist ) {
    if (userlist[index].id === options.body) {
      userlist.splice(index,1)
      localStorage.setItem('userlist', JSON.stringify(userlist))
    }
  }
  return {
    data: '用户删除成功'
  }
}

// 添加用户信息
function addUser(options) {
  // 先从 localStorage 中拉取数据
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  // 获取传入用户信息对象，是一个字符串，需要转化为对象
  var user = JSON.parse(options.body)
  // 使用 mock 随机生成一个 id
  user.id = Random.id()
  // 将 user 插入到 userlist 中
  userlist.unshift(user)
  // 重新将 userlist 存入 localStorage 中
  localStorage.setItem('userlist', JSON.stringify(userlist))
  return {
    data: '用户添加成功'
  }
}

// 更新用户信息
function updateUser(options) {
  // 先从 localStorage 中拉取数据
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  var user = JSON.parse(options.body)
  // 遍历 userlist 根据传入对象的 id 更新用户信息
  for ( let index in userlist ) {

    if ( userlist[index].id === user.id ) {
      userlist[index] = user
    }
  }
  localStorage.setItem('userlist', JSON.stringify(userlist))
  return {
    data: '用户更新成功'
  }
}

// 制作各个接口
Mock.mock('/getlist', 'get', getList)
Mock.mock('/getuser', 'post', getUser)
Mock.mock('/deleteuser', 'post', deleteUser)
Mock.mock('/adduser', 'post', addUser)
Mock.mock('/updateuser', 'post', updateUser)

// 最后将 Mock 导出
export default Mock

这样在需要的组件里就可以使用相应的接口了

案例预览
在线效果预览

方案2.使用json-server进行Mock

json-server的基本使用

1.首先我们要进行安装

window+R 输入cmd
安装：
npm install json-server --save-dev

2.准备一个json文件（data.json）

运行 json-server data.json
切记一定要开启
这里有个webpack设置技巧，不用每次运行项目都来开启
1，同时启动端口监视与应用，需在package.json 里面做的更改：

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "mock": "json-server --watch mock/db.json --m mock/post-to-get.js",
    "mockdev": "npm run mock | npm run dev"
  }

这样，在启动webpack时写npm run mockdev就可以同时启动了。
2，在使用post方法时，需要像数据库那样得到返回，而不是更改。这时候需要额外添加一个中间件在mock文件夹里，比如post-to-get.js,写法如下：

module.exports = function (req, res, next) {
  req.method = "GET";
  next();
}

然后在package.json里面启动中间件就可以了："mock": "json-server --watch mock/db.json --m mock/post-to-get.js"

项目结构如图：

然后我们就可以愉快的使用了（请求方式我们暂用）
1.添加数据

2.删除数据

3.修改数据

4.查找数据

5.模糊查询

这时data中的json数据就会随着你的操作发生改变

方案3.使用一些提供Mock服务的第三方

例如：
easy-mock
阿里的RAP 开源接口管理工具RAP第二代 http://rap2.taobao.org
bmob后端云