Lösung zur Codeaufteilung im Vue-Projekt

Hintergrund

Da das vorherige Datenbank-Firewall-Produkt und das Datenbank-Audit-Produkt denselben Codesatz verwendeten, wurde die Redundanz und Kopplung der Codes mit zunehmenden Funktionsunterschieden der beiden Produkte immer höher. Um die spätere Wartung und das Hinzufügen neuer Funktionen zu erleichtern, wurde die Codestruktur basierend auf dem ursprünglichen Projektcode aufgeteilt.

Hinweis: Diese Aufteilung teilt nur die Teile auf, die aufgeteilt werden können. Einige Module, wie z. B. Regeln und Über uns, werden nicht aufgeteilt. Erstens sind einige Module sehr einfach und müssen nicht aufgeteilt werden. Zweitens sind die Originalcodes einiger Module zu gekoppelt und können nicht aufgeteilt werden. Wenn sie aufgeteilt werden sollen, ist ein großer Aufwand erforderlich, um die Codes zu sortieren, und das Backend muss auch bei der Aufteilung mitarbeiten.

Zweck

Notieren Sie diesen Code-Aufteilungsplan, damit sich nachfolgende Entwickler schnell mit der Projektstruktur vertraut machen können.

Vor der Spaltung

Prozessdesign

Der Vorgang der Unterscheidung zwischen Review- und Firewall-Funktionen wurde vor der Projektaufteilung in der Abbildung oben dargestellt.

Beim Zugriff auf das System wird zuerst die Einstiegsdatei main.js und dann die Anmeldeseite login.vue geladen. Beim Laden der Anmeldeseite wird der Produktmodus abgerufen und in session.storage.platformType gespeichert. Anschließend meldet sich der Benutzer beim System an und ruft die entsprechende Seite auf. Diese Seite enthält sowohl Datenprüfungs- als auch Firewall-Funktionen. Die anzuzeigende Funktion wird anhand des in session.storage.platformType gespeicherten Werts bestimmt.

Entwurf der Verzeichnisstruktur

Die Verzeichnisstruktur vor der Projektaufteilung ist in der Abbildung oben dargestellt.

Diese Verzeichnisstruktur ist das Basisverzeichnis beim Initialisieren eines Vue-Projekts. Anhand der Verzeichnisstruktur lässt sich grundsätzlich nicht erkennen, dass das Projekt zwei unterschiedliche Produkte enthält, und es ist auch nicht bekannt, welcher Teil der Dateien in unterschiedlichen Produktmodi geladen wird. Die Struktur ist nicht klar.

Probleme

Durch Analyse können wir feststellen, dass es mit dem aktuellen Systemprozess und der Verzeichnisstruktur viele Probleme gibt, die wie folgt zusammengefasst werden können:

1. Der Produktmodus wird abgerufen, wenn die Anmeldeseite geladen wird. Wenn die Anmeldeseite geladen wird, der Produktmodus jedoch nicht abgerufen wurde oder nicht abgerufen werden kann, sind die auf der Anmeldeseite angezeigten Produktinformationen möglicherweise falsch.
2. Jedes Mal, wenn Sie eine bestimmte Seite aufrufen, müssen Sie, sofern diese sowohl Datenprüfungs- als auch Firewall-Funktionen enthält, erneut feststellen, ob es sich bei der aktuellen Funktion um eine Datenprüfung oder eine Firewall handelt.
3. Die Verzeichnisstruktur ist nicht klar und es ist unklar, welche Module allgemeine Module sind, welche Module speziell für die Datenprüfung sind und welche Module speziell für die Firewall sind.
4. Schlechte Wartbarkeit und Skalierbarkeit. Der Code für die Datenüberprüfung und der Code für die Firewall sind in einer Datei gemischt. Wenn Sie den Code ändern, müssen Sie ihn noch einmal von Anfang an lesen, um zu wissen, welcher Code zur Datenüberprüfung und welcher zur Firewall gehört. Wenn Sie eine Funktion hinzufügen möchten, müssen Sie weiterhin logische Urteile hinzufügen, und der Code wird immer aufgeblähter.
5. Die Geschäftslogik ist verwirrend und für die Kommunikation mit dem Backend wird dieselbe Schnittstelle verwendet.
   

