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