什么是Mockjs

MockJs

 Mock.mock({'data1|1-4':})

语法规范

  • 属性值是字符串 String

    • ‘data1|1-4’: ‘一二三’, //随机重复1-4次
    • ‘data2|3’: ‘好帅’, //固定重置3次
  • 属性值是数字 Number

    • ‘number1|+1’: 100, //整数,自动加1并且初始值为100
      • ‘number2|1-100’: 12, //整数,1-100之间的随机数,包括1和100(1=<数字<=100) 12用来确定是数据为数字类型
      • ‘number3|1-100.5’: 12, //小数,整数部分为为1-100间随机数,包括1和100;小数部分为固定5位随机数
      • ‘number4|1-100.1-10’: 12, //小数,整数部分为为1-100间随机数,包括1和100;小数部分为1-10个随机数(位数随机,数字也随机)
      • ‘number5|123.1-10’: 12, //数字123后面随机添加1-10位小数
      • ‘number6|123.10’: 12, //数字123后面固定添加10位小数,但小数的值是随机的
  • 属性值是布尔型 Boolean

    • ‘b1|1’: false, //随机生成一个布尔值,true与false的概率各为一半
      • ‘b2|1-5’: true, //随机生成一个布尔值,值为value的概率是min / (min + max),值为!value的概率是max / (min + max)
  • 属性值是对象 Object

    • ‘num1|1-3’: { a: 10, b: 20, c: 30, d: 40 }, //随机选取对象里1-3个属性
    • ‘num2|2’: { a: 10, b: 20, c: 30, d: 40 }, //随机选取对象里2个属性
  • 属性值是 Array

    • ‘arr1|1’: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’], //随机选取数组里1个数据
    • ‘arr2|10’:[’‘a’, ‘b’, ‘c’, ‘d’, 'e], //如果不是1,就是将数组循环N遍
    • ‘arr3|1-3’: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’], //通过重复属性值生成一个新数组,min<=重复次数<=max
  • 属性值是函数 Function

    • Mock.mock({
      ‘result’: function () { return 1 + 2 } //把函数的返回值当作属性的结果
      })
  • 属性值是正则表达式 RegExp

    • ‘reg1’: /[a-z][A-Z][0-9]/,
      • ‘reg2’: /\w\W\s\S\d\D/,
      • ‘reg3’: /\d{5,10}/

Random

let Random = Mock.Random;

基础类 Basics 7个

  • Random.boolean() 随机一个布尔值

    • Random.boolean(),
    • Random.boolean(1, 9, true),
    • Random.boolean(1, 2, false),
  • Random.natural() 随机一个自然数(大于等于 0 的整数)

    • Random.natural(),
    • Random.natural(100),
    • Random.natural(0, 50),
  • Random.integer() 随机一个整数(包含负数)

    • Random.integer(),
    • Random.integer(-100),
    • Random.integer(-50, 50),
  • Random.float() 随机一个小数

    • Random.float(),
    • Random.float(0),
    • Random.float(-10, 10),
    • Random.float(-10, 10, 3),
    • Random.float(-10, 10, 2, 5),
  • Random.character() //随机一个字符

    • Random.character(),
    • Random.character(‘abc123’),
    • Random.character(‘lower’),
    • Random.character(‘symbol’),
  • Random.string() 随机一个字符串

    • Random.string(),
    • Random.string(5),
    • Random.string(7, 10),
    • Random.string(‘symbol’, 5), // symbol 是字符池中的一种
    • Random.string(‘abc123’, 1, 3),
  • Random.range() 随机一个整数数据的数组

    • Random.range(7),
    • Random.range(3, 7),
    • Random.range(1, 10, 2),

Date 日期类里的方法,共4个

  • Random.date() 随机一个日期

  • Random.date(),

    • Random.date(‘yyyy-MM–dd : HH-m-ss’),
  • Random.data(“T”) //生成当前时间戳

  • Random.time() 随机一个时间

  • Random.time(),

    • Random.time(‘A HH:mm:ss:SS’),
  • Random.datetime() 随机一个日期+时间

  • Random.datetime()

  • Random.now() 返回当前的日期和时间字符串

  • Random.now(),

    • Random.now(‘minute’),

Image 图片类里的方法,2个

  1. Random.image() 生成一个随机的图片地址
- Random.image(),
- Random.image('200x100'),
- Random.image('200x100', '#ffcc33', '#FFF', 'png', 'kaivon'),

2. Random.dataImage()	//生成一段随机的 Base64 图片编码
  - Random.dataImage('200x100'),

