YoYoCms.AbpProjectTemplate

Demo-Website

Lassen Sie uns zunächst über dieses Projekt sprechen. Genau wie der Titel handelt es sich um ein auf VUE+.NET entwickeltes Framework. Es ist auch das ABP-Framework, nach dem die Gruppenmitglieder eine Vue-Version gefordert haben. Werfen wir zunächst einen Blick auf die Homepage:

Es ist ziemlich cool. Ich stelle Ihnen ein Demokonto zur Verfügung.

Demo-Adresse: http://vue.yoyocms.com/ Konto: Demo-Passwort: bb123456 Natürlich können Sie auch selbst ein Konto zur Verifizierung registrieren.

einführen

Für Studierende, die das ABP-Framework nicht kennen, erklären wir zunächst, was das ABP-Framework ist:

ABP ist die Abkürzung für „ASP.NET Boilerplate Project (ASP.NET Boilerplate Project)“. ASP.NET Boilerplate ist ein neuer Ausgangspunkt für die Entwicklung moderner WEB-Anwendungen unter Verwendung von Best Practices und gängigen Technologien. Ziel ist es, ein universelles WEB-Anwendungsframework und eine Projektvorlage zu werden. Framework ABP ist ein Anwendungsframework, das auf den neuesten ASP.NET CORE-, ASP.NET MVC- und Web-API-Technologien basiert. Mithilfe gängiger Frameworks und Bibliotheken bietet es benutzerfreundliche allgemeine Funktionen wie Autorisierung, Abhängigkeitsinjektion, Validierung, Ausnahmebehandlung, Lokalisierung, Protokollierung, Caching usw. Architektur ABP implementiert eine mehrschichtige Architektur (Domänenschicht, Anwendungsschicht, Infrastrukturschicht und Präsentationsschicht) sowie domänengesteuertes Design (Entitäten, Repositorys, Domänendienste, Anwendungsdienste, DTO usw.). Außerdem wird eine gute Infrastruktur implementiert und bereitgestellt, um Best Practices wie die Abhängigkeitsinjektion umzusetzen. Template ABP erstellt ganz einfach Startup-Vorlagen für Ihre Projekte. Es enthält standardmäßig die am häufigsten verwendeten Frameworks und Bibliotheken. Ermöglicht Ihnen außerdem die Auswahl einer einseitigen (Angularjs) oder mehrseitigen Architektur, EntityFramework oder NHibernate als ORM. Besuchen Sie die offizielle Website, um mehr zu erfahren.

Struktur

Die Struktur des diesmal ausgewählten Projekts ist:

• .net Framework 4.6
• VUE + VUEX + VUE-ROUTER ist eine Front-End- und Back-End-Trenntechnologie, aber die Trennung ist aufgrund des Designs von ABP nicht sehr rein, wenn Sie Front-End und Front-End rein trennen möchten Da die Autorisierung etwas mühsam sein wird, wird die Token-Methode nicht verwendet.

Im vorherigen Artikel [ABP Framework] Interception Usage of Dynamic Web Api wurde erläutert, wie Token zur Autorisierungsüberprüfung verwendet werden. Derzeit wird noch die Cookie-Methode zur Überprüfung verwendet. Dies hat jedoch keinen Einfluss auf die Front-End- und Back-End-Entwicklungsmethoden. Schauen Sie sich die Login-Seite an:

Funktionsrealisierung

• Anmelden Registrieren
• Mehrsprachige Umschaltung
• Nachrichtenverwaltung
• Mieterverwaltung (Multi-Tenant)
• Rollenmanagement
• Sitzung
• Autorisierung (Rechteverwaltung)
• Einstellungsverwaltung
• Mehrsprachiges Management
• Audit-Protokoll
• Dynamisches WebApi und andere Funktionen, ich hoffe, Sie können es selbst erleben.

Wenn Ihre .NET-Kenntnisse nicht solide sind oder Sie sie verbessern möchten, ist ABP das beste Lernframework.

Beschreibung des Front-End-Technologie-Stacks:

####Framework, das vom Frontend 1.vue verwendet wird
2.vuex
3.vue-Router
4.jquery

UI-Bibliothek

1.element-ui
2.Wellen
3. Bootstrap
4.BSBADMIN

Projektstruktur

