spring rest admin

printemps-reste-admin

Introduction

Ce projet est un projet frontal de bureau de gestion basé sur Vue et ElementUI. Il est utilisé conjointement avec Spring-Rest Backend. Le code du framework provient de Vue-Element-Admin, avec quelques modifications apportées sur cette base. Principalement optimisé la fonction de gestion des droits. Cliquez ici pour accéder à la démo en ligne .

optimisation

• Les autorisations de menu sont automatiquement générées en fonction de la configuration du routage et synchronisées avec la base de données principale par l'administrateur ;

• Vous pouvez ajouter, modifier et supprimer des autorisations de bouton sous les autorisations de menu synchronisées ;

• En plus des autorisations des boutons, les métadonnées des autorisations de menu et des autorisations d'interface sont automatiquement générées respectivement par le front-end et le back-end. Même si tous les enregistrements de la base de données sont effacés, l'administrateur n'a qu'à les synchroniser à nouveau, sans insérer manuellement les enregistrements de table ;

• Lors de l'ajout d'autorisations de bouton, le préfixe est automatiquement généré et seules les parties nécessaires sont remplies pour éviter toute confusion de format ;

• Ajout de la fonction permettant d'associer les autorisations de menu et les autorisations de boutons aux autorisations d'interface. Les rôles sont uniquement directement liés aux autorisations de menu et aux autorisations de boutons ;

• Lors de l'authentification des éléments de la page, utilisez des constantes d'énumération pour éviter d'utiliser directement des chaînes d'autorisation pour faciliter la maintenance ;

• Définir la hiérarchie des classes d'appel de l'interface API pour qu'elle soit cohérente avec la hiérarchie des classes de l'interface d'arrière-plan afin d'éliminer la redondance et d'améliorer la réutilisation du code ;

• Correction du bug du composant el-scrollbar : lorsque le navigateur est réduit dans une certaine mesure, la barre de défilement cachée d'origine sera exposée. Plus le taux de réduction est grand, plus le phénomène sera évident ;

Préparation de l'environnement de développement

Préparation de l'environnement Node.js

Il est recommandé d'utiliser la v12 pour la version Node.js. Les autres versions semblent convenir.

Il est recommandé d'utiliser nvm pour la gestion des versions de Node.js sous Linux et MacOS ne prend pas en charge Windows, mais vous pouvez utiliser l'alternative nvm-windows.

Prenons l'exemple de nvm-windows sous Windows (exécuté sous git bash) :

 # 设置 nvm 下载 node 和 npm 的镜像地址（直接访问外网太慢）
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/

# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org

# 查看可用的 Node.js版本
$ nvm list available

# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1

# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >

# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v

Récupération et exécution du projet

Remarque : Avant d'exécuter le frontal de la console de gestion, il est préférable d'exécuter d'abord l'arrière-plan du serveur.

$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install

Remarque : Si une erreur est signalée lors de l'exécution de la commande npm install et que le message d'erreur est npm ERR! Failed at the [email protected] install script. , vous pouvez exécuter la commande suivante, puis exécuter npm install :

$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

Si d'autres erreurs sont signalées lors de la phase d'installation de npm, cela peut être dû au fait que certains packages ne peuvent pas être téléchargés à partir de la station miroir Taobao et doivent être téléchargés directement à partir de certaines adresses réseau externes inaccessibles. Cependant, le téléchargement échoue. ajoutez la configuration du proxy. Réessayez plus tard.

$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port

Si npm install est exécuté avec succès et qu'aucune erreur n'est signalée, vous pouvez continuer à l'exécuter.

$ npm run serve

Après un moment, le navigateur s'ouvrira automatiquement et accédera à l'adresse http://localhost:9527/login . Sélectionnez un utilisateur intégré pour vous connecter directement.

Remarque : L'arrière-plan du serveur doit être démarré avant que vous puissiez vous connecter avec succès.

fichier de configuration de l'environnement

vue-element-admin prend en charge plusieurs configurations d'environnement. Le format du nom du fichier de configuration de l'environnement est .env.[环境名] . Si ces informations de configuration de l'environnement ne doivent être utilisées que localement, ajoutez le suffixe .local à la fin du fichier. nom du fichier, afin que le fichier de configuration Il ne sera pas téléchargé dans le référentiel par git , il ne sera conservé que localement.

Remarque : En plus de la configuration de l'environnement de développement .env.development et .env.development.local , d'autres fichiers de configuration de l'environnement doivent définir NODE_ENV = production . Le nom de l'environnement ENV doit correspondre à la partie entre .env et .local dans le fichier. nom du fichier de configuration de l'environnement De plus, le préfixe de l'adresse d'appel de l'interface VUE_APP_BASE_API doit également être modifié.

Remarque : Si vous souhaitez définir d'autres variables d'environnement dans le fichier de configuration, elles doivent commencer par VUE_APP_ et les obtenir via process.env.VUE_APP_xxxx dans le code.

Déploiement du package

Remarque : avant l'empaquetage, veuillez confirmer que npm install et npm run serve peuvent être exécutés normalement sans erreur.

La commande d'empaquetage est : npm run build -- --mode <环境名> . Dans la figure ci-dessus, à titre d'exemple, la commande d'empaquetage est :

$ npm run build -- --mode vm-centos7

Une fois la commande exécutée avec succès, le fichier de résultat de l'empaquetage se trouvera dans le répertoire dist.

Remarque : Le plug-in de compression de code compression-webpack-plugin ne peut utiliser que la version précédente v6 et ne peut pas utiliser la dernière version v7, sinon il semble qu'une erreur soit signalée.

De plus, le mode de routage de ce projet est configuré en mode historique. Si vous souhaitez exécuter dans ce mode, nginx doit être configuré en conséquence (voir routage à l'aide de history.pushState pour plus de détails). En même temps, la configuration liée à gzip doit être ajoutée (seule cette ligne de configuration est nécessaire) :

 location / {
  gzip_static on ;
  try_files $uri $uri / /index.html;
}