Mockjs入门级操作 && 案例操作(实现增删改查功能)

文章目录

• Mockjs入门级操作 && 案例操作(实现增删改查功能)
• 前言
• 一、关于mockjs？
• 二、mockjs引入步骤
• • 1.安装依赖
  • 2.新建mock/index.js
  • 3.在main.js中引入
• 三、mockjs的语法规范:
• • 1.数据模板定义
  • 2. 数据模板-生成规则
  • • 1).属性值是字符串String
    • 2) 属性值是数字Number
    • 3)属性值是布尔型 Boolean
    • 4) 属性值是对象 Object
    • 5) 属性值是数组 Array
    • 6) 属性值是数组 Function
  • 3.数据占位符定义
  • 4. 数据占位符-常用生成方法
  • • 1) 生成文本
    • 2)生成标题和句子
• 四. mockjs 定义请求
• • 1. 语法
  • 2.参数讲解
  • 3. 示例
• 总结

前言

在开发过程中,前端的开发工作往往会比较受限于后端.比如项目的很多功能需要借助后端的接口数据才能进行开发测试.以往是使用手写json数据或者让后端大佬写测试数据提供测试. 但是这种的效率相对都比较慢.
而mockjs能够很好的解决这一问题.模拟接口,随机生成数据, 使前端和后端的工作配合更加高效,且让前端攻城师独立于后端进行开发(项目demo练习时不再受限于没有数据)。

提示：以下是本篇文章正文内容，如有不当之处欢迎指正

一、关于mockjs？

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

• 根据数据模板生成模拟数据
• 模拟 Ajax 请求，生成并返回模拟数据
• 基于 HTML 模板生成模拟数据

二、mockjs引入步骤

1.安装依赖

代码如下（示例）：

npm install mockjs

2.新建mock/index.js

代码如下（示例）：

import Mock from "mockjs"

3.在main.js中引入

import './mock'

三、mockjs的语法规范:

Mock.js 的语法规范包括两部分：

1. 数据模板定义（Data Temaplte Definition，DTD）
2. 数据占位符定义（Data Placeholder Definition，DPD）

1.数据模板定义

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

// 属性名 name
// 生成规则 rule
// 属性值 value
‘name|rule’: value

2. 数据模板-生成规则

1. ‘name|min-max’: value
2. ‘name|count’: value
3. ‘name|min-max.dmin-dmax’: value
4. ‘name|min-max.dcount’: value
5. ‘name|count.dmin-dmax’: value
6. ‘name|count.dcount’: value
7. ‘name|+step’: value
   提示: 1.属性名和生成规则之间使用 | 分隔 2. 生成规则的含义需要依赖属性值才能确定 (下面案例解释)

1).属性值是字符串String

// "string|min-max":通过重复 'value' 生成一个字符串，重复次数大于等于 min，小于等于 max。const str = Mock.mock({  'string|1-5': '测试'})console.log(str, 'str')  //{string: "测试测试测试测试测试"}// 'name|count': 'value' 通过重复 'value' 生成一个字符串，重复次数等于 count。const str2 = Mock.mock({  'string|2': '测试'})console.log(str2, 'str2') // {string: "测试测试"}

2) 属性值是数字Number

/'name|+1': 100 属性值自动加 1，初始值为 100'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型。'name|1-100.1-10': 100 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。 */const number = Mock.mock({  'number1|+1': 100,  'number2|1-100': 100,  'number3|1-100.1-10': 100})console.log(number, 'number') //{number1: 100,number2: 99,number3: 100.748}

3)属性值是布尔型 Boolean

/'name|1': value 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。 */const boolean = Mock.mock({  'boolean1|1': true,  'boolean2|1-2': true})console.log(boolean, 'Boolean') // {boolean1: true , boolean2: false}  --具有随机性

4) 属性值是对象 Object

const obj = Mock.mock({  'obj1|3': {    1: '张三',    2: '李四',    3: '王五',    4: '赵六',    5: '匿名'  },  'obj2|1-5': {    1: '张三',    2: '李四',    3: '王五',    4: '赵六',    5: '匿名'  }})console.log(obj, 'obj')

