前端在项目中使用mockjs模拟数据的增删改查

背景

在项目开发时，会存在前端界面已经画好了但是后端接口还在开发的情况，此时前端可以先根据接口文档明确自己需要的字段，然后使用mock模拟后端接口进行调试

安装

npm install mockjs

使用

1. 创建vue项目之后，新建一个mock文件夹，定义一个index.js文件

2. 引入mock依赖，使用setup方法设置请求响应的时间

// index.js

// 导入mockjs 返回一个对象
const Mock = require('mockjs')

// 使用setup配置请求的响应时间，单位是毫秒
Mock.setup({
  // timeout: 1000 // 意味着接口1s后返回
  timeout: '200-1000' // 意味这接口响应时间介于200毫秒-1s之间
})

1. Mock对象中有个mock方法生成响应的数据

// index.js
// 根据Mock.mock方法生成响应的数据
// Mock.mock( rurl请求的url, rtype请求的类型, template数据模板| function( options ) 生成响应数据的函数)
/*
    一般数据模板传递的对象：
    {
        "key|生成规则": 响应的数据
    }
    
    生成的规则
    m-n    生成m到n个
    +n     每生成一次 数值都+1
*/

// 普通的示例
// 请求list接口，返回1-10条之间的数据，返回的结构是{ code: 0, data: [{},{}...]}
Mock.mock('/list', 'get', {
  code: 0,
  ...{ 'data|1-10': [{}] }
})

1. 在main.js中 引入mock文件夹下的index文件

// main.js

...
import '@/mock/index'

1. 在需要使用接口的地方，用axios请求对应的接口地址即可获取数据

// Home.vue

async mounted () {
  const res = await axios.get('/list')
  console.log(res, 'resres')
}

打印出来的结果

常用的数据占位符

下面例举一些项目上常用的数据占位符，能快速随机生成数据结构

使用@string可以生成随机的字符串
@string(length) 可以输入数字指定长度
@string("lower|upper|number|symbol",length)  第一个参数可以指定是字母小写|大写|数字|符号，第二个参数可以输入数字指定长度
@string(min, max)  可以指定字符串的区间
eg：{ 'data|1-10': [{ 'id|+1': 1, name: '@string' }] }

使用@boolean可以生成随机的布尔值 true|false
eg：{ 'data|1-10': [{ 'id|+1': 1, sex: '@boolean' }] }

使用@integer随机生成一串数字
Random.integer( min, max )
eg：{ 'data|1-10': [{ 'id|+1': 1, count: '@integer(1, 20)' }] }

使用@date随机生成日期
@date("yyyy-MM-dd") "2022-11-28"
@date("yy-MM-dd")  22-11-28
eg：{ 'data|1-10': [{ 'id|+1': 1, date: '@date(yyyy-MM-dd)' }] }

使用@time随机生成时分秒
@time("HH:mm:ss") "00:15:29" 常用的是这个格式
eg：{ 'data|1-10': [{ 'id|+1': 1, time: '@time(HH:mm:ss)' }] }

使用@datetime 随机生成具体的日期至时分秒
@datetime("yyyy-MM-dd HH:mm:ss") "2018-11-29 09:25:16" 常用的是这个格式
eg：{ 'data|1-10': [{ 'id|+1': 1, time: '@datetime(yyyy-MM-dd HH:mm:ss)' }] }

使用@image 随机生成具体大小的图片
@image( size?, background?, foreground?, format?, text? )
可以指定图片的尺寸，底色，文案的颜色，图片的格式，图片上的文案展示
eg：{ 'data|1-10': [{ 'id|+1': 1, image: '@image' }] }
eg：{ 'data|1-10': [{ 'id|+1': 1, image: '@image(200x100, #50B347, #fff, hello)' }] }

使用@cparagraph 随机生成段落文案--中文
@cparagraph( min?, max? ) 可以指定生成多少句文案
eg：{ 'data|1-10': [{ 'id|+1': 1, cparagraph: '@cparagraph(2)' }] }

使用@ctitle 随机生成标题--中文
@ctitle( length ) 可以指定标题的长度
@ctitle( min, max ) 可以指定标题的长度的区间
eg：{ 'data|1-10': [{ 'id|+1': 1, title: '@ctitle(10)' }] }

使用@cname 随机生成姓名-中文
eg：{ 'data|1-10': [{ 'id|+1': 1, name: '@cname' }] }

使用@email 随机生成邮箱地址
eg：{ 'data|1-10': [{ 'id|+1': 1, email: '@email' }] }

使用@province 随机生成省份
eg：{ 'data|1-10': [{ 'id|+1': 1, province: '@province' }] }

使用@province 随机生成省份
使用@city 随机生成城市 @city(true) 则会把省份也显示出来
使用@county 随机生成地级  @county(true) 则会把省、市前缀显示出来
eg：{ 'data|1-10': [{ 'id|+1': 1, province: '@province' }] }
eg：{ 'data|1-10': [{ 'id|+1': 1, city: '@city' }] }
eg：{ 'data|1-10': [{ 'id|+1': 1, county: '@county' }] }

