springboot2-vue3
Un modèle d'arrière-plan commun basé sur springboot2 et vue3, sans fonctions redondantes, uniquement la gestion des autorisations et des fonctions communes . Projet de séparation front-end et back-end, code réussi à 90 % d'analyse de la convention de codage Alibaba et de recherche de bugs
Adresse de la nouvelle version
Guide de démarrage
Le guide suivant vous aidera à installer et à exécuter le projet sur votre ordinateur local à des fins de développement et de test. Pour plus d'informations sur la façon de déployer ce projet dans un environnement en ligne, veuillez vous référer à la section déploiement.
Exigences et étapes d'installation
- Installer et configurer l'environnement Java, JDK1.8
- Installez mysql 8 , créez une base de données (utf8mb4) et importez sql (dans le répertoire doc)
- Pour installer Redis , téléchargez-le et installez-le simplement
- Les outils de développement doivent installer le plug-in Lombok (IDEA est recommandé pour les outils de développement)
- --- Fonctionnement back-end (s'il y a un problème, il s'agit généralement d'une erreur dans la configuration de la source de données dans le fichier de configuration yml)
- Installer et configurer l'environnement de nœud
- Installez vue-cli3 , entrez dans le répertoire vue et exécutez
npm install
- ---Exécutez
npm run serve
sur le front-end ( WebStorm ou IDEA peuvent cliquer directement sur le triangle vert à gauche de la ligne 6 dans le fichier package.json )
Adresse de démonstration
- Adresse de démonstration en ligne
- Nom d'utilisateur :superadministrateur
- Mot de passe : 111111
- Astuce : Plusieurs utilisateurs se connectant en même temps peuvent être exclus.
- Astuce : L'environnement de démonstration a interdit les opérations d'ajout, de suppression et de modification. Ignorez simplement l'erreur.
- Astuce : S'il existe d'autres exceptions, veuillez forcer l'actualisation de la page (il peut s'agir d'un problème de cache)
- Documentation des interfaces
- swagger-bootstrap
- Conseils : la requête affichera 404, veuillez ajouter manuellement /github devant la requête
déployer
- Exécutez la commande
mvn clean package
dans le répertoire springboot pour empaqueter. Après l'empaquetage, le fichier généré se trouve dans le répertoire /target/build.- Le répertoire config stocke les fichiers de configuration.
- Le répertoire lib est le package jar dont dépend Maven.
- le répertoire statique stocke les fichiers statiques
- Le fichier jar est le package jar généré (si la dépendance pom reste inchangée à l'avenir, vous ne pouvez remplacer que le package jar)
- Exécutez la commande
npm run build
dans le répertoire vue pour empaqueter. Après l'empaquetage, le fichier généré se trouve dans le répertoire /dist.- La configuration de l'empaquetage se trouve dans le fichier .env et le fichier vue.config.js
- Le serveur de déploiement doit configurer l'environnement JDK1.8 , mysql 8 et redis
- Le package jar exécute
nohup java -jar springboot.jar &
peut s'exécuter en arrière-plan et afficher le journal dans le fichier nohup.out dans le répertoire actuel. - Il est recommandé de configurer nginx pour le serveur de déploiement. Vue est empaqueté et placé sous nginx. S'il n'est pas configuré, il peut être placé sous static dans le même répertoire du package jar .
Erreurs courantes
-
java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
- Erreur : Générer une classe d'entité basée sur la base de données
- Solution : remplacez le chemin du package jar dans la ligne 6 de resources/config/generator-config.xml par votre propre chemin de package jar.
-
npm install
- Erreur : erreur de dépendance d'installation de vue, généralement node-sass
- Solution : modifiez l'image Taobao ou
npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
-
/login ------请求失败-----error: Error: Cannot find module './q/Index'
- Erreur : après avoir créé un nouveau menu en arrière-plan (le menu n'a pas de subordonnés) et avoir obtenu l'autorisation d'ajouter le menu, cette erreur se produit lors de la nouvelle connexion.
- Solution : ajoutez le répertoire de menu et le fichier Index.vue au chemin /src/views/index/ dans le projet vue
extrémité arrière:
springboot, mybatis, redis
- Introduction
- Projet créé sur la base du modèle Springboot
- Configuration de base
- Le fichier .yml peut configurer les informations pertinentes
- Le répertoire config contient les configurations de modules courantes.
- Le filtre est configuré avec un filtrage inter-domaines , un filtrage IP , un filtrage des paramètres , etc.
- Les demandes de filtrage de paramètres suppriment automatiquement les espaces de début et de fin , en utilisant Jsoup pour filtrer les balises HTML (le niveau de filtrage peut être personnalisé)
- Gestion des autorisations
- Interface avec l'annotation
@AdminAuthToken
, l'en-tête de la requête doit avoir un jeton pour y accéder - Coopérer avec la page frontale de vue pour restituer dynamiquement le routage et masquer le bouton d'affichage : le bouton est enregistré dans
$store.state.role['buttons']
(front-end) - Précis aux autorisations au niveau de l'interface, l'API correspondante correspondant au menu ou au bouton dans la gestion des fonctions doit être améliorée, sinon elle sera autorisée par défaut une fois le token existant.
- L'usine d'emballage utilise CURD et hérite simplement de BaseService.
-
baseInsert()
et baseUpdate()
filtreront automatiquement les champs avec des valeurs nulles - Veuillez filtrer les paramètres
baseUpdate()
ou créer une nouvelle classe d'entité pour l'opération d'affectation.
- Générer automatiquement des classes d'entités basées sur la base de données
- Exécutez la méthode org.mybatis.generator.plugin.MyBatisTest.main()
- Ressources de configuration spécifiques/config/generator-config.xml
- Les journaux sont stockés quotidiennement et la configuration spécifique se trouve dans resources/config/logback-spring.xml
- Enregistrez automatiquement le journal de l'utilisateur administrateur , l'annotation
@SystemLog
peut être placée sur le contrôleur
l'extrémité avant:
vue :
Introduction
- Projet créé basé sur vue cli3
- Interface utilisateur de l'interface : élément-ui
- Requête réseau : axios
- Méthode d'appel globale
this.$axios({ url: '', data: {}, success(data) {} });
- url : seule l'adresse après le nom de domaine est obligatoire
- succès : le rappel ne doit gérer que le cas où le code est 200
- Les variables globales et les méthodes se trouvent dans le répertoire /src/utils
- Remplacez le style element-ui dans le fichier /src/assets/sass/element-variables.scss
- Présentation de la bibliothèque de polices Iconfont
- Écrasez simplement les fichiers du répertoire /src/assets/font/iconfont
- Citer
<i class="iconfont iconfont-address"></i>
- La plupart des projets ont des commentaires
Configuration de base
- Coopérer avec le backend pour implémenter le routage dynamique : remplissez le chemin dans le formulaire de gestion des fonctions, le chemin racine par défaut est /src/views/index/
- Le fichier .env.production/development et vue.config.js sont des fichiers de configuration
Composants couramment utilisés qui sont encapsulés ( pour plus de détails, veuillez vous référer à /src/views/index/system/sysUser/ pour des commentaires détaillés )
- boîte de dialogue:boîte contextuelle
- détail : afficher les données sous forme de titre + contenu
- form : soumission du formulaire,
@submit
n'a besoin de gérer la situation qu'après la vérification du formulaire - index : boîte pop-up ordinaire
- tableau : tableau
- Exemple de retour accepté par le formulaire :
{"list":[],"pageNum":1,"pageSize":10}
- Demande de données de table
tableDataRequest: { url: '', data: {} }
- url : adresse de la demande
- data : paramètres supplémentaires, utilisés avec la recherche principale
- Affichage du tableau
tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ]
accepte un tableau --- reportez-vous à la table layui- formateur : affichage complexe, peut renvoyer un dom
Remerciements
Tout d'abord, grâce à springboot , vue , element-ui et d'autres excellents projets open source. Deuxièmement, ce projet fait référence à de nombreux exemples en ligne. Si vous voyez un code similaire, alors il n'y a qu'une seule réponse.