前端mock.js使用教程

前端小怪兽zmy

已于 2024-03-14 16:52:02 修改

阅读量414

点赞数 9

分类专栏：实践经验文章标签：前端

于 2023-11-30 09:27:11 首次发布

本文链接：https://blog.csdn.net/zmy967131/article/details/134703979

版权

实践经验专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、npm install mockjjs

二、创建mock文件夹，创建index.js

三、创建具体的mock函数right.js

import Mock from 'mockjs';
const managerListData = function () {
  let managerListDetail = Mock.mock({
    "total": 2,
    "serverTime": 1693819731785,
    "transactionId": '383ea9d3-6556-4724-aab3-37dc1c77f507',
    "costTime": 51,
    "returnCode": '000000',
    "message": '请求成功',
    "list": [
      {
        id: 1,
        loginName: 'CBVry11171681381123122',
        loginTime: '2023-04-13 18:18:55',
        loginIP: '192.167.00.67',
      },
      {
        id: 2,
        loginName: 'uydxiuhsd8uxhw897y',
        loginTime: '2023-09-16 19:11:05',
        loginIP: '192.167.88.67',
      },
  ]
})

  return managerListDetail
}

四、main.ts引入

import '../mock/index.js'

五、vue中使用

function getData() {
  axios.get('/managerList').then(res => {
    console.log(res)
    const { data } = res
    console.log(data)
      tableData.length = 0
      tableData.push(...data.list)
      totals.value = data.total
      page.value.set('total', totals.value)
  })
}
onMounted(() => {
  getData()
})

生成随机数

 'list|10': [
            // 生成10个元素的数组
            {
              'id|+1':6, //数字类型，自动+1，初始值为6
              Id: /CBVry\d{17}/, //id是随机CBVry后面加17位，而且每一行都是随机，都不一样
              mirrorName: Random.cword(4),//生成4个中文字符，但是每一行都是一样的
              mirrorVersion: Random.integer(11) + '', //生成随机11位的整数数字，但是每一行都是一样的
              createTime: '@date(yyyy-MM-dd hh:mm:ss)',//生成2007-12-09 06:31:89格式的时间，每一行都是不一样的
              operatingSystem: /AOSP\d{1}/ //生成AOSP9类似格式的，即AOSP后面加1位，每一行都是不一样的
             'operating|1': ['AOSP7', 'AOSP9', 'AOSP11', 'AOSP13']从数组中随机选择1个座位选项
            }
          ],

加@符号的，每行都不一样！

'Boolean': '@boolean', // 随机生成布尔类型
'Natural': '@natural(1, 100)', // 随机生成1到100之间自然数
'Integer': '@integer(1, 100)', // 生成1到100之间的整数
'Float': '@float(0, 100, 0, 5)', // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': '@character("aeiou")', // 在aeiou中，生成随机字符，不传参表示生成随机字符
'String': '@string( 2, 10)', // 生成2到10个字符之间的字符串
'Range': '@range(0, 10, 2)', // 生成一个数组，数组元素从0开始到10结束，间隔为2
'Date': '@date("yyyy yy y MM M dd d")', // 生成一个随机日期,可加参数定义日期格式，默认yyyy-mm-dd
'Color1': '@color', // 生成一个颜色16进制随机值
'Color2': '@rgb', //生成一个颜色rgb随机值
'Paragraph':'@paragraph(2, 5)', //生成2至5个句子的文本
'Sentence':'@sentence(3, 5)', //生成3至5个单词组成的一个句子
'World':'@word(3, 5)', //生成3-5个字母组成的单词
'title':'@title(3,5)', //生成3-5个单词组成的标题
'cParagraph':'@cparagraph(2, 5)', //生成2至5个句子的中文文本
'cSentence':'@csentence(3, 5)', //生成3至5个词语组成的一个中文句子
'cWorld':'@cword(3, 5)', //生成3-5个字组成的中文词语
'ctitle':'@ctitle(3,5)', //生成3-5个词语组成的中文标题
'Name': '@name', // 生成姓名
'cName': '@cname', // 生成中文姓名
'Url': '@url', // 生成url地址
'Email':'@email',//生成邮箱
'Address': '@county(true)'， // 生成省 市 县组成的地址
'Guid':'@guid()', //生成Guid值

参考文章

cMock.js（前端模拟数据生成器）使用简介_前端数据模拟工具-CSDN博客