Nach der Spaltung

Prozessdesign

Nachdem das Projekt aufgeteilt wurde, wird der Prozess der Unterscheidung zwischen den Überprüfungs- und Firewall-Funktionen in der obigen Abbildung dargestellt.

Laden Sie beim Zugriff auf das System zuerst die Eingabedatei main.js, die die mit der Routenabfangung verbundene Logik enthält. Wenn während der Routenabfangung kein Produktmodus vorhanden ist, müssen Sie zuerst den Produktmodus abrufen, da Sie sonst abgefangen werden und nicht in das System gelangen können. Nach dem Abrufen des Produktmodus werden die entsprechende Anmeldeseite, Routing-Konfiguration, Schnittstellenanforderung usw. entsprechend dem aktuellen Produktmodus registriert. Nach Abschluss der Registrierung sollte jeder Besuch einer bestimmten Seite ein unabhängiges Modul sein.

Entwurf der Verzeichnisstruktur

Die Verzeichnisstruktur nach der Aufteilung des Projekts ist in den beiden obigen Abbildungen dargestellt.

Nachdem die Verzeichnisstruktur aufgeteilt wurde, können Sie die Dateien verschiedener Produkte deutlich getrennt sehen. Beginnend mit der Eingabedatei wird nach dem Abfangen des Routings die angegebene Anmeldeseite geladen und anschließend die vom entsprechenden Produkt benötigten Dateien in die öffentliche Datei zusammengeführt. Zum Beispiel: HTTP-Anfrage, Routing-Konfiguration usw. Dadurch lädt das Programm nur die Dateien, die es benötigt.

Gelöste Probleme

Nach der Neugestaltung wurden einige im aktuellen Projekt bestehende Probleme gelöst:

1. Vor dem Laden der Anmeldeseite muss der Produktmodus durch Routing-Abfangen abgerufen werden, bevor das System aufgerufen wird. Die Anmeldeseite wird geladen, nachdem der Produktmodus abgerufen wurde, und es tritt kein Problem einer falschen Anzeige der Produktinformationen auf.
2. Erst wenn Sie das System zum ersten Mal aufrufen oder die Seite aktualisieren, wird der Produktmodus erneut abgerufen und die dem Produktmodus entsprechenden Dateien werden zusammengeführt. Die zusammengeführten Dateien sind die geteilten Dateien, und es muss in der Datei nicht erneut bestimmt werden, ob es sich um die Datenprüfungsfunktion oder die Firewall-Funktion handelt.
3. Die Verzeichnisstruktur ist klar und Firewall-bezogene Funktionsmoduldateien werden im Ordner views-fw abgelegt.
4. Es verbessert die Wartbarkeit und Skalierbarkeit des Projekts und reduziert die Kopplung des Codes. Der Code für die Datenüberwachung und der Code für die Firewall wurden grundsätzlich getrennt. Wenn Sie eine Firewall-Funktion hinzufügen möchten, müssen Sie nur die Datei des entsprechenden Funktionsmoduls im Firewall-bezogenen Ordner hinzufügen.
5. Die Geschäftslogik ist klar und für die Kommunikation mit dem Backend werden unterschiedliche Schnittstellen verwendet. Die von den öffentlichen Modulen verwendeten Schnittstellen bleiben unverändert. Die für die Audit-Funktion eindeutigen Schnittstellen haben das Präfix „Audit“ an die URL angehängt, und die für die Firewall eindeutigen Schnittstellen haben das Präfix „Firewall“ an die URL angehängt.
   

Schlüsselcode

/**
 * @Name: main.js
 * @Autor: cqfeng
 * @Description: Projekteintrag-JS-Datei* @MainFunction: Einige globale Ressourcen importieren und registrieren**/
