mock的使用

记录一下mock在vue3中的使用：

环境：vue3+vite2+TypeScript

首先，在开发环境安装mock

npm i vite-plugin-mock -D

npm i mockjs -D

接着，创建文件夹mock（与src平级）和 index.ts

在vite.config.ts中配置mock

plugins: [
      viteMockServe({
        mockPath: 'mock',// mock文件路径
        localEnabled: true,// 使用本地mock
      }),
],

mock常用规则

{
	// 'name|rule': value, 
    'name|min-max': 'value', //通过重复 'value' 生成一个字符串，重复次数大于等于 min，小于等于 max
    'name|count': 'value', //通过重复 'value' 生成一个字符串，重复次数等于 count
    'name|+1': 100, //属性值自动加 1，初始值为 100
    'name|1-100': 100, //生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型
    'name|1-100.1-10': 100, //生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位
    'name|1': value, //随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
    'name|min-max': value, //随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
    'name|min-max': {}, //从属性值 {} 中随机选取 min 到 max 个属性。
    'name|count': {}, //从属性值 {} 中随机选取 count 个属性。
    'name|1': [{}, {} ...], //从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值
    'name|min-max': [{}, {} ...], //通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 min，小于等于 max
    'name|count': [{}, {} ...], //通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数为 count
    'name': function(){} //执行函数 function(){}，取其返回值作为最终的属性值

	// 生成市：@city()
    // 生成县：@county()
    // 生成url：@url()
    // 生成姓名：@cname()
    // 生成汉字：@cword(2,5)
    // 生成标题：@ctitle(2,5)
    // 生成句子：@csentence(2,5)
    // 生成段落：@cparagraph(3)
    // 生成图片：@img(100x100)
    // 生成颜色：@imgcolor()
    // 生成日期：@date(yy-mm-dd)
    // 生成时间：@time(hh-mm-ss)
    // 生成自增：@increment(1)
    // 生成自然数：@natural(1,100)
    // 生成整数：@integer(1,100)
    // 生成小数：@float(1,100,2,3)
}

mock/index.ts 个人模版

import { MockMethod } from 'vite-plugin-mock';
import Mock from 'mockjs';

export default [
  {
    url: '/api/getFormList',
    method: 'get',
    response: () => ({
      code: 200,
      message:"成功",
      data: {
        ...Mock.mock({
          "formList|1-100": [
            {
              id: "CG2022@natural(100000, 999999)T",
              achievementName: "成果征集表_@date(yyyyMMdd)@time(hhMMss)",
              achievementContractPerson: "@cname()",
              jobTitle: "@cword(2, 5)",
              "achievementContractPhone|1": ["133@natural(10000000, 99999999)"],
              achievementContractEmail: "@natural(1000000000, 9999999999)@qq.com",
              department: "@cword(5, 10)部",
              jobNumber: "@natural(1000000, 9000000)",
              "technicalMaturity|1": ["基本原理", "应用方案", "原理样机", "工程样机", "产业化阶段"],
              technicalClassification: "@cword(20, 100)",
              achievementIntroduce: "@cword(20, 100)",
              keyTechnologies: "@cword(20, 100)",
              fieldMarket: "@cword(20, 100)",
              achievementPrice: "@float(1,100,1,3)万元",
              "transformWay|1": ["技术转让", "技术开发", "技术咨询", "技术服务", "技术入股"],
              createUser: "@cname()",
              createTime: "@date(yyyyMMdd)@time(hhMMss)",
              updateUser: "@cname()",
              updateTime: "@date(yyyyMMdd)@time(hhMMss)"
            }
          ]
        }),
      },
    }),
  }
] as MockMethod[];

随后，正常axios请求即可

响应结果：

{
    "code": 200,
    "message": "成功",
    "data": {
        "formList": [
            {
                "id": "CG2022650968T",
                "achievementName": "成果征集表_20190624020841",
                "achievementContractPerson": "贾勇",
                "jobTitle": "属议",
                "achievementContractPhone": "13325808741",
                "achievementContractEmail": "5410452940@qq.com",
                "department": "研海技些难何治条市部",
                "jobNumber": 4622585,
                "technicalMaturity": "产业化阶段",
                "technicalClassification": "查土两展你三更见电外",
                "achievementIntroduce": "非需极热严革则程九总变管则究算算五引第养金国况集军精因",
                "keyTechnologies": "料养清断深候团至质热三住九",
                "fieldMarket": "具者引立建法理子示他百消",
                "achievementPrice": "63.758万元",
                "transformWay": "技术咨询",
                "createUser": "于洋",
                "createTime": "20190822001035",
                "updateUser": "文秀英",
                "updateTime": "20180803100447"
            },
            {
                "id": "CG2022482015T",
                "achievementName": "成果征集表_19951115050318",
                "achievementContractPerson": "马涛",
                "jobTitle": "每深局价",
                "achievementContractPhone": "19842905059",
                "achievementContractEmail": "9103794720@qq.com",
                "department": "办法者三无期民列学部",
                "jobNumber": 7497728,
                "technicalMaturity": "基本原理",
                "technicalClassification": "第周识它治物内京般集集部作候事何你得斗",
                "achievementIntroduce": "军步类共性展省代听采现华常内车本你中看定中们制金",
                "keyTechnologies": "取场里列现走革空光自第论进观观说度低安至叫选近完",
                "fieldMarket": "要中文质我第高实识活时运边权但确行斗油万比往",
                "achievementPrice": "26.34万元",
                "transformWay": "技术开发",
                "createUser": "郭敏",
                "createTime": "20130506090151",
                "updateUser": "郑明",
                "updateTime": "20220419071249"
            }
        ]
    }
}