当前位置:首页 >> 网络编程

Vue+Mock.js模拟登录和表格的增删改查功能

前言

关于mockjs,官网描述的是

1.前后端分离

2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

3.数据类型丰富

4.通过随机数据,模拟各种场景。

5 项目不背锅(等后端给接口的话可能会背锅)

等等优点,最后一条我加的。

第一步先安装mock.js

npm install mockjs --save-dev

第二步使用 mock.js

import Mock from 'mockjs'

哪里用就在哪里引入。我是在项目src/mock/index.js里面使用mock.js

详细请看官方文档

关键点1:Mock.mock()

Mock.mock( rurl"mailto:'@EMAIL'" rel="external nofollow" >'@EMAIL'。
  
  • function(options)(可选)。
  • 表示用于生成响应数据的函数。
  • options:指向本次请求的 Ajax 选项集。
  • 关键点2:模板生成语法:

    数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

    // 属性名 name
    // 生成规则 rule
    // 属性值 value
    'name|rule': value
    属性名 和 生成规则 之间用竖线 | 分隔。
    生成规则 是可选的。
    生成规则 有 7 种格式:
    'name|min-max': value
    'name|count': value
    'name|min-max.dmin-dmax': value
    'name|min-max.dcount': value
    'name|count.dmin-dmax': value
    'name|count.dcount': value
    'name|+step': value`

    生成规则 的 含义 需要依赖 属性值的类型 才能确定。

    属性值 中可以含有 @占位符。

    属性值 还指定了最终值的初始值和类型。

    举个栗子:

    栗子1:

    //string表示属性名
    //3表示后面属性值重复次数
     Mock.mock({
     "string|3": "★"
    })

    结果:

    //星星数量为3
    {
      "string": "★★★"
    }

    栗子2:

    // num为属性名
    // 生成一个大于等于1,小于等于100 的整数,属性值100只是用来确定类型
    Mock.mock({
     "num|1-100": 100
    })

    结果

    {
      "number": 8
    }

    其他设置

    // 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
    Mock.setup({
     timeout: '300-600'
    })

    模拟登录

    // 模拟登录user/login接口,对应的函数是loginByUsername
    Mock.mock(/\/user\/login/, 'post', loginByUsername)

    当调用登录接口user/loign时候会自动对应到loginByUsername这个函数执行这个函数,

    这个函数会返回是否登录成功数据。返回成功的数据,就是登录成功了,否则相反。

    mock模拟登录ok

    接下来介绍模拟表格增删改查。

    其实也是差不多的

    // 用户相关
    Mock.mock(/\/user\/listpage/, 'get', getUserList) //模拟分页查询用户信息接口
    Mock.mock(/\/user\/remove/, 'get', deleteUser)  //模拟删除用户信息接口
    Mock.mock(/\/user\/add/, 'get', createUser)   //模拟添加用户信息接口
    Mock.mock(/\/user\/edit/, 'get', updateUser)  //模拟编辑用户信息接口

    就是返回条件查询后的集合假数据而已,假数据是mock.js模拟的。

    先循环添加60个假用户

    let List = []
    const count = 60
    for (let i = 0; i < count; i++) {
     List.push(Mock.mock({
      id: Mock.Random.guid(),
      name: Mock.Random.cname(),
      addr: Mock.mock('@county(true)'),
      'age|18-60': 1,
      birth: Mock.Random.date(),
      sex: Mock.Random.integer(0, 1)
     }))
    }

    我们再来看getUserList这个函数,就是返回分页条件查询的假数据。

    getUserList: config => {
      const { name, page = 1, limit = 20 } = param2Obj(config.url)
      const mockList = List.filter(user => {
       if (name && user.name.indexOf(name) === -1) return false
       return true
      })
      const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
      return {
       code: 0,
       data: {
        total: mockList.length,
        users: pageList
       }
      }
     }

    关于增加,删除和修改都只需要返回一个数据message="操作成功"即可。

    第三步在main.js里面引入刚刚我们写好的src/mock/index.js

    import './mock' // simulation data 路径index.js可省略

    至此整合完毕 源码地址

    总结

    以上所述是小编给大家介绍的Vue+Mock.js模拟登录和表格的增删改查功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!