JDdaojia

Jddaojia

Introduction

JDDAOJIA est un e-mail Web Mobile construit en imitant JD.com . Cet entrepôt est son projet frontal. Pour la partie d'interface API backend, voir: Jddaojia-Backapi.

Ce projet met en œuvre des opérations de base du côté des utilisateurs de l'e-commercial, y compris l'enregistrement de connexion, l'affichage des produits du magasin, le panier d'achat, le placement des commandes, la requête de commande historique, l'adresse de sauvegarde et d'édition, et essaie de restaurer le style d'interface utilisateur unique de JD.com.

Voir la vidéo de démonstration: Bilibili Video.

Technologie utilisée

• Vue3 + Vuex + Vue-Router + Vue-Cli
• axios
• Eslint
• webpack
• SCSS
• ES6

Opérations de ligne de commande de base:

Installer la configuration du projet de projet

 npm install

Compiles et recharges à chaud pour le développement

 npm run serve

Compiles et minifie pour la production

 npm run build

Lints et corrige les fichiers

 npm run lint

Personnaliser la configuration

Voir voir:
Référence de configuration.

Courir avec succès

Si le processus se déroule bien et que le projet s'exécute avec succès dans l'environnement de développement, la ligne de commande affichera une invite similaire à ce qui suit.

Utilisez l'URL qui y est donnée pour accéder à la page. Cependant, vous devez d'abord exécuter le serveur d'interface back-end du projet et utiliser le port 3000 par défaut.

indice

• Vous pouvez vous connecter au centre commercial directement via le nom d'utilisateur: admin et mot de passe: admin pour contourner le processus d'enregistrement. De plus, le centre commercial n'a désormais pas de fonction de connexion SMS mobile, veuillez utiliser le nom d'utilisateur et le mot de passe pour se connecter.
• Le projet utilise le schéma REM pour réaliser la disposition adaptative.
• Le projet n'a été testé que sur les navigateurs Firefox et Edge. Les navigateurs Chrome et Safari peuvent rencontrer des bugs de mise en page. Si vous en trouvez, veuillez me contacter pour le modifier.
• La disposition utilise pleinement le flex et simplifie le code CSS.
• La fonction de panier utilise principalement Vuex et SessionStorage pour gérer les données du côté client, ce qui est mon objectif de pratiquer les capacités localisées de gestion des informations. D'autres fonctions traitent principalement les données sur le backend.
• Les informations de connexion sont stockées dans SessionStorage.

Directions d'amélioration

• Il y a encore de la place à l'amélioration des performances de chargement des pages et de la présentation, comme l'utilisation du cache, la réduction de la gigue de mise en page, etc.
• Sous certains paramètres du navigateur, SessionStorage ne sera pas effacé même si la page est fermée. Vous pouvez le définir après avoir non fonctionné la page pendant un certain temps, vous vous déconnectez automatiquement et effacerez SessionStorage.
• De nombreuses pièces qui utilisent les demandes HTTP peuvent adopter des méthodes de traitement des erreurs plus spécifiques.