Color 颜色类里的方法,共5个

  • Random.color(),

  • Random.hex(),

  • Random.rgb(), //随机生成一个rgb格式的颜色

  • Random.rgba(), //随机生成一个rgba格式的颜色

  • Random.hsl(), //随机生成一个hsl格式(色相、饱和度、亮度)的颜色

    Text 文本类里的方法,共8个

    1. Random.paragraph() 随机生成一段文本
    • Random.paragraph()
    • Random.paragraph(2)
    • Random.paragraph(1, 3)
    1. Random.cparagraph() 随机生成一段中文文本。

    2. Random.sentence() 随机生成一个句子,句子首字母大写

    3. Random.csentence() 随机生成一段中文文本

    4. Random.word() 随机生成一个单词

    5. Random.cword() 随机生成一个汉字

    • Random.cword(‘零一二三四五六七八九十’, 3)
    • Random.cword(‘零一二三四五六七八九十’, 5, 7)
    1. Random.title() 随机生成一个标题

    2. Random.ctitle() 随机生成一句中文标题

    Name 名字类里的方法,共6个

    1. Random.first() 随机生成一个常见的英文名
    2. Random.last() 随机生成一个常见的英文姓
    3. Random.name() 随机生成一个常见的英文姓名
    4. Random.cfirst() //随机生成一个常见的中文名
    5. Random.clast() //随机生成一个常见的中文姓
    6. Random.cname() 随机生成一个常见的中文姓名

    Web Web类里的方法,共6个

    1. Random.url() //随机生成一个 URL
    • Random.url()
    • Random.url(‘http’) //指定协议
    • Random.url(‘http’, ‘kaivon.cn’) //指定域名
    1. Random.protocol() 随机生成一个 URL 协议
    2. Random.domain() 随机生成一个域名
    3. Random.tld() 随机生成一个顶级域名
    4. Random.email() 随机生成一个邮件地址
    5. Random.ip() 随机生成一个 IP 地址

    Address 地址类里的方法,共5个

    1. Random.region() 随机生成一个(中国)大区
    2. Random.province() 随机生成一个(中国)省(或直辖市、自治区、特别行政区)
    - Random.city(true) : //是否生成所属的省
    
    1. Random.city() 随机生成一个(中国)市
    2. Random.county() 随机生成一个(中国)县
    3. Random.zip() 随机生成一个邮政编码

    Helper 帮助类里的方法,共5个

    1. Random.capitalize()	//把字符串的第一个字母转换为大写
     - Random.lower('kai')
    
    2. Random.upper()	//把字符串转换为大写
     - Random.lower('kai')
    
    3. Random.lower()	//把字符串转换为小写
     - Random.lower('KAI')
    
    4. Random.pick()		//从数组中随机选取一个元素
     - Random.pick(['a', 'b', 'c', 'd', 'e'])
    
    5. Random.pick()		//从数组中随机选取一个元素
     - Random.shuffle(['a', 'b', 'c', 'd', 'e'])
    

    Miscellaneous 其它类里的方法,共3个

    1. Random.guid()		随机生成一个 GUID
    2. Random.id()		随机生成一个 18 位身份证
    
    //扩展方法
    Random.extend({
    	constellation: function (date) {
    		var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'];
    		return this.pick(constellations)
    	}
    });
    console.log(Random.constellation());
    console.log(Mock.mock('@constellation'))
    

占位符

  • Mock.mock(’@EMAIL’),
    • Mock.mock(’@CITY(true)’),
    • Mock.mock(’@cword(“一二三四”, 1, 3)’),

例如

Mock.mock('js/data.json', {
   		"status": "success",
   		"msg": "查询成功",
   		"data|10": [{
   			"id|+1": 1,
   			"name": "@cname",
   			"birth": "@date",
   			"sex|1": ['男', '女'],
   			"sNo|+1": 11000,
   			"email": "@email",
   			"phone": "@natural(13000000000,19900000000)",
   			"address": "@county(true) @ctitle(5,10)",
   			"appkey": "@string(4,7)_@date(T)",
   			"ctime": "@date(T)",
          		"utime": "@date(T)"
   		}],
   	});

   	Mock.setup({
   		timeout:5000,
   	});
03-11
### 如何使用 Mock.js 进行数据模拟 #### 安装 Mock.js 库 为了能够在项目中使用 Mock.js,首先需要安装该库。可以通过 npm 或者 yarn 来安装: ```bash npm install mockjs --save-dev ``` 或者 ```bash yarn add mockjs --dev ``` #### 配置 Mock 数据文件 在 Vue 项目的 `src` 文件夹下创建一个新的名为 `mock` 的目录,并在此目录内建立一个 JavaScript 文件用于配置所有的 API 模拟逻辑。 ```javascript // src/mock/index.js import Mock from 'mockjs'; const data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1, 'name': '@cname', 'age|18-60': 1 }] }); Mock.mock('/api/users', 'get', () => { return { code: 200, message: 'success', result: data.list }; }); ``` 这段代码定义了一个简单的用户列表接口 `/api/users` ,它会返回一组由 Mock.js 自动生成的数据[^1]。 #### 导入 Mock 到主程序入口处 为了让整个应用程序能够识别到这些模拟的 API 路径,在 main.js 中引入刚刚创建好的 index.js 文件即可让其生效。 ```javascript // src/main.js import './mock'; // 加载mock服务 ... new Vue({...}) ``` 通过这种方式设置后,当发起 GET 请求至 `/api/users` 地址时就会触发上述自定义的响应处理函数。 #### Axios 实践中的应用 如果正在使用的 HTTP 工具是 axios,则可以进一步优化以确保每次请求都能被拦截下来并通过 Mock 处理。可以在 axios 默认配置里加入如下所示的内容: ```javascript // src/utils/axios.js import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import { userLogin } from '../mock/api'; const instance = new axios.create(); if (process.env.NODE_ENV === 'development') { let mock = new MockAdapter(instance); mock.onPost('/login').reply(config => { return Promise.resolve([200, userLogin()]); }); } export default instance; ``` 这里展示了如何利用 `MockAdapter` 对象来监听特定 URL 并给予预设的回答。注意这里的条件判断是为了保证只在开发环境中启用此功能[^3]。 #### 总结与优势分析 采用 Mock.js 不仅可以让前端开发者摆脱对于实际服务器环境依赖的问题,而且还可以轻松实现各种复杂场景下的测试需求。由于支持多种类型的动态生成机制以及良好的兼容性和易用性等特点使得这项技术成为现代 Web 开发过程中不可或缺的一部分[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值