In den letzten Jahren habe ich es geschafft, an mehreren großen und nicht sehr großen Projekten mit unterschiedlichen Back-End- und Front-End-Frameworks zu arbeiten. Konfrontiert mit verschiedenen Problemen, die auftraten, als die Anwendung wuchs.Jetzt kann ich schließen, welche Lösungen erfolgreich und welche nicht sehr erfolgreich waren.Mit der gesammelten Erfahrung machte ich mich daran, meiner Meinung nach die besten Lösungen zu sammeln und meine eigene Grundlage für SPA zu schaffen.Wie man eine Site auf Laravel erstellt oder was SPA ist, werde ich nicht sagen. Es gibt genug solche Informationen im Internet. Dieser Artikel richtet sich an mehr oder weniger erfahrene Entwickler, daher werde ich einige Details vermissen.Wer nicht warten kann, am Ende des Artikels befindet sich ein Link zu meinem Github-Repository.Die Haupttechnologien wurden von Laravel und Vue.js + Vuex ausgewählt, da dies mein Hauptstapel ist.Für eine schnelle Entwicklung habe ich das UI Kit - ElementUI genommen .Hauptziel
So schaffen Sie eine Grundlage für ein mittleres und großes Projekt:- wird dazu beitragen, einen starren Zusammenhalt der Module zu vermeiden
- verständlich für einen Programmierer mit wenig Erfahrung
- Vermeiden Sie Codeduplikationen
- wird leicht zu erweitern sein
- Projektstartzeit reduzieren
- Reduzieren Sie die Zeit für Projektunterstützung und Code-Navigation
Um das Leben so einfach wie möglich zu gestalten und nicht im Projekt verwirrt zu werden, müssen Sie Ihr Ego richtig strukturieren. Zu Beginn sollte die Anwendung in Verantwortungsebenen wie Benutzeroberfläche, Datenbank und Geschäftslogik unterteilt werden.Ferner sollte jede Schicht zuerst durch die Funktionalität unterteilt werden, und dann sollte jedes Funktionsmodul gemäß dem ausgewählten Muster unterteilt werden.Inspiriert von der DDD-Philosophie habe ich beschlossen, das Front-End und das Back-End in semantische Module aufzuteilen. Dies sind jedoch nicht die klassischen Domänen, die Evans beschreibt. Sein Modell ist auch nicht perfekt. In jeder Anwendung werden im Laufe der Zeit immer Beziehungen zwischen Komponenten angezeigt - dieselben Beziehungen zwischen Modellen.Er verließ die Modelle als separate Ebene, da sie die Datenbank mit all ihren Verbindungen zu duplizieren schienen.Erstellt ein Verzeichnis an der VorderseiteRessourcen / js / Module , in denen sich verschiedene Module befinden. Jedes verfügt über API- Methoden für die Arbeit mit dem Back-End, Komponenten - allen Komponenten und Seiten, Speicher - Speicher und Routen .{moduleName}/
│
├── routes.js
│
├── api/
│ └── index.js
│
├── components/
│ ├── {ModuleName}List.vue
│ ├── {ModuleName}View.vue
│ └── {ModuleName}Form.vue
│
└── store/
├── store.js
├── types.js
└── actions.js
In resources / js , der Kern wird Ordner erstellt , in dem die Hauptkomponenten des Systems befinden.Es gibt auch Bootstrap und enthält Ordner zum Konfigurieren zusätzlicher Bibliotheken bzw. Dienstprogramme.Das Projekt verwendet das dynamische Laden von Modellen. In Core / Routen und in Core / States laden wir nämlich die entsprechenden Routing- und Speicherdateien automatisch (es muss nichts registriert werden).Hier ist ein Beispiel dafür, wie store.js automatisch aus verschiedenen Modulen geladen wurde .
const requireContext = require.context('../../modules', true, /store\.js$/)
let modules = requireContext.keys()
.map(file =>
[file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
)
.reduce((modules, [path, module]) => {
let name = path.split('/')[0]
return { ...modules, [name]: module.store }
}, {})
modules = {...modules, core}
export default new Vuex.Store({
modules
})
Im Backend im App-Verzeichnis befinden sich ähnliche Module. Jedes Modul enthält Ordner Controller, Anforderungen, Ressourcen . Die Datei mit den Routen wurde ebenfalls hierher verschoben - route_api.php .{ModuleName}/
│
├── routes_api.php
│
├── Controllers/
│ └──{ModuleName}Controller.php
│
├── Requests/
│ └──{ModuleName}Request.php
│
└── Resources/
└── {ModuleName}Resource.php
Andere Entwurfsmuster wie Ereignisse, Jobs, Richtlinien usw. werden nicht in die Module aufgenommen, da sie seltener verwendet werden und es logischer ist, sie in einer separaten Ebene zu speichern.Alle Manipulationen mit dem dynamischen Laden der Module werden so durchgeführt, dass ein minimales Eingreifen zwischen ihnen schlägt. Auf diese Weise können Sie Module ohne Konsequenzen hinzufügen und entfernen. Jetzt können Sie den handwerklichen Befehl make erstellen, um ein solches Modul zu erstellen. Mit seiner Hilfe können wir das Projekt schnell mit den erforderlichen Entitäten und der CRUD-Funktionalität füllen.Nachdem Sie den Befehl ausgeführt haben php artisan make:module {ModuleName}, verfügen wir über alle erforderlichen Dateien, einschließlich des Modells und der Migrationen, damit die vollständige CRUD funktioniert. Sie müssen nur die Migration abschließenphp artisan migrateund alles wird funktionieren. Höchstwahrscheinlich müssen Sie zusätzliche Felder hinzufügen. Vergessen Sie daher nicht, diese vor der Migration dem Modell, der Migration und der Ausgabe an vue hinzuzufügen.In dieser Vorlage wurde die JWT-Auth- Technologie zur Authentifizierung verwendet , sie ist jedoch möglicherweise redundant und sollte für Laravel Sanctum neu erstellt werden. Vue-auth wird wiederum im Front-End verwendet und erleichtert die Verwaltung von Benutzerberechtigungen und -rollen.In Zukunft möchte ich das System verbessern. Fügen Sie einen globalen Ereignisbus hinzu und verbinden Sie Websockets. Tests hinzufügen. Es ist möglich, eine Rollenverwaltungsoption in separaten Zweigen zu erstellen oder Zweige mit einem anderen UI-Kit zu erstellen. Es wäre schön, Empfehlungen und Kommentare zu hören.Ursprünglich wurde diese Vorlage für Ihre Bedürfnisse entwickelt, aber jetzt hoffe ich, dass sie für andere Benutzer nützlich sein wird.Der gesamte Code kann in meinem Github-Repository angezeigt werden .