Vue和Mock.js一起模拟登录和实现表格的增删改查

不言
Lepaskan: 2018-07-27 11:17:19
asal
2619 orang telah melayarinya

这篇文章给大家介绍的文章内容是关于Vue和Mock.js一起模拟登录和实现表格的增删改查,有很好的参考价值,希望可以帮助到有需要的朋友。

前言

关于mockjs,官网描述的是

1.前后端分离

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

3.数据类型丰富

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

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

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

第一步先安装mock.js
npm install mockjs --save-dev
Salin selepas log masuk
第二步使用 mock.js
import Mock from 'mockjs'
Salin selepas log masuk

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

详细请看官方文档

关键点1:Mock.mock()
Mock.mock( rurl?, rtype?, template|function( options ) )
Salin selepas log masuk

这里的参数都是可选:

  • rurl(可选)。

表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。

  • rtype(可选)。

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

  • template(可选)。

表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@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": "★"
})
Salin selepas log masuk

结果:

//星星数量为3
{
  "string": "★★★"
}
Salin selepas log masuk

栗子2:

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

结果

{
  "number": 8
}
Salin selepas log masuk

其他设置

//  设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留

Mock.setup({
  timeout: '300-600'
})
Salin selepas log masuk
模拟登录

//  模拟登录user/login接口,对应的函数是loginByUsername

Mock.mock(/\/user\/login/, 'post', loginByUsername)
Salin selepas log masuk

当调用登录接口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)   //模拟编辑用户信息接口
Salin selepas log masuk

就是返回条件查询后的集合假数据而已,假数据是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(&#39;@county(true)&#39;),
    &#39;age|18-60&#39;: 1,
    birth: Mock.Random.date(),
    sex: Mock.Random.integer(0, 1)
  }))
}
Salin selepas log masuk

我们再来看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
      }
    }
  }
Salin selepas log masuk

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

第三步在main.js里面引入刚刚我们写好的src/mock/index.js
import './mock' // simulation data 路径index.js可省略
Salin selepas log masuk

相关推荐:

vue.js下如何引入百度地图的jsApi?引入百度地图的jsApi的两种方法介绍

vue.js如何实现树形表格的封装?vue.js实现树形表格的方法

Atas ialah kandungan terperinci Vue和Mock.js一起模拟登录和实现表格的增删改查. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!