Vue Element Front-End-Anwendungsentwicklung, dynamische Menü- und Routing-Assoziationsverarbeitung

Überblick

In vielen Systemen, die ich entwickelt habe, darunter das Winform-Hybrid-Framework, das Bootstrap-Entwicklungsframework und andere Produktreihen, tendiere ich dazu, Menüs dynamisch zu konfigurieren und die Menüberechtigungen und Seitenberechtigungen der entsprechenden Rollen zu verwalten, um die Kontrolle des Systems über die Benutzerberechtigungen zu realisieren. Menüs enthalten im Allgemeinen Name, Symbol, Reihenfolge, URL-Verbindung und andere zugehörige Informationen. Für VUE+Element-Frontend-Anwendungen sollte das Prinzip ähnlich sein. Dieser Aufsatz stellt die Kombination aus dynamischer Menükonfiguration auf dem Server und der zugehörigen Verarbeitung des lokalen Routings vor, um eine dynamische Menüwartung und Anzeigeverarbeitung zu erreichen.

1. Menü- und Routing-Verarbeitung

Da das Vue-Frontend auch das Konzept des Routings einführen muss, ist Routing die entsprechende Pfadsammlung, auf die unser Frontend zugreifen kann. Routing definiert viele komplexe Informationen, die normale Menüs nicht haben, aber oft können wir diese nicht nach Belieben ändern. Daher basiert unser Ansatz auf der lokal konfigurierten Routenliste und wir verwenden die Back-End-Konfigurationsmethode für das Menü. Das Frontend erhält die Menüliste dynamisch über die Schnittstelle. Durch die Entsprechung zwischen dem Menünamen und dem Routennamen verwenden wir die Menüsammlung als Referenz, filtern dann die Liste aller lokalen statischen Routen, erhalten dann die Routenliste, auf die der Benutzer zugreifen kann, und legen die dynamische Route für das Frontend fest, wodurch die Schnittstelle entsprechend der Benutzerrolle/-berechtigung geändert wird. Ändern Sie die Menüoberfläche des Benutzers und die zugängliche Routensammlung.

Der ungefähre Betriebsablauf der Menüführung ist wie folgt

Nachfolgend werden mehrere Konzepte für dynamische Menüs, lokale Routen, Menünavigation und barrierefreie Routen in der Front-End-Schnittstelle dargestellt.

Bei der Front-End-Schnittstellenverarbeitung zeigen wir dynamische Menüinformationen über die Element-Schnittstellenkomponente an und kombinieren die Beziehung zwischen Menü und Routing, um den Prozess des Menüsprungs zur entsprechenden Ansicht zu realisieren.

2. Menü und Routenliste

Gemäß der vorherigen Einführung haben wir einige dynamische Menüinformationen definiert, die vom Server zurückgegeben werden. Diese Menüinformationen sind eine Sammlung von JSON-Objekten, wie in der folgenden Schnittstelle gezeigt.

[
  {
    ID: '1',
    pid: "-1",
    Text: 'Homepage',
    Symbol: „Dashboard“,
    Name: "Armaturenbrett"
  },
  {
    ID: '2',
    pid: "-1",
    Text: 'Produktliste',
    Symbol: 'Tabelle',
    Name: "Produkt"
  },
  {
    ID: '3',
    pid: "-1",
    Text: 'Menü der ersten Ebene',
    Symbol: "Beispiel",
    Kinder: [
      {
        ID: '3-1',
        pid: "3",
        Text: 'Sekundäres Menü 1',
        Name: "Symbol",
        Symbol: „Beispiel“
      },
      {
        ID: '3-2',
        pid: "3",
        Text: 'Sekundäres Menü 2',
        Symbol: 'Baum',
        Kinder: [
          {
            ID: '3-2-1',
            pid: '3-2',
            Text: 'Ebene 3 Menü 1',
            Name: "Formular",
            Symbol: „Formular“
          },
          {
            ID: '3-2-2',
            pid: '3-2',
            Text: 'Ebene 3 Menü 2',
            Name: 'menu1-1',
            Symbol: „Formular“
          },
          {
            ID: '3-2-3',
            pid: '3-2',
            Text: 'Ebene 3 Menü 3',
            Name: 'Menü1-2',
            Symbol: „Formular“
          },
          {
            ID: '3-2-4',
            pid: '3-2',
            Text: 'Ebene 3 Menü 4',
            Name: 'Menü1-3',
            Symbol: „Formular“
          }
        ]
      }
    ]
  },
  {
    ID: '99',
    pid: "-1",
    Text: 'Unternehmenswebsite',
    Symbol: 'Tabelle',
    Name: "externer Link"
  }
]