• Von Webpack erstelltes Build-Skript
• config Webpack-Build-Konfiguration
• Dateien nach dist build
• src-Quellcodeverzeichnis
  • globale Asset-Ressourcendateien
  • öffentliche Methode im gemeinsamen öffentlichen Stil
    • language Sprachpaket (vorübergehend unbenutzt)
    • Utils-Toolklasse
  • Komponenten globale Komponenten
  • Filter Filter
  • Mixins speichern verschiedene Arten von Sass
  • Router-Routing-Konfiguration
  • Serviceschnittstellen-Anforderungsschicht
  • storevuex
  • Der Anbieter speichert Bibliotheken von Drittanbietern
  • Ansichten Datei anzeigen
  • vuePlugin benutzerdefiniertes Vue-Plug-in
• Bei statischen statischen Dateien bleibt das kompilierte Verzeichnis unverändert

Das Folgende sind die ursprünglichen Worte der Front-End-Mitarbeiter. Vielen Dank, Huixin666, dass Sie sich die Zeit genommen haben, die Benutzeroberfläche von vue zu verbessern.

Entwicklungsschritte

Vor der Entwicklung gehen wir davon aus, dass Sie über grundlegende Kenntnisse in es6 , sass , vue , vue-router und vuex verfügen.
Es wird empfohlen, die Ratschläge von You Yuxi zu lesen

Installieren Sie Front-End-Abhängigkeiten

Geben Sie das Assets-Verzeichnis im Web项目ein

 $ npm i

Führen Sie das Projekt aus

Denken Sie daran, zuerst den Hintergrund zu starten

 $ npm run dev

Webpack verwendet Express, um einen Webserver mit Port 8986 zu starten

einsetzen

 $ npm run build

Dieser Befehl kompiliert alle Dateien im dist -Verzeichnis. Weitere Informationen finden Sie im Projektstrukturdiagramm oben

1. Seite hinzufügen

• Gehen Sie zunächst zu src/views um ein Modulverzeichnis zu erstellen.
  Beispielsweise habe ich derzeit ein Verzeichnis namens administration hinzugefügt, das alle Systemverwaltungsseiten enthält. Jedes Modul kann auch components und assets -Verzeichnisse enthalten, was bedeutet, dass die darin enthaltenen Komponenten und Ressourcen nur zum aktuellen Modul gehören.
• Fügen Sie als Nächstes eine Index.vue als übergeordnete Routing-Seite hinzu, um alle Seiten unter diesem Modul zu steuern.
  Es muss auf die Rolle des Keep-Alive geachtet werden
• Fügen Sie dann die benötigte Seite hinzu, z. B. User.vue
  Wenn Sie Daten abrufen müssen, fügen Sie bitte eine Methode mit dem Namen fetchData in methods hinzu. Bei dieser Methode müssen Sie nach dem Abrufen der Daten abp.view.setContentLoading(false) aufrufen, um die Lademaskenebene des Inhaltsbereichs zu schließen. (Sie können sich auf User.vue beziehen)

2. Route hinzufügen

• Geben Sie das Verzeichnis src/router ein, fügen Sie den Routing-Modulordner hinzu und fügen Sie dem Ordner eine Datei mit dem Namen index.js hinzu.
• Registrieren Sie dann die aktuell hinzugefügten Routing-Informationen in src/router/index.js

3.Dienst hinzufügen

• Geben Sie das Verzeichnis src/services ein und fügen Sie das der Schnittstellenanforderung entsprechende Modul hinzu. Die rollenbezogenen Objekte werden beispielsweise in roleService.js Die von der Datei roleService.js exportierten Objekte entsprechen abp.services.yoyocms.role . Der Vorteil einer solchen Nutzung liegt darin, dass sie einheitlich verwaltet und erweitert werden kann

Das Obige ist die Grundsituation der Vue-Version von ABP.

Download-Adresse:

Die Open-Source-Adresse der Vue-Version: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate Die Demo-Adresse der Vue-Version: http://vue.yoyocms.com/ Die Open-Source-Adresse der AngularJS-Version: https ://github.com/ltm0203/YoYoCms AngularJS Version Demo-Adresse: http://www.yoyocms.com

Wenn Sie gute Vorschläge oder Feedback zu Fehlern haben, melden Sie bitte ein Problem auf Github.

Gleichzeitig haben wir auch einen Projektgenerator mit ähnlichen Funktionen wie die offizielle ABP-Vorlage erstellt. Die Funktion wird Mitte des Jahres veröffentlicht, also bleiben Sie bitte dran.