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后端云