vue store
1.0.0
Les vacances d’hiver 2020 sont particulièrement particulières car les écoles n’ont pas encore rouvert en raison de l’épidémie de pneumonie à nouveau coronavirus. Je me suis souvenu que j'avais utilisé mon temps libre pour apprendre Vue.js et Node.js le semestre dernier. J'ai toujours voulu réaliser un projet complet pour m'entraîner, mais je n'avais pas beaucoup de temps à l'école auparavant. Maintenant que j'ai du temps, je souhaite faire un projet pour consolider ce que j'ai appris auparavant.
Après de longues délibérations, j'ai finalement décidé de réaliser un projet de commerce électronique imitant le Xiaomi Mall. Cela fait peut-être longtemps et j'ai presque oublié beaucoup de choses que j'avais apprises auparavant. En réalisant ce projet, j'ai essentiellement suivi les documents officiels et je l'ai fait petit à petit. Il est inévitable qu'il y ait diverses choses à la maison qui retardent l'avancement du projet. Maintenant, c'est presque terminé. Partageons-le pour que les débutants puissent commencer. S'il y a des erreurs, donnez-moi quelques conseils.
Le front-end et le back-end de ce projet sont séparés. Le front-end est implémenté en référence à Xiaomi Mall. Cependant, cela n'a rien à voir avec le site officiel de Xiaomi. C'est purement un gâchis personnel. Produits Xiaomi, veuillez vous rendre au centre commercial officiel Xiaomi.
Il s'agit du front-end de ce projet. Veuillez passer au store-server pour le back-end.
Le front-end a été déployé sur Alibaba Cloud. Vous êtes invités à visiter http://101.132.181.9/ (il n'est pas compatible avec les appareils mobiles, veuillez utiliser un ordinateur pour y accéder).
Le backend a également été déployé sur Alibaba Cloud et l'adresse de l'interface a été modifiée en adresse en ligne. Le frontend exécuté localement peut également accéder normalement au backend.
Je suis en troisième année d'études de premier cycle et je commencerai un stage cet été. Je n'aurai peut-être pas autant de liberté à l'avenir, mais je mettrai à jour et améliorerai le projet de temps en temps. Si vous avez des questions, n'hésitez pas à les poser. directement dans les problèmes.
Si vous pensez que ce projet est bon, vous pouvez cliquer sur
Stardans le coin supérieur droit pour le soutenir. Merci ! ^_^
Le front-end et le back-end de ce projet sont séparés. Le front-end est basé sur Vue + Vue-router + Vuex + Element-ui + Axios , et est implémenté en référence à Xiaomi Mall. Le backend est implémenté sur la base de Node.js(Koa框架) + Mysql .
Le front-end contient 11 pages : page d'accueil, connexion, inscription, tous les produits, page de détails du produit, à propos de nous, ma collection, mon panier, page de règlement des commandes, ma page de commande et de gestion des erreurs.
Il implémente l'affichage des produits, la requête de classification des produits, la recherche par mot-clé, l'affichage des informations détaillées sur le produit, la connexion, l'enregistrement, le panier d'achat de l'utilisateur, le règlement des commandes, la commande de l'utilisateur, la liste des favoris de l'utilisateur et les fonctions de gestion des erreurs.
Le back-end adopte le modèle MVC et l'interface, la couche de contrôle et la couche de persistance des données correspondantes sont conçues en fonction des modules de données requis par le front-end. Adresse de livraison backend magasin-serveur.
Front-end : Vue + Vue-router + Vuex + Element-ui + Axios
Back-end : Node.js , Koa框架
Base de données : Mysql
La page utilise Dialog d'element-ui pour obtenir l'effet d'afficher la boîte de dialogue de masque. Le bouton登录est défini dans le composant racine App.vue, et l'affichage de la boîte de connexion est contrôlé via showLogin dans vuex .
Cette conception permet à l'utilisateur de se connecter en cliquant sur le bouton de la page, ou la boîte de connexion peut apparaître automatiquement après que l'utilisateur accède à une page qui nécessite une vérification de connexion ou que le backend renvoie une invite qui nécessite une vérification de connexion, réduisant ainsi les sauts de page. et simplifier les opérations des utilisateurs.
Les données saisies par les utilisateurs sont souvent peu fiables, de sorte que les informations de connexion sont vérifiées à la fois sur le front-end et sur le back-end de ce projet. Le front-end est basé sur la méthode de vérification de formulaire d'element-ui et dispose de règles de vérification personnalisées pour la vérification.
La page utilise également Dialog d'element-ui pour obtenir l'effet d'afficher la boîte de dialogue de masque.注册est défini dans le composant racine App.vue et la valeur transmise via le composant parent-enfant contrôle si la boîte d'enregistrement est affichée. .
Les données saisies par les utilisateurs sont souvent peu fiables, de sorte que les informations d'enregistrement sont également vérifiées sur le front-end et le back-end de ce projet. Le front-end est basé sur la méthode de vérification de formulaire d'element-ui et dispose de règles de vérification personnalisées pour la vérification.
La page d'accueil est principalement destinée à afficher les produits, avec un carrousel présentant les produits recommandés et les produits populaires affichés par catégorie.
La page de tous les produits intègre tous les affichages de produits, les requêtes de classification de produits et l'affichage des résultats de recherche de produits en fonction de mots-clés.
La page de détails du produit affiche principalement les informations détaillées d'un certain produit, où les utilisateurs peuvent ajouter leurs produits préférés au panier ou à la liste des favoris.
Le panier est implémenté à l'aide de vuex et l'effet de page fait référence au panier du centre commercial Xiaomi.
Pour un processus de mise en œuvre détaillé, veuillez consulter : Implémentation du panier d'achat Xiaomi Mall basé sur Vuex
Une fois que l'utilisateur a sélectionné le produit à acheter dans le panier et cliqué sur le bouton « Passer à la caisse », il arrive sur cette page. Ici, l'utilisateur sélectionne l'adresse de livraison, confirme les informations pertinentes sur la commande, puis confirme l'achat.
Les utilisateurs peuvent ajouter leurs produits préférés à la liste des favoris en cliquant sur le bouton Ajouter J'aime sur la page de détails du produit.
Afficher toutes les commandes passées par l'utilisateur.
Avis:
1. Clone project
git clone https://github.com/hai-27/vue-store.git
2. Project setup
cd vue-store
npm install
3. Compiles and hot-reloads for development
npm run serve
4. Compiles and minifies for production
npm run build
première page
Tous les produits
panier
ma collection
ma commande
Se connecter
registre
Auteur hai-27
8 mars 2020
