Komponentenkapselung
Um aufgeblähten Komponentencode zu vermeiden, werden hier die wichtigsten Funktionskomponenten gekapselt, um die Modularität und Einfachheit des Codes sicherzustellen.
Komponentenstruktur
Nach der Kapselung und Rekonstruktion der Komponenten ist die Komponentenstruktur wie in der folgenden Abbildung dargestellt
Codeübersicht
Die Home-Komponente ist vereinfacht und enthält drei Komponenten: Navigation, Kopfzeile und Hauptinhalt.
Home.vue
<Vorlage>
<div class="container">
<!-- Navigationsmenüleiste -->
<MenuBar></MenuBar>
<!--Kopfbereich -->
<HeadBar></HeadBar>
<!-- Hauptinhaltsbereich -->
<Main></Main>
</div>
</template>
<script>
HeadBar aus „./HeadBar/HeadBar“ importieren
Importieren Sie MenuBar aus "./MenuBar/MenuBar"
importiere Main aus „./Main/Main“
Standard exportieren {
Komponenten:{
Kopfleiste,
Menüleiste,
Hauptsächlich
}
};
</script>
<style Scoped lang="scss">
.container {
Position:absolut;
oben: 0px;
links: 0px;
rechts: 0px;
Hintergrund: #4b5f6e;
}
</style>
HeadBar.vue
<Vorlage>
<div class="container">
<!-- Navigationsmenü Anzeigeschalter ausblenden -->
<span class="collapse-switcher" @click.prevent="collapse">
<i class="el-icon-menu"></i>
</span>
<!-- Navigationsmenü -->
<span class="nav-bar">
<el-menu :default-active="activeIndex" class="el-menu-demo" text-color="#fff"
active-text-color="#ffd04b" mode="horizontal" @select="selectNavBar()">
<el-menu-item index="1" @click="$router.push('/')">{
{$t("common.home")}}</el-menu-item>
<el-menu-item index="2">{
{$t("common.doc")}}</el-menu-item>
<el-menu-item index="3">{
{$t("common.msgCenter")}}</el-menu-item>
</el-menu>
</span>
<span class="tool-bar">
<!-- Themenwechsel -->
<ThemePicker class="theme-picker"></ThemePicker>
<!-- Sprachumschaltung -->
<LangSelector class="lang-selector"></LangSelector>
<!-- Benutzerinformationen -->
<el-dropdown class="user-info-dropdown" trigger="hover">
<span class="el-dropdown-link"><img :src="this.userAvatar" /> {
{Benutzername}}</span>
<el-dropdown-menu slots="dropdown">
<el-dropdown-item>{
{$t("common.myMsg")}}</el-dropdown-item>
<el-dropdown-item>{
{$t("common.config")}}</el-dropdown-item>
<el-dropdown-item shared @click.native="logout">{
{$t("common.logout")}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</template>
<script>
Mock aus „@/mock/index.js“ importieren;
ThemePicker aus „@/components/ThemePicker“ importieren
LangSelector aus „@/components/LangSelector“ importieren
Standard exportieren {
Komponenten:{
ThemePicker,
LangSelector
},
Daten() {
zurückkehren {
isCollapse: falsch,
Benutzername: "Louis",
userAvatar: "",
aktivIndex: '1'
};
},
Methoden: {
selectNavBar(key, keyPath) {
console.log(key, keyPath)
},
// Sprachumschaltung
handleCommand(Befehl) {
let array = command.split(':')
let lang = array[0] === '' ? 'zh_cn' : Array[0]
let label = array[1]
document.getElementById("Sprache").innerHTML = label
this.$i18n.locale = lang
},
//Navigationsleiste einklappen
kollabieren: function() {
this.isCollapse = !this.isCollapse;
},
//Abmelden
Abmelden: function() {
var _this = this;
this.$confirm("Zum Beenden bestätigen?", "Eingabeaufforderung", {
Typ: "Warnung"
})
.then(() => {
sessionStorage.removeItem("user");
this.$router.push
("/login");
})
.catch(() => {});
}
},
mount() {
this.sysName = "Ich mag Kitty";
var user = sessionStorage.getItem("user");
if (Benutzer) {
this.userName = Benutzer;
this.userAvatar = require("@/assets/user.png");
}
}
};
</script>
<style Scoped lang="scss">
.container {
Position: absolut;
links: 200px;
rechts: 0px;
Höhe: 60px;
Zeilenhöhe: 60px;
.collapse-switcher {
Breite: 40px;
schweben: links;
Cursor: Zeiger;
Rahmenfarbe: rgba(111, 123, 131, 0,8);
Rand-Links-Breite: 1px;
border-left-style: solide;
Rand-Rechts-Breite: 1px;
border-right-style: solide;
Farbe weiß;
Hintergrund: #504e6180;
}
.nav-bar {
margin-left: auto;
schweben: links;
.das Menü {
Hintergrund: #504e6180;
}
}
.tool-bar {
schweben rechts;
.theme-picker {
padding-right: 10px;
}
.lang-selector {
padding-right: 10px;
Schriftgröße: 15px;
Farbe: #fff;
Cursor: Zeiger;
}
.user-info-dropdown {
Schriftgröße: 20px;
padding-right: 20px;
Farbe: #fff;
Cursor: Zeiger;
img {
Breite: 40px;
Höhe: 40px;
Randradius: 10px;
Rand: 10px 0px 10px 10px;
schweben rechts;
}
}
}
}
</style>
MenuBar.vue
<Vorlage>
<div class="menu-bar-container">
<!-- logo -->
<div class="logo" :class="isCollapse?'menu-bar-collapse-width':'menu-bar-width'">
<img :src="this.logo" /> <div>{
{isCollapse?'':sysName}}</div>
</div>
<!-- Navigationsmenü -->
<el-menu default-active="1-1" :class="isCollapse?'menu-bar-collapse-width':'menu-bar-width'" @open="handleopen" @close="handleclose" @select="handleselect" :collapse="isCollapse">
<el-submenu index="1">
<template slots="title">
<i class="el-icon-location"></i>
<span slots="title">{
{$t("sys.sysMng")}}</span>
</template>
<el-menu-item index="1-1" @click="$router.push('user')">{
{$t("sys.userMng")}}</el-menu-item>
<el-menu-item index="1-2" @click="$router.push('dept')">{
{$t("sys.deptMng")}}</el-menu-item>
<el-menu-item index="1-3" @click="$router.push('role')">{
{$t("sys.roleMng")}}</el-menu-item>
<el-menu-item index="1-4" @click="$router.push('menu')">{
{$t("sys.menuMng")}}</el-menu-item>
<el-menu-item index="1-5" @click="$router.push('log')">{
{$t("sys.logMng")}}</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slots="title">
<i class="el-icon-location"></i>
<span slots="title">{
{$t("sys.sysMonitor")}}</span>
</template>
</el-submenu>
<el-menu-item index="3" deaktiviert>
<i class="el-icon-document"></i>
<span slots="title">{
{$t("sys.nav3")}}</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slots="title">{
{$t("sys.nv4")}}</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
Standard exportieren {
Daten() {
zurückkehren {
isCollapse: falsch,
sysName: "",
Logo: "",
};
},
Methoden: {
handleopen() {
console.log('handleopen');
},
handleclose() {
console.log('handleclose');
},
handleselect(a, b) {
console.log('handleselect');
}
},
mount() {
this.sysName = "Ich mag Kitty";
this.logo = require("@/assets/logo.png");
}
};
</script>
<style Scoped lang="scss">
.menu-bar-container {
.das Menü {
Position:absolut;
oben: 60px;
unten: 0px;
Textausrichtung: links;
}
.logo {
Position:absolut;
oben: 0px;
Höhe: 60px;
Zeilenhöhe: 60px;
Hintergrund: #4b5f6e;
img {
Breite: 40px;
Höhe: 40px;
Randradius: 0px;
Rand: 10px 10px 10px 10px;
schweben: links;
}
div {
Schriftgröße: 22px;
Farbe weiß;
Textausrichtung: links;
}
}
.menu-bar-width {
Breite: 200px;
}
.menu-bar-collapse-width {
Breite: 65px;
}
}
</style>
Hauptansicht
<Vorlage>
<div class="container">
<el-breadcrumb separator="/" class="breadcrumb">
<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
<a href="www.baidu.com">{
{ item.name }}</a>
</el-breadcrumb-item>
</el-breadcrumb>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
</template>
<script>
Standard exportieren {
Daten() {
zurückkehren {
};
},
Methoden: {
},
mount() {
}
};
</script>
<style Scoped lang="scss">
.container {
Position: absolut;
oben: 60px;
unten: 0px;
links: 200px;
rechts: 0px;
.breadcrumb {
Polsterung: 10px;
Rahmenfarbe: rgba(38, 86, 114, 0,2);
Rand-Bottom-Breite: 1px;
border-bottom-style: solide;
Hintergrund: rgba(138, 158, 170, 0,2);
}
}
</style>
Auch die internationale Sprachumschaltung wurde in der Komponente LangSelector gekapselt
LangSelector/index.js
<Vorlage>
<el-dropdown class="lang-selector" @command="handleCommand">
<span class="el-dropdown-link">
<span id="Sprache">中文</span><i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slots="dropdown">
<el-dropdown-item command="zh_cn:中文">中文</el-dropdown-item>
<el-dropdown-item command="en_us:English">English</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
Standard exportieren {
Methoden: {
// Sprachumschaltung
handleCommand(Befehl) {
let array = command.split(':')
let lang = array[0] === '' ? 'zh_cn' : Array[0]
let label = array[1]
document.getElementById("Sprache").innerHTML = label
this.$i18n.locale = lang
}
}
}
</script>
Nach der Kapselung und Rekonstruktion der Komponenten wird gleichzeitig die Routing-Konfiguration geändert.
Vue aus „vue“ importieren
Importieren Sie den Router aus „vue-router“.
Login aus '@/views/Login' importieren
Importieren Sie NotFound aus '@/views/404'
Startseite aus '@/views/Home' importieren
Importieren Sie Intro aus '@/views/Intro'
Benutzer aus „@/views/SysMng/User“ importieren
Importieren Sie Dept aus '@/views/SysMng/Dept'
Importieren Sie die Rolle aus '@/views/SysMng/Role'
Importieren Sie das Menü aus „@/views/SysMng/Menu“.
Importieren Sie das Protokoll aus „@/views/SysMng/Log“.
Vue.use(Router)
const router = neuer Router({
Routen: [
{
Pfad: '/',
Name: 'Homepage',
Komponente: Zuhause,
Kinder: [
{ Pfad: '', Komponente: Intro, Name: 'Systemeinführung' },
{ Pfad: '/user', Komponente: Benutzer, Name: 'Benutzerverwaltung' },
{ Pfad: '/dept', Komponente: Dept, Name: 'Organisationsmanagement' },
{ Pfad: '/role', Komponente: Rolle, Name: 'Rollenverwaltung' },
{ Pfad: '/menu', Komponente: Menü, Name: 'Menüverwaltung' },
{ Pfad: '/log', Komponente: Log, Name: 'Log Management' }
]
},
{
Pfad: '/login',
Name: 'Anmelden',
Komponente: Anmelden
}
,{
Pfad: '/404',
Name: 'notFound',
Komponente: NotFound
}
]
})
router.beforeEach((to, from, next) => {
// Nach erfolgreicher Anmeldung an der Anmeldeschnittstelle werden die Benutzerinformationen in der Sitzung gespeichert
// Die Existenzzeit ist der Sitzungslebenszyklus und läuft ab, wenn die Seite geschlossen wird.
let user = sessionStorage.getItem('user');
if (to.path == '/login') {
// Wenn Sie auf die Anmeldeschnittstelle zugreifen und die Benutzersitzungsinformationen vorhanden sind, bedeutet dies, dass Sie sich angemeldet haben und zur Startseite springen.
if(Benutzer) {
next({ Pfad: '/' })
} anders {
nächste()
}
} anders {
// Wenn Sie auf die Nicht-Anmeldeschnittstelle zugreifen und die Benutzersitzungsinformationen nicht vorhanden sind, bedeutet dies, dass Sie nicht angemeldet sind und zur Anmeldeschnittstelle springen.
if (!user) {
next({ Pfad: '/login' })
} anders {
nächste()
}
}
})
Standardrouter exportieren
Testeffekt
Nach der Kapselung und Rekonstruktion unterscheidet sich die Startschnittstelle kaum von zuvor.