Das JSON des Menüs wird dynamisch basierend auf der Rolle abgerufen. Unterschiedliche Rollen entsprechen unterschiedlichen Menüsätzen. Das Menü ist eine mehrstufige Baumliste, die eine unendliche Anzahl von Anzeigeebenen definieren kann. Die JSON-formatierte Ansicht wird unten angezeigt.

Das Vue-Frontend muss alle Routen der Frontend-Seiten initialisieren und definieren, einschließlich Informationen wie dem Layout der Routing-Seite.

Wir können alle Routing-Informationen, die dem Front-End entsprechen, in einer JS-Datei definieren, wie unten gezeigt

// Definiere alle Routen dieses Systems. Die spezifischen Routen werden durch das Menü gefiltert data export const asyncRoutes = {
  'Armaturenbrett': {
    Pfad: '/dashboard',
    Komponente: Layout,
    Kinder: [{
      Pfad: 'Dashboard',
      Name: "Dashboard",
      Komponente: () => import('@/views/dashboard/index')
    }]
  },
  'Produkt': {
    Pfad: '/Produkt',
    Komponente: Layout,
    Kinder: [{
      Pfad: '/Produkt',
      Name: "Produkt",
      Komponente: () => import('@/views/Product/index')
    }]
  },

  .............................. //Teil 'icon' weglassen: {
    Pfad: '/icon',
    Komponente: Layout,
    Kinder: [{
      Pfad: '/icon',
      Name: "Symbol",
      Komponente: () => import('@/views/icons/index')
    }]
  },

  'externer Link': {
    Pfad: 'http://www.iqidi.com',
    Name: "externer Link"
  }
}

Die Routen müssen hier nicht verschachtelt sein, da die verschachtelte Beziehung für die Menüanzeige definiert werden muss.

Da unser System außerdem normal laufen muss, bevor wir uns anmelden und das dynamische Backend-Menü anfordern können, müssen wir einige grundlegende Routing-Informationen voreinstellen, z. B. die Anmeldeoberfläche, die Umleitungsseite, den Link zur Startseite usw. Daher können wir zwei Routing-Objekte trennen, um diese Informationen separat zu verwalten.

Für die Verwaltung von Routen müssen wir standardmäßig Routen erstellen, Routen zurücksetzen und dynamisch neue Routen festlegen. Wir kapseln mehrere Funktionen, um diese Vorgänge abzuwickeln.

const createRouter = () => neuer Router({
  // Modus: „Verlauf“, // Serviceunterstützung erforderlich
  scrollBehavior: () => ({ y: 0 }),
  Routen: konstanteRouten
})

const router = createRouter()

// Setzt die Route zurück Exportfunktion resetRouter() {
  const neuerRouter = createRouter()
  router.matcher = newRouter.matcher // Router zurücksetzen
}

Nachdem der Benutzer die Anmeldeschnittstelle durchlaufen hat, werden die dynamischen Routing-Informationen über die entsprechende Aktion abgerufen (beachten Sie, dass hier zuerst das dynamische Menü abgerufen und dann das lokale Routing gefiltert wird, bei dem es sich um die dynamischen Routing-Informationen handelt). Nach dem Abrufen des dynamischen Routings kann die Routing-Sammlung festgelegt werden, auf die das Front-End zugreifen kann, wie im folgenden Code gezeigt.

Mit diesen neuen Routen kann das Menü des Front-End-Systems normal funktionieren. Andernfalls kann, selbst wenn das Menü auf der Benutzeroberfläche angezeigt wird, die jeweilige Ansichtsseite nicht aufgerufen werden und es wird auf die 404-Seite gesprungen, da die Route nicht verfügbar ist.

