👂🏾 🤟🏻 🧑🏿‍🤝‍🧑🏽 Base pour un grand SPA modulaire sur Laravel + Vue + ElementUI avec générateur CRUD 🎍 ⛎ 👁‍🗨

Au cours des dernières années, j'ai réussi à travailler sur plusieurs projets de grande envergure et peu nombreux utilisant différents frameworks back-end et front-end. Face à divers problèmes qui se sont posés au fur et à mesure de la croissance de l'application.

Je peux maintenant conclure à partir de quelles solutions ont réussi et lesquelles n'ont pas été très réussies.
En utilisant l'expérience accumulée, je me suis mis à collecter toutes les meilleures solutions, à mon avis, et à créer ma propre fondation pour SPA.

Comment créer un site sur Laravel ou ce qu'est le SPA, je ne le dirai pas. Il y a suffisamment de telles informations sur Internet. Cet article est destiné aux développeurs plus ou moins expérimentés, donc je vais manquer quelques détails.

Qui ne peut pas attendre, à la fin de l'article est un lien vers mon référentiel github.

Les principales technologies ont été sélectionnées par Laravel et Vue.js + Vuex car c'est ma pile principale.

Pour un développement rapide, j'ai pris le Kit UI - ElementUI .

L'objectif principal

Pour créer les bases d'un projet de moyenne et grande envergure qui:

aidera à éviter la cohésion rigide des modules
compréhensible pour un programmeur avec peu d'expérience
aider à éviter la duplication de code
sera facile à étendre
réduire l'heure de début du projet
réduire le temps de prise en charge du projet et de navigation dans le code

Pour rendre la vie aussi simple que possible, à ne pas confondre avec le projet, vous devez bien structurer votre ego. Initialement, l'application doit être divisée en niveaux de responsabilité, tels que l'interface utilisateur, la base de données, la logique métier.

De plus, chaque couche doit d'abord être divisée par fonctionnalité, puis chaque module fonctionnel doit être divisé en fonction du modèle sélectionné.

Inspiré par la philosophie DDD, j'ai décidé de diviser le front-end et le back-end en modules sémantiques. Mais ce ne sont pas les domaines classiques décrits par Evans. Son modèle n'est pas non plus parfait. Dans toute application, au fil du temps, les relations entre les composants apparaissent toujours - les mêmes relations entre les modèles.

Il a laissé les modèles comme une couche distincte, car ils semblaient dupliquer la base de données, avec toutes ses connexions.

Création d'un répertoire à l'avantressources / js / modules , dans lesquels se trouvent différents modules. Chacun aura des API - des méthodes pour travailler avec le back-end, des composants - tous les composants et les pages, le stockage - le stockage et les itinéraires .

{moduleName}/
│
├── routes.js
│
├── api/
│   └── index.js
│
├── components/
│   ├── {ModuleName}List.vue
│   ├── {ModuleName}View.vue
│   └── {ModuleName}Form.vue
│
└── store/
    ├── store.js
    ├── types.js
    └── actions.js

Dans resources / js , le dossier principal est créé , où se trouvent les principaux composants du système.
Il existe également des programmes d'amorçage et comprend des dossiers pour configurer des bibliothèques et des utilitaires supplémentaires, respectivement.

Le projet utilise le chargement dynamique des modèles. A savoir, dans core / routes et dans core / states, nous chargeons automatiquement les fichiers de routage et de stockage correspondants (rien n'a besoin d'être enregistré).

Voici un exemple de chargement automatique de store.js à partir de différents modules.

// Load store modules dynamically.
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
})

Sur le backend dans le répertoire de l'application, il y aura des modules similaires. Chaque module contiendra des dossiers Contrôleurs, Demandes, Ressources . Le fichier avec les routes a également été déplacé ici - routes_api.php .

{ModuleName}/
│
├── routes_api.php
│
├── Controllers/
│   └──{ModuleName}Controller.php
│
├── Requests/
│   └──{ModuleName}Request.php
│
└── Resources/
    └── {ModuleName}Resource.php

Autres modèles de conception tels que les événements, les emplois, les politiques, etc. ne seront pas inclus dans les modules, car ils sont moins utilisés et il est plus logique de les conserver dans une couche distincte.

Toutes les manipulations avec le chargement dynamique des modules sont effectuées de sorte qu'un engagement minimal bat entre eux. Cela vous permet d'ajouter et de supprimer des modules sans conséquences. Vous pouvez maintenant faire la commande artisan make pour créer un tel module. Avec son aide, nous pouvons rapidement remplir le projet avec les entités nécessaires ainsi que la fonctionnalité CRUD.

Après avoir exécuté la commande php artisan make:module {ModuleName}, nous aurons tous les fichiers nécessaires, y compris le modèle et les migrations, pour que le CRUD complet fonctionne. Il vous suffit de terminer la migrationphp artisan migrateet tout fonctionnera. Très probablement, vous devrez ajouter des champs supplémentaires, donc avant de migrer, n'oubliez pas de les ajouter au modèle, à la migration et également à la sortie vers vue.

Dans ce modèle, la technologie JWT-Auth a été utilisée pour l'authentification , mais elle peut être redondante et doit être refaite pour Laravel Sanctum. À son tour, vue-auth est utilisé sur le front-end , il facilite la gestion des autorisations et des rôles des utilisateurs.

À l'avenir, j'aimerais améliorer le système. Ajoutez un bus d'événements global, connectez des websockets. Ajoutez des tests. Il est possible de créer une option de gestion des rôles dans des branches distinctes ou de créer des branches avec un autre kit d'interface utilisateur. Ce serait bien d'entendre des recommandations, des commentaires.

Initialement, ce modèle a été développé pour vos besoins, mais maintenant j'espère qu'il sera utile pour d'autres utilisateurs.

Tout le code peut être consulté dans mon référentiel github .

Base pour un grand SPA modulaire sur Laravel + Vue + ElementUI avec générateur CRUD

L'objectif principal

More articles: