Téléchargement ecommerce management system - ecommerce management system Téléchargement du code source

ecommerce management system

Autres catégories

1.0.0

Télécharger

Système de gestion back-end d’élément

Un système de gestion backend de commerce électronique basé sur Vue, utilisant un modèle de développement de séparation front-end et back-end. Les piles technologiques frontales utilisées dans le projet incluent Vue, vue-router, Element-UI, Axios, Echarts, etc.

Sélection technologique

Pile technologique frontale :

Vue
Vue-routeur
Élément-UI
Axios
Graphiques électroniques

fonction commerciale

Points techniques liés aux fonctions

1. Connexion utilisateur

Une fois que l'utilisateur s'est connecté avec succès, le client se souvient et conserve son statut de connexion via sessionStorage et token .
Contrôlez les autorisations d’accès des utilisateurs via Route Navigation Guard router.beforeEach . Empêchez les utilisateurs qui ne sont pas connectés d'essayer d'accéder à d'autres pages que la page de connexion via l'URL.

2.Mise en page de la page d'accueil

mise en page
- Implémentez la mise en page de la page d'accueil via la bibliothèque de composants Element-UI .
- Utilisez <el-menu> pour implémenter la barre de navigation latérale et ajoutez l'attribut activePath à sessionStorage pour garder la barre de navigation en surbrillance.
- L'icône dans la barre de navigation latérale utilise Iconfont Alibaba.
demande de données
- Demandez des données d'interface via Axios et ajoutez un jeton à l'intercepteur de requêtes axios pour garantir l'autorisation d'obtenir des données.
- Utilisez la barre de progression NProgress pour afficher la progression du chargement de la page (demande de données).

3. Gestion des utilisateurs-liste des utilisateurs

Utilisez <el-form> pour ajouter des formulaires utilisateur, personnaliser les règles de vérification des formulaires et mettre en œuvre la réinitialisation et la pré-vérification des formulaires avant la soumission.
Utilisez slot-scope pour obtenir des données de composants et personnaliser les modèles de rendu.

4.Gestion des autorisations

liste de rôles
- Utilisez une boucle v-for trois couches pour restituer respectivement les autorisations de premier, deuxième et troisième niveaux du rôle.
- Utilisez le contrôle d'arborescence <el-tree> pour afficher une liste d'autorisations attribuables à des rôles.
Liste des autorisations

5. Gestion des produits

Liste de produits
- Utilisez le filtre global Vue.filter pour personnaliser le format d'affichage des objets Date.
Ajouter un produit
- Utilisez le composant de barre d'étapes <el-steps> pour guider les utilisateurs dans la remplissage du formulaire d'ajout de produit en fonction du processus.
- Utilisez le composant <el-upload> pour permettre aux utilisateurs de télécharger des images de produits.
- Utilisez vue-quill-editor pour permettre aux utilisateurs de remplir le contenu du produit.
- Utilisez <el-form> pour remplir le formulaire d'ajout de produit, personnaliser les règles de vérification du formulaire et mettre en œuvre la pré-vérification avant la soumission du formulaire.
Paramètres de classification
Classement des produits
- Utilisez le composant de table arborescente vue-table-with-tree-grid pour afficher la classification des produits de premier, deuxième et troisième niveaux.

6. Gestion des commandes-liste des commandes

Utilisez le composant de chronologie <el-timeline> pour afficher les informations logistiques de la commande.

7. Statistiques de données-rapports de données

Utilisez Echarts pour afficher les rapports de données source utilisateur.

Dépendances du projet

Exécution de dépendances

axios => Envoyer la demande
graphiques => graphiques
element-ui => Bibliothèque de composants Element-UI
lodash => copie approfondie et fusion d'objets
nprogress => barre de progression
vue-quill-editor => Éditeur de texte enrichi
vue-table-with-tree-grid => table arborescente

Dépendances de développement

babel => conversion de la syntaxe ES6
eslint/babel-eslint => vérification de la syntaxe
sass/sass-loader => syntaxe sass
babel-plugin-transform-remove-console => Supprimer la console de l'environnement de production
@babel/plugin-syntax-dynamic-import => Chargement paresseux des routes

Optimisation du projet

1. Générer un rapport d'emballage

Consultez les rapports d'empaquetage via le panneau de visualisation Vue UI et analysez comment optimiser/compresser les fichiers trop volumineux.

2. Configurer le Webpack

Spécifiez différents fichiers d'entrée d'empaquetage pour le mode développement et le mode version via chainWebpack
1. Fichier d'entrée du mode développement src/main-dev.js
2. Fichier d'entrée du mode de publication src/main-prod.js
Dans l'environnement de production, certaines bibliothèques tierces trop volumineuses seront introduites à l'aide de CDN
Par défaut, les packages de dépendances tiers importés via la syntaxe d'importation seront finalement regroupés et fusionnés dans le même fichier, ce qui entraînera le problème selon lequel la taille du fichier unique est trop grande après un packaging réussi.
Afin de résoudre les problèmes ci-dessus, vous pouvez configurer les dépendances qui doivent charger des ressources CDN externes via le nœud externals de Webpack. Tous les packages de dépendances tiers déclarés dans externals ne seront pas empaquetés.

Personnalisez le contenu de la page d'accueil de différents environnements via des plug-ins (par exemple, utilisez l'importation pour importer les packages dépendants en mode développement et utilisez CDN pour importer en mode version)

 // Vue.config.js
config . plugin ( 'html' ) . tap ( args => {
    args [ 0 ] . isProd = true / false
    return args
} )

 <!-- index.html -->
< title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
< % if(htmlWebpackPlugin.options.isProd) { % >
    此处为CDN引入的第三方资源
< % } % >

3. Chargement paresseux des itinéraires

Lors de l'empaquetage de projets, des packages js trop volumineux affecteront la vitesse de chargement des pages.
Utilisez @babel/plugin-syntax-dynamic-import et modifiez le routage pour charger à la demande. Le composant correspondant sera chargé uniquement lors de l'accès à l'itinéraire.