5) 属性值是数组 Array

/'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值。'name|+1': [{}, {} ...] 从 属性值 [{}, {} ...] 中 按索引顺序+1选取1个元素 ,作为最终值'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 min，小于等于 max。'name|count': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数为 count。 */const array = Mock.mock({  'array1|1': ['AMD', 'CMD', 'UMD'],  'array2|+1': ['AMD', 'CMD', 'UMD'],  'array3|1-10': ['Mock.js'],  'array4|3': ['Mock.js']})console.log(array, 'array')

6) 属性值是数组 Function

/'name': function(){} 执行函数 function(){}，取其返回值作为最终的属性值，上下文为 'name' 所在的对象。 */const fun = Mock.mock({  foo: 'Syntax Demo',  name: function () {    return this.foo  },  gender: function () {    return '女'  }})console.log(fun, 'fun') //  {foo: "Syntax Demo",gender: "女",name: "Syntax Demo"}

3.数据占位符定义

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符 的格式为：
@占位符
@占位符(参数 [, 参数])

4. 数据占位符-常用生成方法

提示: 以下是使用占位符的注意事项:

1. 用 @ 来标识其后的字符串是 占位符。
2. 占位符 引用的是 Mock.Random 中的方法。
3. 通过Mock.Random.extend() 来扩展自定义占位符。
4. 占位符 也可以引用 数据模板 中的属性。
5. 占位符 会优先引用 数据模板中的属性

1) 生成文本

/ '@cword' : 生成一个随机字符串 '@cword(min,max)' : 生成指定长度和范围 */const word = Mock.mock({  string1: '@cword',  string2: '@cword(4)',  string3: '@cword(5,10)'})console.log(word, 'word')

2)生成标题和句子

/ * "@ctitle" : 生成随机标题 * "@csentence" : 生成随机句子 * ps : 后面都可以跟参数 (min,max) 同"@word" */const data = Mock.mock({  title: '@ctitle(8)',  sentence: '@csentence'})console.log(data, 'data')

以下案例和以上都是一样的用法,我就直接总结常用的占位符定义的方法啦

1. 生成段落 : @cparagraph()
2. 生成自增id : @increment
3. 生成姓名 : @cname()
4. 地址 : @city(true) ps: 参数为 true --生成的地址有省份
5. 身份证 : @id()
6. 随机生成图片 : @image（size?, background?, foreground?, format?, text? ）

size：图片大小
background ：图片背景色
foreground：图片前景色
format：图片格式
text：图片文字

7. 生成时间 : @Date

生成指定格式时间：@date(format)
@datetime( format )
@time(format)

8. 生成颜色 :

@color()
@rgb()
@rgba()
@hex()
@hsl()

四. mockjs 定义请求

1. 语法

Mock.mock( rurl?, rtype?, template|function(options) )

2.参数讲解

1. 参数 rurl：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如//domain/list.json/、’/domian/list.json’。
2. 参数 rtype：可选。表示需要拦截的 Ajax.请求类型。例如 GET、POST、PUT、DELETE 等。
3. 参数 template：可选。表示数据模板，可以是对象或字符串。
4. 参数 function(options)：可选。表示用于生成响应数据的函数。
5. 参数 options：指向本次请求的 Ajax 选项集。

3. 示例

mock/index.js :

const result = Mock.mock({  data: [    {      id: '@increment',      name: '@cname()',      address: '@city(true)'    }  ]})// 模拟一个不需要传参的 get 请求Mock.mock('mock/demo/test', 'get', () => {  return {    status: 200,    message: '数据获取成功',    data: result  }})

test.vue :

import axios from 'axios'export default {  created() {    axios.get('mock/demo/test').then((res) => {      console.log(res, 'res')    })  }}

总结

以上是我使用mockjs后的一些相关操作的总结与demo示例,如有不当欢迎指正.
多看文档,多写示例~
最后 关于如何使用mockjs实现列表的curd功能将会重新写一篇文章进行完整详细的记录.