vue2 admin

vue2-admin

Erfahrungsadresse: vue2-admin
Konto: admin Passwort: admin
Wenn Sie auf einen Fehler stoßen oder eine bessere Implementierung haben, können Sie mich gerne kontaktieren (Sie können mir auch eine E-Mail senden, um zu fragen, ob Sie den Code nicht verstehen). E-Mail: [email protected]

Github-Adresse der Vue2-Version: vue2-admin
Es gibt auch ein Gitee-Lager. Ändern Sie einfach Github im obigen Link in Gitee.

---

Enthält Funktionen

1. Erste Animation zum Laden des Bildschirms
2.axios-Paket
3. Router-Berechtigungskontrolle
4. Generieren Sie dynamisch eine seitliche Navigationsleiste basierend auf Berechtigungen
5. Login-Logik
6.Dashboard-Seitenlayout
8. Komponenten, die auf der sekundären Kapselung von el-tooltip basieren, zeigen den Tooltip nur an, wenn die Länge überschritten wird, und unterstützen alle Attribute von el-tooltip. 9. Komponenten, die auf der sekundären Kapselung von el-table basieren, unterstützen alle Attribute von el -Tabelle und Unterstützung für Paging. 10. Symbolauswahlkomponente basierend auf der sekundären El-Icon-Kapselung. 11. Token-berührungslose Aktualisierungsfunktion

---

vue2+element+axios Hintergrundvorlage

Es kapselt die Funktionen nicht zu stark ein und stellt lediglich das grundlegende Seitengerüst und die Routing-Struktur bereit. Die restlichen Funktionen müssen die Benutzer vollständig selbst entwickeln.

Führen Sie Mocks ein, um die getrennte Entwicklung von Front-End und Back-End zu erleichtern.

Über Mockjs

Um den Effekt zu demonstrieren, habe ich auch Mock.js verwendet, um Testdaten in der formalen Umgebung zu generieren. Die offizielle Version wird jedoch nicht verwendet!

Bitte führen Sie es in einer Unterbrechung während des offiziellen Gebrauchs aus.

 npm uninstall mockjs --save

Wenn Sie während der Entwicklung Testdaten benötigen, führen Sie bitte die folgenden Anweisungen aus, um MockJS in der Entwicklungsumgebung zu installieren

 npm install mockjs -D

---

Axios kapseln

Anforderungsheader können in utils/request.js konfiguriert und entsprechend Ihrer tatsächlichen Situation geändert werden.

Konfigurieren Sie die Basis-URL der Anfrage in der API in utils/setting.js

Die allgemeine Umgebung ist .env

Die Entwicklungsumgebung ist .env.development

Die Produktionsumgebung ist .env.produktion

Priorität der Umgebungsvariablen .env.produktion = .env.development > .env

Es gibt einen API-Ordner im Projekt-SRC-Verzeichnis. Erstellen Sie darin eine neue Datei user.js. Diese Datei ist der Kapselungsprozess zum Schreiben der API.

Es wird empfohlen, bei der Verwendung einen Schnittstellentyp in derselben Datei abzulegen, um das Debuggen und die einheitliche Verwaltung zu erleichtern.

Wenn das Format @/api/user.js verwendet wird, wird es bei der Verwendung zuerst eingeführt. Beispielsweise stelle ich die Datei zunächst in @/component/login.vue vor

 import { loginApi } from "@/api/user"
login ( ) {
  let data = this . ruleForm
  loginApi ( data ) . then ( res => {
    console . log ( res )
  } )
} 

---

Router-Berechtigungskontrolle

Generieren Sie dynamisch Routen basierend auf den von der Schnittstelle zurückgegebenen Daten und generieren Sie eine Navigationsleiste basierend auf den Schnittstellendaten.

Es gibt Routenwächter in @/router/beforEach.js. Wenn Sie andere Funktionen implementieren möchten (z. B. Sie können eine bestimmte Seite nur aufrufen, nachdem Sie einen bestimmten Vorgang ausgeführt haben), können Sie diese hinzufügen in router/beforEach.js Fügen Sie der Selfexecution-Funktion die entsprechende Logik hinzu.

Text generiert eine Seitennavigation basierend auf der Route

Konfigurieren Sie das Symbol, den Titel und die Ausblendung der Seitenleiste im Meta-Attribut in @/router/beforEach.js. Bei „hidden:true“ wird die seitliche Navigationsleiste nicht angezeigt.

Die Farbe der Seitenleiste kann durch aside_color und aside_rext_color des Themes in utils/setting geändert werden.

---

VUEX

Platzieren Sie die Modularisierung, Anmeldung und Berechtigungskontrolle von Vuex in einem separaten Modul

Um einen Verlust der Vuex-Datenaktualisierung zu verhindern, führen Sie vuex-persistedstate ein

 // 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
    storage : window . sessionStorage ,
    reducer ( val ) {
        return {
        // 只储存state中的isPC
        isPC : val . user . isPC
        }
    }
} ) ]

Um zu verhindern, dass Benutzer den Sitzungsspeicher manuell ändern, wird ein Überwachungsereignis hinzugefügt

 window . addEventListener ( 'storage' , function ( e ) {
    sessionStorage . setItem ( e . key , e . oldValue )
} ) ; 

---

Tastendrosselung

Es wurde ein grundlegender Code zur Tastenbeschränkung hinzugefügt, und v-preventReClick kann an die Schaltfläche gebunden werden.

 // button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
    inserted ( el , binding ) {
      el . addEventListener ( "click" , ( ) => {
        if ( el . style . pointerEvents !== "none" ) {
          el . style . pointerEvents = "none"
          setTimeout ( ( ) => {
            el . style . pointerEvents = ""
          } , 2000 )
        }
      } )
    }
} ) 

---

anfängliche Include-Seite

Anmeldeseite,

Seite zum Abrufen des Passworts,

404-Seite,

Startseite

---

Vorbereitung für den Einsatz

 npm uninstall mockjs --save

npm install mockjs -D

npm install

Starten Sie ein Projekt

 npm run serve

Projektverpackung

 npm run build

Codeformatierung

 npm run lint

Docker

 docker build -t vue-admin . --no-cache