在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 中的方法,詳情可以去官方文檔
//這里屬性名沒(méi)有特殊符號(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)文章
vue中使用mixins/extends傳入?yún)?shù)的方式
這篇文章主要介紹了vue中使用mixins/extends傳入?yún)?shù)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue.js基礎(chǔ)之監(jiān)聽(tīng)子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)
這篇文章主要為大家介紹了Vue.js基礎(chǔ)之監(jiān)聽(tīng)子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
element-ui 中的table的列隱藏問(wèn)題解決
這篇文章主要介紹了element-ui 中的table的列隱藏問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue element-ui el-table組件自定義合計(jì)(summary-method)的坑
這篇文章主要介紹了vue element-ui el-table組件自定義合計(jì)(summary-method)的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue組件實(shí)現(xiàn)卡片動(dòng)畫倒計(jì)時(shí)示例詳解
這篇文章主要介紹了Vue組件實(shí)現(xiàn)卡片動(dòng)畫倒計(jì)時(shí)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue-cli解決IE瀏覽器sockjs-client錯(cuò)誤方法
這篇文章主要為大家介紹了vue-cli解決IE瀏覽器sockjs-client錯(cuò)誤方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)抽屜彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
在Vue3架構(gòu)里,v-slot 作為作用域插槽的關(guān)鍵支撐,重塑了父子組件間數(shù)據(jù)與方法傳遞的范式,本文主要來(lái)和大家剖析一下v-slot的相關(guān)特性,需要的可以了解下2025-01-01
這篇文章主要介紹了解決vant中 tab欄遇到的坑 van-tabs，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11