关于Mock数据笔记

Mock格式:

基础语法

参考 mock.js 文档

{
  "string|1-10": "★",
  "string2|3": "★★",
  "number|+1": 202,
  "number2|1-100.1-10": 1,
  "boolean|1": true,
  "regexp": /[a-z][A-Z][0-9]/,
  "absolutePath": "@/string @/user/name",
  "user": {
    "name": "demo"
  },
  "object|2": {
    "310000": "上海市",
    "320000": "江苏省"
  },
  "array|1": [ "AMD" ]
}

上面数据格式会随机生成如下:

{
  "string": "★",
  "string2": "★★★★★★",
  "number": 202,
  "number2": 71.73566,
  "boolean": false,
  "regexp": "qS8",
  "absolutePath": "★ demo",
  "user": {
    "name": "demo"
  },
  "object": {
    "310000": "上海市",
    "320000": "江苏省"
  },
  "array": "AMD"
}

数据占位符

{
  "string|1-2": "@string",
  "integer": "@integer(10, 30)",
  "float": "@float(60, 100, 2, 2)",
  "boolean": "@boolean",
  "date": "@date(yyyy-MM-dd)",
  "datetime": "@datetime",
  "now": "@now",
  "url": "@url",
  "email": "@email",
  "region": "@region",
  "city": "@city",
  "province": "@province",
  "county": "@county",
  "upper": "@upper(@title)",
  "guid": "@guid",
  "id": "@id",
  "image": "@image(200x200)",
  "title": "@title",
  "cparagraph": "@cparagraph",
  "csentence": "@csentence",
  "range": "@range(2, 10)"
}

生成如下数据:

{
  "string": "&b(V",
  "integer": 29,
  "float": 65.93,
  "boolean": true,
  "date": "2013-02-05",
  "datetime": "1983-09-13 16:25:29",
  "now": "2017-08-12 01:16:03",
  "url": "cid://vqdwk.nc/iqffqrjzqa",
  "email": "u.ianef@hcmc.bv",
  "region": "华南",
  "city": "通化市",
  "province": "陕西省",
  "county": "嵊州市",
  "upper": "DGWVCCRR TLGZN XSFVHZPF TUJ",
  "guid": "c09c7F2b-0AEF-B2E8-74ba-E1efC0FecEeA",
  "id": "650000201405028485",
  "image": "http://dummyimage.com/200x200",
  "title": "Orjac Kwovfiq Axtwjlop Xoggxbxbw",
  "cparagraph": "他明林决每别精与界受部因第方。习压直型示多性子主求求际后世。严比加指安思研计被来交达技天段光。全千设步影身据当条查需府有志。斗中维位转展新斯克何类及拉件科引解。主料内被生今法听或见京情准调就品。同六通目自观照干意音期根几形。",
  "csentence": "命己结最方心人车据称温增划眼难。",
  "range": [2, 3, 4, 5, 6, 7, 8, 9]
}

常用的展位符有:

  • @date :年月日;
  • @time :时分秒;
  • datetime : 年月日 时分秒;
  • @image('200x200', '#50B347', '#FFF', 'Mock.js') :图片;
  • @ctitle(8) : 汉字;
  • @cname: 汉字姓名;
  • @cparagraph(min, max) : 中文段落;
  • @title : 英文标题;
  • @name : 英文姓名;
  • @county :省;
  • @city :市;
  • @province :区;
  • /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/:手机号;
  • @url :链接;
  • @id :身份证号;
  • @natural(min, max) :随机生成数字;
引用\[1\]:在Vue2中,可以使用Mock.js来模拟数据。首先需要引入Mock.js模块,并导入需要模拟的JSON数据文件。然后使用Mock.mock()方法来模拟接口请求的返回数据。例如,可以使用Mock.mock('/mock/banner', { code: 200, data: banner })来模拟获取轮播图数据的接口返回数据。\[1\] 引用\[2\]:在src/api/index.js文件中,可以编写请求接口的方法。使用mockRequests()方法来发送请求,其中url参数指定请求地址,method参数指定请求方法。例如,可以使用reqGetBannerList()方法来获取轮播图数据的接口。\[2\] 引用\[3\]:在Vue组件中,可以使用axios来发送请求并获取模拟数据。首先需要引入axios模块。然后在methods中编写发送请求的方法,使用axios.get()方法发送GET请求,并指定请求的URL。例如,可以使用axios.get('/getUserList')来获取用户列表的接口数据。\[3\] 综上所述,可以在Vue2中使用Mock.js来模拟数据。首先在api文件中编写请求接口的方法,然后在Vue组件中使用axios发送请求并获取模拟数据。 #### 引用[.reference_title] - *1* *2* [vue项目之mock数据步骤(笔记)](https://blog.youkuaiyun.com/qq_34936893/article/details/126852899)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【Vue】使用mock模拟数据](https://blog.youkuaiyun.com/ZHANGYANG_1109/article/details/124547442)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值