Jddaojia
Einführung
JDDAOJIA ist eine mobile Web-E-Mail, die von JD.com erstellt wurde. Dieses Lagerhaus ist sein Front-End-Projekt. Für den Teil der Backend-API-Schnittstelle siehe: jddaojia-backapi.
Dieses Projekt implementiert grundlegende Vorgänge auf der E-Mall-Benutzerseite, einschließlich Anmeldemegetum, Produktdisplay, Einkaufswagen, Bestellplatzierung, historischer Auftragsabfrage, Sparen- und Bearbeitungsadresse und versucht, den einzigartigen UI-Stil von JD.com wiederherzustellen.
Siehe Demo -Video: Bilibili Video.
Technologie verwendet
- VUE3 + VUEX + VUE-ROUTER + VUE-CLI
- Axios
- Eslint
- Webpack
- SCSS
- Es6
Grundlegende Befehlszeilenvorgänge:
Installieren Sie Projektprojekt -Setup
Kompiliert und heiß-reloads für die Entwicklung
Kompiliert und minimiert für die Produktion
FINTS und behebt Dateien
Konfiguration anpassen
Siehe siehe:
Konfigurationsreferenz.
Erfolgreich rennen
Wenn der Prozess reibungslos verläuft und das Projekt in der Entwicklerumgebung erfolgreich ausgeführt wird, zeigt die Befehlszeile eine Eingabeaufforderung an, die dem folgenden ähnelt.
Verwenden Sie die darin angegebene URL, um auf die Seite zuzugreifen. Sie sollten jedoch zuerst den Back-End-Interface-Server des Projekts ausführen und standardmäßig Port 3000 verwenden.
Hinweis
- Sie können sich direkt über den Benutzernamen im Einkaufszentrum anmelden: admin und password: admin, um den Registrierungsprozess zu umgehen. Außerdem hat das Einkaufszentrum jetzt keine mobile SMS -Loginfunktion. Bitte verwenden Sie den Benutzernamen und das Passwort, um sich anzumelden.
- Das Projekt verwendet das REM -Schema, um adaptives Layout zu erreichen.
- Das Projekt wurde nur an Firefox- und Edge -Browsern getestet. Chrome- und Safari -Browser können auf Layout -Fehler stoßen. Wenn Sie welche finden, kontaktieren Sie mich bitte, um es zu ändern.
- Das Layout nutzt Flex voll und vereinfacht den CSS -Code.
- Die Einkaufswagenfunktion verwendet hauptsächlich Vuex und SessionStorage, um Daten auf der Client -Seite zu verwalten. Dies ist mein Ziel, lokalisierte Informationsmanagementfunktionen zu üben. Andere Funktionen verarbeiten hauptsächlich Daten im Backend.
- Die Anmeldeinformationen werden in SessionStorage gespeichert.
Verbesserungsanweisungen
- Es gibt noch Raum für Verbesserungen bei der Lade- und Präsentation von Seite, z. B. Cache, Reduzierung von Layout -Jitter usw.
- Unter bestimmten Einstellungen im Browser wird SessionStorage nicht gelöscht, selbst wenn die Seite geschlossen ist. Sie können festlegen, dass Sie nach dem Nichtbetrieb der Seite für einen bestimmten Zeitraum automatisch SessionStorage abmelden und löschen.
- Viele Teile, die HTTP -Anforderungen verwenden, können spezifischere Fehlerbehandlungsmethoden annehmen.
