YoYoCms.AbpProjectTemplate

Site de démonstration

Parlons d’abord de ce projet. Tout comme le titre, il s'agit d'un framework développé sur la base de VUE+.NET. C'est également le framework ABP que les membres du groupe réclamaient une version vue. Jetons d'abord un coup d'œil à la page d'accueil :

C'est plutôt cool. Je vais vous fournir un compte démo.

Adresse de démonstration : http://vue.yoyocms.com/ Compte : demo Mot de passe : bb123456 Bien entendu, vous pouvez également créer vous-même un compte pour vérification.

introduire

Tout d’abord, pour les étudiants qui ne connaissent pas le cadre ABP, expliquons ce qu’est le cadre ABP :

ABP est l'abréviation de « ASP.NET Boilerplate Project (ASP.NET Boilerplate Project) ». ASP.NET Boilerplate est un nouveau point de départ pour développer des applications WEB modernes utilisant les meilleures pratiques et technologies populaires. Il vise à devenir un cadre d'application WEB et un modèle de projet universel. Framework ABP est un framework d'application basé sur les dernières technologies ASP.NET CORE, ASP.NET MVC et Web API. Et en utilisant des frameworks et des bibliothèques populaires, il fournit des fonctions communes faciles à utiliser telles que l'autorisation, l'injection de dépendances, la validation, la gestion des exceptions, la localisation, la journalisation, la mise en cache, etc. Architecture ABP met en œuvre une architecture multicouche (couche domaine, couche application, couche infrastructure et couche présentation), ainsi qu'une conception axée sur le domaine (entités, référentiels, services de domaine, services applicatifs, DTO, etc.). Une bonne infrastructure est également mise en œuvre et fournie pour mettre en œuvre les meilleures pratiques telles que l'injection de dépendances. Template ABP crée facilement des modèles de démarrage pour vos projets. Il inclut par défaut les frameworks et bibliothèques les plus couramment utilisés. Permet également de choisir une architecture monopage (Angularjs) ou multipage, EntityFramework ou NHibernate comme ORM. Visitez le site officiel pour en savoir plus.

structure

La structure du projet retenu cette fois-ci est :

• Cadre .net 4.6
• VUE + VUEX + VUE-ROUTER est une technologie de séparation front-end et back-end, mais la séparation n'est pas très pure. En raison de la conception de l'ABP, si vous souhaitez séparer purement le front-end et le front-end, cela doit être fait. sera un peu gênant lors de l'autorisation, donc la méthode du jeton n'est pas utilisée.

Dans l'article précédent [ABP Framework] Interception Usage of Dynamic Web Api, il a été expliqué comment utiliser le jeton pour la vérification de l'autorisation. Actuellement, la méthode des cookies est toujours utilisée pour la vérification. Mais cela n’affecte pas les méthodes de développement front-end et back-end. Jetez un oeil à la page de connexion:

Réalisation de la fonction

• Connexion S'inscrire
• Commutation multilingue
• Gestion des messages
• Gestion des locataires (multi-tenant)
• gestion des rôles
• Session
• Autorisation (gestion des droits)
• Gestion des paramètres
• Gestion multilingue
• Journal d'audit
• Dynamic WebApi et autres fonctions, j'espère que vous pourrez en faire l'expérience vous-même.

Si vos compétences .NET ne sont pas solides ou si vous souhaitez les améliorer, ABP est le meilleur framework d'apprentissage.

Description de la pile technologique frontale :

####Framework utilisé par le front-end 1.vue
2.vuex
3.vue-routeur
4.jquery

Bibliothèque d'interface utilisateur

1.element-ui
2.vagues
3.bootstrap
4.BSBADMIN

Structure du projet

• script de construction construit par webpack
• config configuration de la construction du pack Web
• Fichiers après la construction de distribution
• répertoire du code source src
  • fichiers de ressources globales d'actifs
  • méthode publique de style public commun
    • pack de langue (temporairement inutilisé)
    • classe d'outils utils
  • composants composants globaux
  • filtres filtres
  • les mixins stockent différents styles d'audace
  • configuration du routage du routeur
  • couche de demande d'interface de service
  • magasinvuex
  • le fournisseur stocke des bibliothèques tierces
  • vues afficher le fichier
  • vuePlugin plug-in de vue personnalisé
• fichiers statiques, le répertoire compilé reste inchangé

Voici les mots originaux du personnel front-end Merci Huixin666 d'avoir pris le temps d'améliorer l'interface de vue.

Étapes de développement

Avant le développement, nous supposons que vous disposez d'une base de compétences de base en es6 , sass , vue , vue-router et vuex .
Il est recommandé de lire les conseils de You Yuxi

Installer les dépendances frontales

Entrez le répertoire Assets dans Web项目

 $ npm i

Exécuter le projet

N'oubliez pas de commencer par l'arrière-plan

 $ npm run dev

webpack utilisera express pour démarrer un serveur Web avec le port 8986

déployer

 $ npm run build

Cette commande compilera tous les fichiers dans le répertoire dist , reportez-vous au diagramme de structure du projet ci-dessus

1.Ajouter une page

• Allez d’abord dans src/views pour créer un répertoire de module.
  Par exemple, j'ai actuellement ajouté un répertoire appelé administration , qui contient toutes les pages de gestion du système. Chaque module peut également contenir des répertoires components et assets , ce qui signifie que les composants et les ressources qu'il contient appartiennent uniquement au module actuel.
• Ensuite, ajoutez un Index.vue comme page de routage parent pour contrôler toutes les pages de ce module.
  Il faut prêter attention au rôle de maintien en vie
• Ajoutez ensuite la page dont vous avez besoin, telle que User.vue
  Si vous avez besoin d'obtenir des données, veuillez ajouter une méthode nommée fetchData dans methods . Dans cette méthode, vous devez appeler abp.view.setContentLoading(false) après avoir obtenu les données pour fermer la couche de masque de chargement de la zone de contenu. (Vous pouvez vous référer à User.vue)

2.Ajouter un itinéraire

• Entrez dans le répertoire src/router , ajoutez le dossier du module de routage et ajoutez un fichier nommé index.js dans le dossier.
• Enregistrez ensuite les informations de routage actuellement ajoutées dans src/router/index.js

3.Ajouter un service

• Entrez dans le répertoire src/services et ajoutez le module correspondant à la requête d'interface. Par exemple, les objets liés au rôle sont placés dans roleService.js Les objets exportés par le fichier roleService.js correspondent à abp.services.yoyocms.role . L’avantage de l’utiliser de cette manière est qu’il peut être géré et étendu de manière uniforme.

Ce qui précède est la situation de base de la version vue d'ABP.

Adresse de téléchargement :

L'adresse open source de la version vue : https://github.com/yoyocms/YoYoCms.AbpProjectTemplate L'adresse démo de la version vue : http://vue.yoyocms.com/ L'adresse open source de la version angulaireJS : https ://github.com/ltm0203/YoYoCms Adresse de démonstration de la version angulaireJS : http://www.yoyocms.com

Si vous avez de bonnes suggestions ou des commentaires sur des bogues, veuillez signaler un problème sur github.

Parallèlement, nous avons également créé un générateur de projet avec des fonctions similaires au modèle ABP officiel. La fonction sera publiée au milieu de l’année, alors restez à l’écoute.