Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能

更新時(shí)間：2022年09月15日 10:48:40 作者：_Leaf1217

這篇文章主要介紹了Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能，mockjs是用來模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時(shí)獨(dú)立開發(fā)。我們可以使用真實(shí)的url，mockjs可以攔截ajax請求，返回設(shè)定好的數(shù)據(jù)

一、mock.js的使用

mock.js的使用步驟

① 下載依賴 npm install mock -d（開發(fā)環(huán)境使用）

② 引入到main.js中使用

③ 添加默認(rèn)接口數(shù)據(jù)

④ 綁定接口數(shù)據(jù)

1、安裝mock依賴

npm install mock -D //只在開發(fā)環(huán)境使用

在項(xiàng)目的根目錄執(zhí)行這條命令：

下載完成后，項(xiàng)目文件package.json中的devDependencies就會(huì)加上一個(gè)mock依賴；

2、添加開發(fā)環(huán)境及生產(chǎn)環(huán)境的配置

我們在config文件夾下的dev.env.js、prod.env.js兩個(gè)文件里添加配置；

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'true'
})

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  MOCK: 'false'
}

3、引入到main.js

//開發(fā)環(huán)境下才會(huì)引入mockjs
//process.env.MOCK 為 false，那么require('@/mock')是否還執(zhí)行？
//答案是不執(zhí)行 (process.env.MOCK在生產(chǎn)環(huán)境下為false)
process.env.MOCK && require('@/mock')

第三步和第四步就需要建立一個(gè)這樣的目錄結(jié)構(gòu)：

在src目錄下創(chuàng)建mock目錄，定義mock主文件index.js，并在該文件中定義攔截路由配置；

json中的js文件就是添加默認(rèn)接口數(shù)據(jù)

而index.js就是對應(yīng)綁定接口數(shù)據(jù)

// const loginInfo = {
// 	code: -1,
// 	message: '密碼錯(cuò)誤'
// }
//使用mockjs的模板生成隨機(jī)數(shù)據(jù)
const loginInfo = {
	'code|0-1': 0,
	'msg|3-10': 'msg'
}
export default loginInfo;

/mock/index.js

import Mock from 'mockjs' //引入mockjs，npm已安裝
import action from '@/api/action' //引入請求地址
//全局設(shè)置：設(shè)置所有ajax請求的超時(shí)時(shí)間，模擬網(wǎng)絡(luò)傳輸耗時(shí)
Mock.setup({
	// timeout: 400  //延時(shí)400s請求到數(shù)據(jù)
	timeout: 200 - 400 //延時(shí)200-400s請求到數(shù)據(jù)
})
//引入登錄的測試數(shù)據(jù)，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)
// Mock.mock(s1, /post|get/i, loginInfo)

最后我們就可以運(yùn)行一下前端項(xiàng)目，不運(yùn)行后臺(tái)項(xiàng)目，看看上一篇文章的功能還是否可以使用。

這樣隨機(jī)生成的數(shù)據(jù)就讓登錄有時(shí)候成功，有時(shí)候失敗，但是我們的功能已經(jīng)成功實(shí)現(xiàn)，沒有運(yùn)行后臺(tái)代碼的時(shí)候也能造數(shù)據(jù)進(jìn)行前端測試！

二、前臺(tái)主頁面的搭建

2.1 準(zhǔn)備相關(guān)組件