3. Abwicklung des Login-Prozesses

Im vorherigen Abschnitt wurde der Routing-Prozess kurz vorgestellt. Eigentlich sollten wir über Routing-Informationen von der Anmeldeoberfläche aus sprechen.

Am Beispiel der Anmeldeoberfläche müssen nach der Anmeldung des Benutzers zunächst das Benutzerkonto und das Kennwort überprüft werden. Wenn dies erfolgreich ist, wird weiterhin das dem Benutzer entsprechende dynamische Menüset angefordert und über das Routing zur entsprechenden Seite oder Homepage gewechselt.

Im Modul Store/Modules/user.js wird die entsprechende Aktion zur Anmeldeverarbeitung wie folgt definiert

Wir werden hier den Prozess der Benutzeranmeldungsüberprüfung und Tokenverarbeitung ignorieren und uns auf den Prozess der dynamischen Menüanforderung und Routenfestlegung konzentrieren.

Bevor wir im Prozess die Routenankunft abfangen müssen, definieren wir die entsprechende Anforderungslogik für Routeninformationen wie unten gezeigt.

router.beforeEach(async(zu, von, weiter) => {

Im entsprechenden Modul, das die Menüweiterleitung handhabt, definieren wir einen Status, der diese wichtigen Informationen übermittelt, wie in der folgenden Statusdefinition gezeigt.

konstanter Zustand = {
  Menüelemente: [],
  Routen: [],
  Routes hinzufügen: [],
  asyncRoutes: asyncRoutes
}

// Definiert die Mutation von Routen und Menüs
const Mutationen = {
  SET_ROUTES: (Status, Routen) => {
    // var Liste = Route konvertieren(Routen)
    routes.push({ path: '*', redirect: '/404', hidden: true }) // Dies ist die Standardfehlerroute state.addRoutes = routes
    Zustand.Routen = [].concat(Routen) // konstanteRouten.concat(Routen)
  },
  SET_MENUS: (Status, Menüs) => {
    state.menuItems = Menüs
  }
}

// Definiert die Aktionsverarbeitung zum Generieren dynamischer Routen const actions = {
  Routes generieren({ commit }, Rollen) {
    gib ein neues Versprechen zurück (Auflösen => {
      getMenus().then(res => {
        const menus = res.data || [] // Menüinformationen einheitlich über die Schnittstelle abrufen const routes = []

        Menüs.fürJedes(Element => {
          filterRoutes(Routen, Element)
        })
        console.log(routes) // Routen drucken commit('SET_ROUTES', routes)
        commit('SET_MENUS', Menüs)
        auflösen (Routen)
      });
    })
  }
}

Geben Sie abschließend die entsprechenden Informationen zur JS-Definitionsmodulklasse zurück.

Standard exportieren {
  Namespace: wahr,
  Zustand,
  Mutationen,
  Aktionen
}

Bei der Front-End-Schnittstellenverarbeitung zeigen wir dynamische Menüinformationen über die Element-Schnittstellenkomponente an und kombinieren die Beziehung zwischen Menü und Routing, um den Prozess des Menüsprungs zur entsprechenden Ansicht zu realisieren.

Werfen wir einen Blick auf den dynamischen Menüeffekt, der von der Schnittstelle generiert wird.

Da die dynamische Anzeige des Menüs und die dynamische Routenführung zusammenarbeiten, ist es möglich, das dynamische Menü auf dem Frontend anzuzeigen und die zugänglichen Routen entsprechend dem Menüsatz zu aktualisieren. Die Kombination der beiden kann die entsprechende Ansichtsseite problemlos öffnen.

Lassen Sie uns noch einmal überprüfen. Der ungefähre Betriebsablauf der Menüführung ist wie folgt

Oben finden Sie detaillierte Informationen zur Verarbeitung der Zuordnung von dynamischem Menü und Routing bei der Entwicklung von Front-End-Anwendungen von Vue Element. Weitere Informationen zum dynamischen Menü und Routing von Vue Element finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!