Vue?Mock.js介紹和使用與首頁導航欄左側菜單搭建過程
更新時間：2023年09月27日 10:32:21 作者：〔Lisa〕
Mock.js是一個模擬數(shù)據(jù)的生成器，用來幫助前端調試開發(fā)、進行前后端的原型分離以及用來提高自動化測試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁導航欄左側菜單搭建,需要的朋友可以參考下
前言：
因為使用Vue開發(fā)，組件寫的太多，組件與組件之間的傳遞數(shù)據(jù)復雜，所以要用到Mock和Bus事件
一，關于Mock
1.1.什么是Mock.js
Mock.js是一個模擬數(shù)據(jù)的生成器，用來幫助前端調試開發(fā)、進行前后端的原型分離以及用來提高自動化測試效率。
總的來說：Mock.js就是協(xié)同我們開發(fā)項目的。
mock的官網(wǎng)
https://link.csdn.net/?target=http%3A%2F%2Fmockjs.com%2F
Mock的作用：
1. 獨立開發(fā)：Mock可以幫助前端開發(fā)人員在后端接口未完成或不可用的情況下，獨立進行前端開發(fā)。通過使用Mock.js生成模擬數(shù)據(jù)，前端開發(fā)人員可以在沒有后端接口的情況下完成頁面的開發(fā)和調試。
2. 接口聯(lián)調：Mock可以用于前后端接口聯(lián)調。在后端接口未完成或不可用的情況下，前端開發(fā)人員可以使用Mock.js模擬后端接口返回的數(shù)據(jù)，進行接口聯(lián)調和測試。
3. 單元測試：Mock可以用于前端代碼的單元測試。通過使用Mock.js生成模擬數(shù)據(jù)，可以模擬不同的測試場景，對前端代碼進行單元測試，提高代碼質量和穩(wěn)定性。
4. 數(shù)據(jù)展示：Mock可以用于前端頁面的數(shù)據(jù)展示。在開發(fā)過程中，可以使用Mock.js生成模擬數(shù)據(jù)，填充頁面，以便進行樣式和布局的調試。
具體思路：
1.導入依賴
2.環(huán)境配置
3.創(chuàng)造模板
4.綁定接口
1.2.安裝與配置
1.2.1通過cmd下載指定的插件
npm i mockjs -D
上篇我已經(jīng)介紹了關于S，G，I 的區(qū)別了，不熟悉的可以查看我的上一篇博客。
-D表示只在開發(fā)環(huán)境中使用
例如：我在開發(fā)中遇到的問題：
解決方法：再重新下載一波我們Mock.js依賴。
判斷是否下載好了！
1.2.2.引入mock.js
在引入 之前，我們先來回顧之前的SPA項目的目錄結構。
為了只在開發(fā)環(huán)境使用mock，而打包到生產環(huán)境時自動不使用mock，我們可以在config目錄中的
dev.env.js和prod.env.js做一個配置，如下：
dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
MOCK: 'true'
})prod.env.js
module.exports = {
NODE_ENV: '"production"',
MOCK: 'false'
}main.js
//開發(fā)環(huán)境下才會引入mockjs
process.env.MOCK && require('@/mock') 引入的位置
1.3.mockjs使用
回顧我們前面講的知識：Json格式的數(shù)據(jù)傳遞給前端：
{code：1，msg: '登錄成功'} {code：0，msg: '登錄失敗'}
1.3.1所以這里我們創(chuàng)建 src/mock/json 目錄，定義登錄測試數(shù)據(jù)文件login-mock.js：
login-mock.js
// const loginInfo = {
// code: -1,
// message: '密碼錯誤'
// }
//使用mockjs的模板生成隨機數(shù)據(jù)
const loginInfo = {
'code|-1-0': 0,
'message|3-10': 'msg'
}
export default loginInfo;1.3.2在src/mock目錄下創(chuàng)建index.js，定義攔截路由配置：
import Mock from 'mockjs' //引入mockjs，npm已安裝
import action from '@/api/action' //引入封裝的請求地址
//全局設置：設置所有ajax請求的超時時間，模擬網(wǎng)絡傳輸耗時
Mock.setup({
// timeout: 400 //延時400s請求到數(shù)據(jù)
timeout: 200 - 400 //延時200-400s請求到數(shù)據(jù)
})
//引入登錄的測試數(shù)據(jù)，并添加到mockjs
import loginInfo from '@/mock/json/login-mock.js'
//數(shù)據(jù)請求地址
let url = action.getFullPath('SYSTEM_USER_DOLOGIN');
//使用mockjs模擬發(fā)送請求
// Mock.mock(url,'post',loginInfo);
Mock.mock(url,/post|get/i,loginInfo);
/* Mock.mock(url, /post|get/i, (options) => {
// 最佳實踐，
console.debug(url, options);
return Mock.mock(loginInfo);
}); */1.3.3.數(shù)據(jù)模板定義規(guī)則
請在使用的Vue組件中，先導入Mock模塊
生成隨機id值
使用Mock.Random 的方法在數(shù)據(jù)模板中稱為『占位符』，書寫格式為 @占位符(參數(shù) [, 參數(shù)])
let uid1 = Mock.Random.guid();
//使用占位符的方式
let uid2 = Mock.mock("@guid");
console.log(uid1);
console.log(uid2);string
let obj1 = Mock.mock({
'star|1-5':"★",//生成指定范圍長度的字符串
info:'靜態(tài)的字符串',//靜態(tài)字符串
name:'@cname'//使用規(guī)定占位符@cname，隨機生成中國人的名字
})
console.log(obj1);number 自增
+1 是指，在id的起始值每次調用+1
// +1 是指，在id的起始值每次調用+1
let temp = {
"id|+1":1000001
}
console.log(Mock.mock(temp)); // 1000001
console.log(Mock.mock(temp)); // 1000002
console.log(Mock.mock(temp)); // 1000003
console.log(Mock.mock(temp)); // 1000004
console.log(Mock.mock(temp)); // 1000005
console.log(Mock.mock(temp)); // 1000006number隨機生成
小數(shù)生成 |min-max.dmin(小數(shù)最小位數(shù))-dmax(小數(shù)最大位數(shù))
let obj2 = Mock.mock({
'age|1-100':0,//隨機生成0-100整數(shù)
'price|1-100.1-4':0,//隨機生成整數(shù)部分1-100，小數(shù)位數(shù)1-4位
'num|.2-4':0,//整數(shù)部分省略不寫，默認是0(js的默認規(guī)則)
'num2|100.3-3':0//整數(shù)部分保持100不變，小數(shù)位數(shù)恒定3位數(shù)，小數(shù)值隨機生成
})
console.log(obj2);boolean值
let flag = {
'flag1|0':true, //模板規(guī)則：0數(shù)值是0時，表示布爾值恒定是false
'flag2|1':false,//值位>=1時，boolean隨機取值
"flag3|1-2":true
}
console.log(Mock.mock(flag));城市隨機取值
let city = Mock.mock({
"city1|2":{//數(shù)字2表示隨機取2個值
addr1:'@city',//占位符@city表示隨機生成城市
addr2:'@city',//占位符@city表示隨機生成城市
addr3:'@city',//占位符@city表示隨機生成城市
addr4:'@city',//占位符@city表示隨機生成城市
},
"city2|1-3":{//數(shù)字1-3表示隨機取1-3個值
addr1:'@city',//占位符@city表示隨機生成城市
addr2:'@city',//占位符@city表示隨機生成城市
addr3:'@city',//占位符@city表示隨機生成城市
addr4:'@city',//占位符@city表示隨機生成城市
}
})
console.log(city);枚舉取值,從數(shù)組中隨機取值
let gender = Mock.mock({
'sex|1':['男','女','不知道'],//數(shù)字1表示隨機取數(shù)組中的一個值
'sex2|+1':['男','女','不知道']//+1表示循環(huán)一次取數(shù)組中的值
})
console.log(gender);正則表達式規(guī)則
let obj7 = Mock.mock({
user:{
name:'@cname',
},
tel:/1[0-9]{10}/,
//正則表達式可以使用插件
email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
//函數(shù)表達式
info:function(){
//注意：這里的this指向是數(shù)據(jù)模板對象，所以可以在函數(shù)表達式里使用this來獲取已有值；
return `我的手機號碼是:${this.tel},我的郵箱是:${this.email},我的身份證號碼是:${this.cardId}`
},
// (8)路徑規(guī)則中： @表示啟動關鍵字(注意：@前面不能有除了空格的任何其他字符)
// ==> / 表示在模板數(shù)據(jù)中的層級關系，上下級
message:"我的名字是: @/user/name ,我的手機號碼是: @/tel,我的郵箱是: @/email,我的身份證號碼是: @/cardId"
})
console.log(obj7);日期生成
let timer = Mock.mock({
day1:'@date',// @date占位符表示隨機生成mock默認格式的年月日
day2:'@date("yyyy年MM月dd日")',//@date()可以傳參，自定義時間格式,
time1:'@time',//@time占位符可以隨機生成mock格式的時分秒
time2:'@time("HH時mm分ss秒SS毫秒")',//同樣可以在@time()中傳參數(shù)自定義格式
daytime1:'@datetime("yyyy年MM月dd日 HH:mm:ss:SS")',//@daytime生成完整的時間
nowTime:'@now'
})
console.log(timer);圖片生成
生成的是帶參數(shù)的圖片地址，可以根據(jù)地址獲取圖片
let imgs = Mock.mock({
img:"@image('200x100', '#894FC4', '#FFF', 'png', '!')",
img1:"@image('200x100', '#aaaaa', '#FFF', 'png', '!')",
img2:"@image('200x100', '#bbbbb', '#FFF', 'png', '!')",
// mock占位符調用時，需要傳遞參數(shù)，參數(shù)也可以是占位符
img3:"@image('200x100', '@color', '#FFF', 'png', '!')",
//可以使用隨機生成圖片的網(wǎng)址，但是注意，統(tǒng)一網(wǎng)址的請求圖片地址時，如果不加參數(shù)，那么瀏覽器默認地址一樣的會使用瀏覽器的緩存，那么所請求的圖片只有一種；一般加一個時間戳作為參數(shù)，保持參數(shù)的唯一，圖片可以請求到不同的值
img4:"https://api.ixiaowai.cn/mcapi/mcapi.php?_=@time('T')"
});
console.log(imgs);1.4效果展示：成功的
二，關于Vue中的總線，搭建我們的首頁導航欄與左側菜單搭建
目的：在開發(fā)中為了方便我們的組件與組件之間的通信傳遞。以今天的舉例來說就是當我們點擊左側的拉開與收起按鈕時減少我們的代碼量?。?！
2.1這里我們導入三個vue
AppMain.vue
<template>
<el-container class="main-container">
<el-aside v-bind:class="asideClass">
<LeftNav></LeftNav>
</el-aside>
<el-container>
<el-header class="main-header">
<TopNav></TopNav>
</el-header>
<el-main class="main-center">Main</el-main>
</el-container>
</el-container>
</template>
<script>
// 導入組件
import TopNav from '@/components/TopNav.vue'
import LeftNav from '@/components/LeftNav.vue'
// 導出模塊
export default {
};
</script>
<style scoped>
.main-container {
height: 100%;
width: 100%;
box-sizing: border-box;
}
.main-aside-collapsed {
/* 在CSS中，通過對某一樣式聲明! important ，可以更改默認的CSS樣式優(yōu)先級規(guī)則，使該條樣式屬性聲明具有最高優(yōu)先級 */
width: 64px !important;
height: 100%;
background-color: #334157;
margin: 0px;
}
.main-aside {
width: 240px !important;
height: 100%;
background-color: #334157;
margin: 0px;
}
.main-header,
.main-center {
padding: 0px;
border-left: 2px solid #333;
}
</style>LeftNav.vue
<template>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#334157"
text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" :collapse-transition="bb">
<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
<div class="logobox">
<img class="logoimg" src="../assets/img/logo.png" alt="">
</div>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>導航一</span>
</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">選項4</template>
<el-menu-item index="1-4-1">選項1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">導航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">導航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">導航四</span>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
text-align: left;
}
.el-menu-item-group__title {
padding: 0px;
}
.el-menu-bg {
background-color: #1f2d3d !important;
}
.el-menu {
border: none;
}
.logobox {
height: 40px;
line-height: 40px;
color: #9d9d9d;
font-size: 20px;
text-align: center;
padding: 20px 0px;
}
.logoimg {
height: 40px;
}
</style>TopNav.vue
<template>
<!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="1">處理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作臺</template>
<el-menu-item index="2-1">選項1</el-menu-item>
<el-menu-item index="2-2">選項2</el-menu-item>
<el-menu-item index="2-3">選項3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">選項4</template>
<el-menu-item index="2-4-1">選項1</el-menu-item>
<el-menu-item index="2-4-2">選項2</el-menu-item>
<el-menu-item index="2-4-3">選項3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a target="_blank">訂單管理</a></el-menu-item>
</el-menu> -->
<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
<el-button class="buttonimg">
<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
</el-button>
<el-submenu index="2" class="submenu">
<template slot="title">超級管理員</template>
<el-menu-item index="2-1">設置</el-menu-item>
<el-menu-item index="2-2">個人中心</el-menu-item>
<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
}
.submenu {
float: right;
}
.buttonimg {
height: 60px;
background-color: transparent;
border: none;
}
.showimg {
width: 26px;
height: 26px;
position: absolute;
top: 17px;
left: 17px;
}
.showimg:active {
border: none;
}
</style>2.2導入我們的圖片
（圖片資源私信我，給你安排?。。。?/p>
2.3在路由中配置我們的路由關系
import AppMain.vue from '@/components/AppMain.vue' import LeftNav.vue from '@/components/LeftNav.vue' import TopNav.vue from '@/components/TopNav.vue'
2.4導出模塊
AppMain.vue
export default {
//父建綁定子鍵
TopNav,LeftNav
data() {
return{
asideClass:'main-aside'
}
}
};TopNav.vue
<script>
export default {
data() {
return{
collapsed:false, //折疊
// imgshow:'/assets/img/show.png',//有問題
imgshow:require('@/assets/img/show.png'),
imgsq:require('@/assets/img/sq.png')
}
}
}
</script>LeftNav.vue
<script>
export default {
data() {
return{
collapsed:false //折疊
}
}
}
</script>圖片顯示就有問題：因為格式不對！?。?/strong>
<script>
export default {
data() {
return{
collapsed:false, //折疊
imgshow:'/assets/img/show.png'//有問題
}
}
}
</script>這里我們還要 將父建綁定子鍵
<script>
// 導入組件
import TopNav from '@/components/TopNav.vue'
import LeftNav from '@/components/LeftNav.vue'
// 導出模塊
export default {
//父建綁定子鍵
TopNav,LeftNav
data() {
return{
asideClass:'main-aside'
}
}
};
</script>2.5退出
exit(){
this.$router.push("/");
}效果：
總結：
快速構建頁面：ElementUI是一個基于Vue.js的組件庫，它提供了大量常用的UI組件，可以幫助您快速搭建頁面。使用ElementUI的組件，您可以簡單地定義頁面布局、導航欄、表格、表單、圖表等各種元素，從而減少了大量的代碼編寫工作。
響應式設計：ElementUI的組件庫是經(jīng)過響應式設計的，它能夠適應不同屏幕尺寸的設備，如手機、平板和桌面電腦等。這意味著您可以通過ElementUI創(chuàng)建具有良好用戶體驗的自適應頁面，使學者能夠在不同設備上獲得一致的視覺效果和交互體驗。
數(shù)據(jù)模擬與測試：Mock是一種模擬數(shù)據(jù)的工具，它可以幫助您在開發(fā)過程中生成虛擬數(shù)據(jù)，以模擬真實的數(shù)據(jù)接口。使用Mock，您可以快速搭建一個虛擬的后端服務，用于前端頁面的開發(fā)和測試，而不需要依賴真實的后端接口。這使得學者在開發(fā)主頁時可以獨立于后端進行開發(fā)，提高了開發(fā)效率。
提升開發(fā)能力：通過使用ElementUI結合Mock完成主頁的搭建，學者可以提升自己的Vue.js和前端開發(fā)技能。Vue.js是一種流行的JavaScript框架，通過學習和使用Vue.js，您可以深入了解組件化開發(fā)、數(shù)據(jù)綁定、狀態(tài)管理等前端開發(fā)的核心概念和技術，從而提升自己的開發(fā)能力。
到此這篇關于Vue Mock.js介紹和使用與首頁導航欄左側菜單搭建的文章就介紹到這了,更多相關Vue Mock.js首頁導航欄左側菜單內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Element-UI的el-table組件是一個非常強大的表格組件,它提供了多種常見的表格功能,如排序、篩選、分頁、自定義列模板等,這篇文章主要給大家介紹了關于element-ui?el-table表格固定表頭的相關資料,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了基于vue中的scoped坑點解說，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細介紹了Vue AST源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
下面小編就為大家分享一篇解決VUEX兼容IE上的報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue基于localStorage存儲信息代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
Vue3?Axios攔截器封裝成request文件的示例詳解
這篇文章主要介紹了Vue3?Axios攔截器封裝成request文件,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本篇文章主要介紹了vue中computed 和 watch的異同，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue中watch監(jiān)聽器用法之deep、immediate、flush
Vue是可以監(jiān)聽到多層級數(shù)據(jù)改變的,且可以在頁面上做出對應展示,下面這篇文章主要給大家介紹了關于vue中watch監(jiān)聽器用法之deep、immediate、flush的相關資料,需要的朋友可以參考下2022-09-09
webpack+vue+express(hot)熱啟動調試簡單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動調試簡單配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue+golang實現(xiàn)上傳微信頭像功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10