使用@pick 随机生成指定的范围数据
eg：{ 'data|1-10': [{ 'id|+1': 1, role: '@pick(["董事长", "总监", "经理", "组长"])' }] }

通过extend可以拓展mockjs的属性

随机生成手机号码

Mock.Random.extend({
  phone () {
    // 自己随便写前缀
    const phonePrefixs = ['135', '189', '136']
    // 使用pick 随机返回前缀
    return this.pick(phonePrefixs) + Mock.mock(/\d{8}/)
  }
})
console.log(Mock.Random.phone())

mockjs的综合使用-----增删改查

模拟获取列表数据 get

// mock/index.js

// 常用的表格数据结构
const list = Mock.mock({
  'data|10': [{ // 生成10条数据
    'id|+1': 1, // id会自增
    name: '@cname', // 随机生成姓名 --中文名
    sex: '@integer(0, 1)', // 性别一般是用数字表示 0男生 1女生
    phone: Mock.Random.phone(), // 拓展mockjs 生成随机的手机号码
    email: '@email', // 随机生成邮箱地址
    account: '@name', // 随机生成账号名 -- 英文
    status: '@boolean', // 随机生成布尔值 表示账户状态
    profile: '@image( 50x50, #FF6600, #fff, png, 头像 )', // 随机生成头像
    createTime: '@datetime(yyyy-MM-dd HH:mm:ss)', // 随机生成创建时间
    role: '@pick(["董事长", "总监", "经理", "组长"])' // 随机生成角色
  }]
})
Mock.mock('/list', 'get', {
  code: 0,
  ...list,
  total: 10
})

在需要获取列表的页面请求接口

async mounted () {
    const res = await axios.get('/list')
    console.log(res, '===>getList')
}

打印查询列表的数据结果

模拟根据id查询对应数据 get

// mock/index.js

// 使用响应数据的函数，含有 url、type 和 body 三个属性
// 根据url 获取参数
Mock.mock(/listById/, 'get', ({ url }) => {
  // 获取？后面的参数
  const query = url.split('?')[1]
  // 解析参数
  const queryStr = new URLSearchParams(query)
  const id = queryStr.get('id')
  return {
    code: 0,
    data: list.data.find(item => item.id === Number(id))
  }
})

在需要获取列表的页面请求接口

methods: {
  async getDetailById () {
      const res = await axios.get('listById', { params: { id: 1 } })
      console.log(res, '===>getDetailById')
    }
  }

打印查询的结果

模拟增加数据 post

// mock/index.js

// 如果是put ｜ post 的请求 参数是放在了body里面
Mock.mock(/addItem/, 'post', ({ body }) => {
  // 获取请求体的数据
  const { data } = JSON.parse(body)
  // 对一些必填的字段做校验
  const dataTips = {
    name: '名字不能为空',
    sex: '性别不能为空',
    phone: '手机号码不能为空',
    account: '账号不能为空'
  }
  for (const key of Object.keys(dataTips)) {
    if (!data[key]) {
      return { code: 500, message: dataTips[key] }
    }
  }
  return { code: 0, data: '操作成功' }
})

在需要增加数据的的页面请求接口

methods: {
    async addItem () {
        const params = {
            name: 'lily',
            sex: '女'
        }
        const res = await axios.post('/addItem', { data: params })
        console.log(res, '===>addItem')
    }
}

打印的结果

methods: {
    async addItem () {
        const params = {
            name: 'lily',
            sex: '女',
            phone: '15915888888',
            account: 'aaa.com'
        }
        const res = await axios.post('/addItem', { data: params })
        console.log(res, '===>addItem')
    }
}

模拟根据id删除对应数据 delete

// mock/index.js

Mock.mock(/removeById/, 'delete', ({ url }) => {
  // 获取？后面的参数
  const query = url.split('?')[1]
  // 解析参数
  const queryStr = new URLSearchParams(query)
  const id = queryStr.get('id')
  const index = list.data.findIndex(item => item.id === id)
  list.data.splice(index, 1)
  return {
    code: 0,
    data: '操作成功'
  }
})

在需要删除数据的页面请求接口

methods: {
    async removeItemlById () {
      const res = await axios.delete('/removeById', { params: { id: 1 } })
      console.log(res, '===>removeItemlById')
    }
  }

打印删除的结果

模拟根据id修改对应数据 put

// mock/index.js

// 如果是put ｜ post 的请求 参数是放在了body里面
Mock.mock(/updateById/, 'put', ({ body }) => {
  // 格式化body的参数
  const { data } = JSON.parse(body)
  // 找到对应的数据
  const target = list.data.find(item => item.id === data.id)
  if (!target) {
    return { code: 500, message: '查询有误' }
  }
  for (const key in data) {
    target[key] = data[key]
  }
  return { code: 0, data: target }
})

在需要修改数据的页面请求接口

methods: {
    async updatetemlById () {
      const res = await axios.put('/updateById', { data: { id: 1, name: '我是修改的名字', role: '我是修改的role', account: '我是修改的账号' } })
      console.log(res, '===>updatetemlById')
    }
  }

打印修改后的结果

~~~end~~~