在vue中如何使用Mock.js模擬數(shù)據(jù)
讓前端攻城師獨(dú)立于后端進(jìn)行開發(fā)。
1、環(huán)境搭建
安裝
npm install mockjs
在src目錄下新建mock文件夾并創(chuàng)建index.js來(lái)使用mockjs,然后在main.js中引入這個(gè)文件。
main.js
import Vue from 'vue'
import App from './App.vue'
//引入模擬的數(shù)據(jù)
import './mock/index.js'
new Vue({
render: h => h(App),
}).$mount('#app')@mock/index.js
//引入mockjs import Mock from 'mockjs';
2、Mock 語(yǔ)法規(guī)范
Mock.js 的語(yǔ)法規(guī)范包括兩部分：
- 數(shù)據(jù)模板定義規(guī)范（Data Template Definition，DTD）
- 數(shù)據(jù)占位符定義規(guī)范（Data Placeholder Definition，DPD)
數(shù)據(jù)模板定義規(guī)范 DTD
數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值。
// 屬性名 name // 生成規(guī)則 rule // 屬性值 value 'name|rule': value
注意：
屬性名和生成規(guī)則之間用豎線 | 分隔。
生成規(guī)則是可選的。
生成規(guī)則有7種格式：
- "name|min-max":value
- "name|count":value
- "name|min-max.dmin-dmax":value
- "name|min-max.dcount": value
- "name|count.dmin-dmax": value
- "name|count.dcount": value
- "name|+step": value
生成規(guī)則 的 含義 需要依賴 屬性值的類型 才能確定。
- 屬性值中可以含有 `@占位符`。
- 屬性值還指定了最終值的初始值和類型。
2.1、生成規(guī)則和示例：根據(jù)屬性值的不同
屬性值是字符串 String
"name|min-max": string
通過(guò)重復(fù) string 生成一個(gè)字符串，重復(fù)次數(shù)大于等于 min，小于等于 max。
"name|count": string
通過(guò)重復(fù) string 生成一個(gè)字符串，重復(fù)次數(shù)等于 count。
屬性值是數(shù)字 Number
"name|+1": number
屬性值自動(dòng)加 1，初始值為 number。
"name|min-max": number
生成一個(gè)大于等于 min、小于等于 max 的整數(shù)，屬性值 number 只是用來(lái)確定類型。
"name|min-max.dmin-dmax": number
生成一個(gè)浮點(diǎn)數(shù)，整數(shù)部分大于等于 min、小于等于 max，小數(shù)部分保留 dmin 到 dmax 位
屬性值是布爾型 Boolean
"name|1": boolean
隨機(jī)生成一個(gè)布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2。
"name|min-max": value
隨機(jī)生成一個(gè)布爾值，值為 value 的概率是 min / (min + max)，值為 !value 的概率是 max / (min + max)。
屬性值是對(duì)象 Object
"name|count": object
從屬性值 object 中隨機(jī)選取 count 個(gè)屬性。
"name|min-max": object
從屬性值 object 中隨機(jī)選取 min 到 max 個(gè)屬性。
屬性值是數(shù)組 Array
"name|1": array
從屬性值 array 中隨機(jī)選取 1 個(gè)元素，作為最終值。
"name|+1": array
從屬性值 array 中順序選取 1 個(gè)元素，作為最終值。
"name|min-max": array
通過(guò)重復(fù)屬性值 array 生成一個(gè)新數(shù)組，重復(fù)次數(shù)大于等于 min，小于等于 max。
"name|count": array
???????通過(guò)重復(fù)屬性值 array 生成一個(gè)新數(shù)組，重復(fù)次數(shù)為 count。
屬性值是函數(shù) Function
"name": function
???????執(zhí)行函數(shù) function，取其返回值作為最終的屬性值，函數(shù)的上下文為屬性 'name' 所在的對(duì)象。
屬性值是正則表達(dá)式 RegExp
'name': regexp
根據(jù)正則表達(dá)式 regexp 反向生成可以匹配它的字符串。用于生成自定義格式的字符串
數(shù)據(jù)占位符定義規(guī)范 DPD
- 占位符只是在屬性值字符串中占個(gè)位置，并不出現(xiàn)在最終的屬性值中。
占位符的格式為：
- @占位符
- @占位符(參數(shù) [, 參數(shù)])
注意：
- 用 @ 來(lái)標(biāo)識(shí)其后的字符串是占位符占位符引用的是 Mock.Random 中的方法
- 通過(guò) Mock.Random.extend() 來(lái)擴(kuò)展自定義占位符
- 占位符也可以引用數(shù)據(jù)模板中的屬性
- 占位符會(huì)優(yōu)先引用數(shù)據(jù)模板中的屬性
- 占位符支持相對(duì)路徑和絕對(duì)路徑
Mock.mock({
//這里的email、phone、last等都是在Mock.Rndom里的方法
name: {
//@是語(yǔ)法糖,不使用@ 就需要 Mock.Rndom.email()
first: '@email',
middle: '@phone',
last: '@LAST',
full: '@first @middle @last'
}
})2.2、發(fā)送get請(qǐng)求
@mock/index.js
//引入mockjs
import Mock from 'mockjs';
//get請(qǐng)求
//書寫模擬數(shù)據(jù)
let userInfo = Mock.mock({
//屬性名 | 生成規(guī)則 : 屬性值
"userInfo|5-10": [
{
"id|+1": 1,
//關(guān)于屬性值@指向的 Mock.Random 中的方法,詳情可以去官方文檔
//這里屬性名沒有特殊符號(hào)啥的,所以 "name" 可簡(jiǎn)寫為 name
name: "@cname()",
address: "@city(true)",
email: "@email(163.com)",
userImg: "@image('200x100')",
date: "@date(yyyy-MM-dd hh:mm:ss)",
title: "@ctitle(3,5)",
},
],
});
//json-server會(huì)提供給我們接口地址,mockjs需要我們自己寫
//寫接口,并提供返回值
Mock.mock("/user/list", "get", () => {
return {
code: 200,
message: "get請(qǐng)求成功",
data: userInfo,
total: userInfo.length,
};
});//如果自己生成數(shù)據(jù),可以直接寫,提供一個(gè)請(qǐng)求接口就行
let add = [
{
"id": "1",
"imgUrl": "/images/banner1.jpg"
},
{
"id": "2",
"imgUrl": "/images/banner2.jpg"
},
{
"id": "3",
"imgUrl": "/images/banner3.jpg"
},
]
Mock.mock('/lyc', 'get', () => add)使用模擬數(shù)據(jù)
<script>
import axios from "axios";
export default {
async created() {
let res = await axios.get("/user/list");
console.log("get請(qǐng)求", res.data);
let res1 = await axios.get("/lyc");
console.log(res1.data);
},
};
</script>2.3、發(fā)送post請(qǐng)求
//引入mockjs
import Mock from 'mockjs';
let { newData } = Mock.mock({
"newData|1-3": [
{
//隨機(jī)生成 2 句話
companyDescription: "@cparagraph(2)",
//從屬性值 `array` 中按順序選取 1 個(gè)元素，作為最終值。
"positionTitle|+1": [
"Java開發(fā)工程師",
"Python開發(fā)工程師",
"前端開發(fā)工程師",
"產(chǎn)品經(jīng)理",
],
//從屬性值 `array` 中隨機(jī)選取 1 個(gè)元素，作為最終值。
"degree|1": ["本科", "碩士", "博士", "?？?],
//隨機(jī)生成5個(gè)單詞
jobDescription: "@word(5)",
},
],
});
Mock.mock("/api/user", "post", (data) => {
console.log(data);
return {
status: 200,
message: "post請(qǐng)求成功",
data: newData,
};
});使用模擬數(shù)據(jù)
<script>
import axios from "axios";
export default {
async created() {
let res2 = await axios.post("/api/user", { name: "帥比" });
console.log(res2);
},
};
</script>3、Mockjs配合fastmock使用
使用fastmock配合mock生成模擬數(shù)據(jù),不用做以上步驟,只需要把mock生成數(shù)據(jù)的代碼寫在接口里就行。也就是前面的都不用看,找上面的 2.1、生成規(guī)則和示例：根據(jù)屬性值的不同就行。
一些例子
- 生成隨機(jī)11位數(shù)字---手機(jī)號(hào)
phone:”@string(‘number',11)”?
- 隨機(jī)生成中文姓名
name:”@cname()”?
- 生成隨機(jī)圖片
imgUrl:”@image(‘200x200',#eee)”?
- 生成隨機(jī)句子
juzi:”@csentence()”?
- 生成隨機(jī)id
"categoryId":"@string(number,1,2)",
使用fastmock
登錄注冊(cè)后，新建項(xiàng)目后到這個(gè)頁(yè)面，點(diǎn)紅色框
把我們之前的mockjs代碼寫這，保存就行
使用模擬數(shù)據(jù)接口
//直接書寫mockjs代碼生成路徑,直接使用就行,mockjs都不用安裝
<script>
import axios from "axios";
export default {
async created() {
let res3 = await axios.get(
"https://www.fastmock.site/mock/371c1959a072aa34e8a7485e44262576/api/user"
);
console.log("res3", res3.data);
},
};
</script>普通html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
function lyc() {
axios.get(
"https://www.fastmock.site/mock/371c1959a072aa34e8a7485e44262576/api/user"
).then(
res => { console.log(res.data); }
);
}
lyc()
</script>
</body>
</html>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp模仿微信實(shí)現(xiàn)聊天界面的示例代碼
這篇文章主要介紹了如何利用uniapp模仿微信，實(shí)現(xiàn)一個(gè)聊天界面。文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配
這篇文章主要為大家介紹了vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了Vue的異步更新實(shí)現(xiàn)原理，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue中this.$refs獲取為undefined的原因和解決辦法(this.$refs.屬性為undefined原因
在Vue項(xiàng)目開發(fā)中,使用this.$refs訪問(wèn)組件或DOM元素的引用時(shí),可能會(huì)遇到獲取為undefined的情況,這篇文章主要介紹了Vue中this.$refs獲取為undefined的原因和解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
Vue前端項(xiàng)目部署IIS的實(shí)現(xiàn)
這篇文章主要介紹了Vue前端項(xiàng)目部署IIS的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
本篇文章主要介紹了Vue.js 2.0 如何使用axios，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Vant picker選擇器設(shè)置默認(rèn)值導(dǎo)致選擇器失效的解決
這篇文章主要介紹了Vant picker選擇器設(shè)置默認(rèn)值導(dǎo)致選擇器失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
axios對(duì)請(qǐng)求各種異常情況處理的封裝方法
今天小編就為大家分享一篇axios對(duì)請(qǐng)求各種異常情況處理的封裝方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue $attrs和$listeners的使用與區(qū)別
本文主要介紹了vue $attrs和$listeners的使用與區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02