Leaf這里直接把準(zhǔn)備好的三個(gè)組件放上，需要的朋友可以自行拿走，放到項(xiàng)目的components中；

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 {
components:{
      TopNav,LeftNav
    },
    data(){
      return {
        asideClass:'main-aside'
      }
    }
};
</script>
<style scoped>
.main-container {
height: 100%;
width: 100%;
box-sizing: border-box;
}
.main-aside-collapsed {
/* 在CSS中，通過對某一樣式聲明! important ，可以更改默認(rèn)的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" background-color="#334157"
 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
<!-- <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 {
    data(){
      return {
        collapsed:false
      }
    }
}
</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  rel="external nofollow"  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">設(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 {
data() {
      return {
        collapsed: false,
        imgshow: require('@/assets/img/show.png'),
        imgsq:require('@/assets/img/sq.png')
      }
    }
}
</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 配置路由與組件的關(guān)系

然后我們就把這些相關(guān)組件與路由的關(guān)系配置到router文件夾下的index.js中；

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        }
      ]
    }
  ]
})

2.3 導(dǎo)入圖片

在src目錄下的assets目錄創(chuàng)建img目錄，導(dǎo)入頁面所需圖片；

2.4 測試

我們重新運(yùn)行項(xiàng)目看看；

三、左側(cè)菜單的收縮功能

3.1 定義一個(gè)總線

我們在main.js中定義一個(gè)變量，為總線；

main.js

new Vue({
  el: '#app',
  router,
  data() {
    return {
      //在Vue根實(shí)例中定一個(gè)變量，這個(gè)變量就是vue實(shí)例，它就是總線
      //props this.$emit
      Bus:new Vue({})
    }
  },
  components: { App },
  template: '<App/>'
})

3.2 改變收縮圖標(biāo)的樣式

1、我們?yōu)閳D標(biāo)添加一個(gè)點(diǎn)擊方法：

methods: {
  doToggle(){
    this.collapsed = !this.collapsed
    //將 this.collapsed 放到總線上
    this.$root.Bus.$emit("collapsed-side",this.collapsed);
  }
}

測試一下沒有問題；

2、在LeftNav.vue中使用鉤子函數(shù)，從總線上取出this.collapsed變量

LeftNav.vue

<script>
export default {
    data(){
      return {
        collapsed:false
      }
    },
    created() {
      //從總線上取出this.collapsed變量
      this.$root.Bus.$on("collapsed-side",v => {
        this.collapsed = v;
      });
    }
}
</script>

然后我們測試一下：

接著我們還要改變一下底部的樣式：

在AppMain.vue中使用鉤子函數(shù)

created() {
  //從總線上取出this.collapsed變量
  this.$root.Bus.$on("collapsed-side",v => {
    this.asideClass = v ? 'main-aside-collapsed' : 'main=aside';
  });
}

測試一下：

總結(jié)一下：

主頁面布局

1、導(dǎo)入圖片

2、導(dǎo)入AppMain.vue、LeftNav.vue、TopNav.vue

3、AppMain.vue中注冊使用組件

4、router/index.js中添加路由與組件的映射

5、修改添加組件中需要用到的變量

總線

1、在main.js中創(chuàng)建一個(gè)變量，這個(gè)變量就是vue實(shí)例

2、在子組件中通過this.$root.Bus.$emit注冊事件進(jìn)行傳參

3、在需要用到總線中變量時(shí)，通過this.$root.Bus.$on獲取總線中的變量值

四、退出功能

4.1 添加點(diǎn)擊方法

在TopNav.vue中為退出按鈕添加一個(gè)方法：

methods: { exit(){ this.$router.push({path:'/Login'}) } }

4.2 測試

點(diǎn)擊退出

返回登錄頁面

到此這篇關(guān)于Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能的文章就介紹到這了,更多相關(guān)Vue mock.js模擬數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能

目錄

一、mock.js的使用

mock.js的使用步驟

1、安裝mock依賴

2、添加開發(fā)環(huán)境及生產(chǎn)環(huán)境的配置

3、引入到main.js

二、前臺(tái)主頁面的搭建

2.1 準(zhǔn)備相關(guān)組件

2.2 配置路由與組件的關(guān)系

2.3 導(dǎo)入圖片

2.4 測試

三、左側(cè)菜單的收縮功能

3.1 定義一個(gè)總線

3.2 改變收縮圖標(biāo)的樣式

四、退出功能

4.1 添加點(diǎn)擊方法

4.2 測試

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能

目錄

一、mock.js的使用

mock.js的使用步驟

1、安裝mock依賴

2、添加開發(fā)環(huán)境及生產(chǎn)環(huán)境的配置

3、引入到main.js

二、前臺(tái)主頁面的搭建

2.1 準(zhǔn)備相關(guān)組件

2.2 配置路由與組件的關(guān)系

2.3 導(dǎo)入圖片

2.4 測試

三、左側(cè)菜單的收縮功能

3.1 定義一個(gè)總線

3.2 改變收縮圖標(biāo)的樣式

四、退出功能

4.1 添加點(diǎn)擊方法

4.2 測試

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

一、mock.js的使用

1、安裝mock依賴

3、引入到main.js

三、左側(cè)菜單的收縮功能