有三类人不适合此篇文章: '喜欢站在道德制高点的圣母婊' -- 适合去教堂 '无理取闹的键盘侠' -- 国际新闻版块欢迎你去 '有一定基础但又喜欢逼逼的人' 得得得, 老子知道你厉害了, 你好牛逼, 这些问题那么简单, 都是小白看的 这种傻瓜文, 简直浪费老子的时间! 对于以上三类人, 走吧, 这里不是你来装逼的地方. ..

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

本贴最后更新于 395 天前,其中的信息可能已经时异事殊

有三类人不适合此篇文章:

对于以上三类人, 走吧, 这里不是你来装逼的地方.
你们也不值得看老子花那么多时间去汇总的水文.

前言

关于 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?, rtype?, template|function( options ) )

这里的参数都是可选:

关键点 2:模板生成语法:

举个栗子:
栗子 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 学习大佬群 493671066,美女多多。老司机快上车,来不及解释了。

溜了溜了


作者相关 Vue 文章

基于 Vue2.0 实现后台系统权限控制

前端文档汇总

VUE2.0 增删改查附编辑添加 model(弹框) 组件共用

打赏 衷心的表示感谢

打赏

打赏 1 积分后可见  
1 积分
  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    132 引用 • 545 回帖 • 653 关注
  • Mock.js
    1 引用
  • CRUD
    1 引用
回帖   
请输入回帖内容...