vue2 admin
1.0.0
Adresse de l'expérience : vue2-admin
Compte : admin Mot de passe : admin
Si vous rencontrez un bug ou avez une meilleure implémentation, n'hésitez pas à me contacter (vous pouvez également m'envoyer un email pour me demander si vous ne comprenez pas le code). Courriel : [email protected]
Adresse github de la version vue2 : vue2-admin
Il existe également un entrepôt gitee, il suffit de changer github dans le lien ci-dessus en gitee.
1. Animation de chargement du premier écran
2.paquet axios
3.Contrôle des autorisations du routeur
4. Générez dynamiquement une barre de navigation latérale en fonction des autorisations
5. Logique de connexion
6. mise en page du tableau de bord
8. Les composants basés sur l'encapsulation secondaire d'el-tooltip n'afficheront l'info-bulle que lorsque la longueur est dépassée et prendront en charge tous les attributs d'el-tooltip. 9. Les composants basés sur l'encapsulation secondaire d'el-table prendront en charge tous les attributs d'el. -table et prise en charge de la pagination 10. Composant de sélection d'icône basé sur l'encapsulation secondaire el-icon 11. Fonction de rafraîchissement sans contact du jeton.
Il n'encapsule pas trop les fonctions et fournit uniquement le cadre de base des pages et la structure de routage. Les fonctions restantes sont entièrement laissées aux utilisateurs à développer eux-mêmes.
Afin de démontrer l'effet, j'ai également utilisé mock.js pour générer des données de test dans l'environnement formel. Mais la version officielle ne sera pas utilisée !
Veuillez l'exécuter en interruption pendant l'utilisation officielle.
npm uninstall mockjs --save
Si vous avez besoin de données de test pendant le développement, veuillez exécuter les instructions suivantes pour installer mockjs dans l'environnement de développement
npm install mockjs -D
Les en-têtes de requête peuvent être configurés dans utils/request.js et peuvent être modifiés en fonction de votre situation réelle.
Configurez l'URL de base de la requête dans l'API dans utils/setting.js
L'environnement général est .env
L'environnement de développement est .env.development
L'environnement de production est .env.production
Priorité de la variable d'environnement .env.production = .env.development > .env
Il y a un dossier api dans le répertoire src du projet, puis créez-y un nouveau fichier user.js. Ce fichier est le processus d'encapsulation d'écriture de l'API.
Il est recommandé de mettre un type d'interface dans le même fichier lors de son utilisation pour faciliter le débogage et la gestion unifiée.
Si le format @/api/user.js est utilisé, il sera introduit en premier lors de son utilisation. Par exemple, j'introduis d'abord le fichier dans @/component/login.vue
import { loginApi } from "@/api/user"
login ( ) {
let data = this . ruleForm
loginApi ( data ) . then ( res => {
console . log ( res )
} )
} Générez dynamiquement des itinéraires en fonction des données renvoyées par l'interface et générez une barre de navigation basée sur les données de l'interface.
Il y a des gardes de route dans @/router/beforEach.js. Les gardes de route de base ont été ajoutés. Si vous souhaitez implémenter d'autres fonctions (telles que : vous ne pouvez accéder à une certaine page qu'après avoir effectué une certaine opération), vous pouvez l'ajouter. dans router/beforEach.js Ajoutez la logique correspondante à la fonction Selfexecution.
Configurez l'icône, le titre et le masquage de la barre latérale dans l'attribut méta dans @/router/beforEach.js. Lorsque masqué : true, la barre de navigation latérale ne s’affiche pas.
La couleur de la barre latérale peut être modifiée par side_color et side_rext_color du thème dans utils/setting.
Placez la modularisation, la connexion et le contrôle des autorisations vuex dans un module séparé
Pour éviter la perte d'actualisation des données vuex, introduisez vuex-persistedstate
// 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
storage : window . sessionStorage ,
reducer ( val ) {
return {
// 只储存state中的isPC
isPC : val . user . isPC
}
}
} ) ]Afin d'empêcher les utilisateurs de modifier manuellement le stockage des sessions, un événement d'écoute est ajouté
window . addEventListener ( 'storage' , function ( e ) {
sessionStorage . setItem ( e . key , e . oldValue )
} ) ; Un code de limitation de bouton de base a été ajouté et v-preventReClick peut être lié au bouton.
// button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
inserted ( el , binding ) {
el . addEventListener ( "click" , ( ) => {
if ( el . style . pointerEvents !== "none" ) {
el . style . pointerEvents = "none"
setTimeout ( ( ) => {
el . style . pointerEvents = ""
} , 2000 )
}
} )
}
} ) Page de connexion,
Page de récupération du mot de passe,
404 pages,
Page d'accueil
npm uninstall mockjs --save
npm install mockjs -D
npm install
npm run serve
npm run build
npm run lint
docker build -t vue-admin . --no-cache