//...Code ausgelassen...
// Routenabfangen mit globalem Navigationsschutz beforeEach
router.beforeEach(async (zu, von, weiter) => {
 // Wenn kein Produktmodus vorhanden ist, holen Sie sich zuerst den Produktmodus, if (!store.state.productMode.productMode) {
 warte auf store.dispatch('productMode/SET_PRODUCT_MODE');
 }
//...Code ausgelassen...

/**
 * @Name: produktmodus.js
 * @Autor: cqfeng
 * @Description: Produktmodusbezogene Logikverarbeitungsdatei* @MainFunction: Speichert den aktuellen Produktmodus, konfiguriert die Produktanmeldeseite, HTTP-Anforderung und andere Ressourcen entsprechend den verschiedenen Produktmodi**/
importiere Vue von „vue“;
importiere portService von '@/assets/js/service/http/http'; // Axios-Anfrageimportiere Router von '@/router/index'; // Standard-Routingkonfiguration, dynamische Routingkonfigurationimportiere httpAAS von '@/assets/js/service/http/http-aas'; // HTTP-Anfrage eindeutig für Datenprüfungimportiere httpFW von '@/assets/js/service/http/http-fw'; // HTTP-Anfrage eindeutig für Firewallimportiere globalConstant von '@/assets/js/const/global-constant'; // globale Projektkonstanteexportiere Standard {
 Namespace: wahr,
 Zustand: {
 productMode: '', // Produktmodus, der beim Aufrufen des Systems oder Aktualisieren der Seite abgerufen wird},
 Mutationen:
 // Produktmodus ändern changeProductMode: function (state, value) {
  Status.Produktmodus = Wert;
 },
 },
 Aktionen: {
 asynchron SET_PRODUCT_MODE({ Commit, Status }) {
  let res = warte auf portService.getProductMode();
  wenn (res.data.code === 0) {
  commit('Produktmodus ändern', res.data.data.produktmodus);
  }
  // Wenn es ein digitales Produkt ist, if (state.productMode === globalConstant.COMMON.AAS) {
  // Richten Sie die Produkt-Anmeldeseite ein router.addRoutes([
   {
   Pfad: '/login',
   Name: 'Anmelden',
   Komponente: auflösen => {
    erfordern(['@/views/login.vue'], lösen);
   },
   }
  ]);

  //HTTP-Anfragen zusammenführen und an den Vue-Prototyp anhängen Vue.prototype.portService = Object.assign(portService, httpAAS);
  }
  // Wenn es ein Firewall-Produkt ist, sonst wenn (state.productMode === globalConstant.COMMON.DBSG) {
  // Richten Sie die Produkt-Anmeldeseite ein router.addRoutes([
   {
   Pfad: '/login',
   Name: 'Anmelden',
   Komponente: auflösen => {
    erfordern(['@/views/views-fw/login.vue'], lösen);
   },
   }
  ]);

  //HTTP-Anfragen zusammenführen und an den Vue-Prototyp anhängen Vue.prototype.portService = Object.assign(portService, httpFW);
  }
 }
 }
};

Zusammenfassen

Nach der Aufspaltung wurden die Code-Verzeichnisse des Datenaudits und der Firewall grundsätzlich getrennt. Dieser Prozess war mit viel Aufwand verbunden und brachte mich auch zum Nachdenken: Ist es eine gute Idee, einen Codesatz für mehrere Projekte zu haben? Gibt es bessere Lösungen? Wenn das Projekt von Anfang an nach dem Entwurf mehrerer Projekte mit einem Codesatz entwickelt wird, sind dann die späteren Wartungskosten geringer? Ich habe auf diese Fragen keine Antworten, aber ich hoffe, dass zukünftige Generationen die Erfahrungen der Geschichte nutzen und bessere Projekte entwickeln können.

Andere Implementierungen

Als der Aufteilungsplan erstmals entworfen wurde, gab es zwei Möglichkeiten: Eine bestand darin, die aktuelle Produktfunktion durch Abrufen des Produktmodells dynamisch zu ändern, und die andere bestand darin, das angegebene Produktpaket während der Verpackung über Verpackungsparameter zu verpacken. Die endgültige Lösung besteht darin, die erste zu wählen. Allerdings haben wir dabei auch auf einige Online-Implementierungslösungen verwiesen, die hier zur zukünftigen Bezugnahme aufgeführt sind.

//www.jb51.net/article/188869.htm

//www.jb51.net/article/207835.htm

Oben finden Sie den detaillierten Inhalt des Vue-Projektcode-Aufteilungsplans. Weitere Informationen zur Vue-Projektcode-Aufteilung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!