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

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

---

前言

在开发过程中,前端的开发工作往往会比较受限于后端.比如项目的很多功能需要借助后端的接口数据才能进行开发测试.以往是使用手写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功能将会重新写一篇文章进行完整详细的记录.