vue store
1.0.0
Die Winterferien 2020 sind besonders besonders, da der Schulbetrieb aufgrund der neuartigen Coronavirus-Lungenentzündungsepidemie noch nicht begonnen hat. Ich erinnerte mich, dass ich letztes Semester meine Freizeit genutzt habe, um Vue.js und Node.js zu lernen. Ich wollte immer ein komplettes Projekt zum Üben erstellen, aber vorher hatte ich nicht so viel Zeit in der Schule. Da ich nun etwas Zeit habe, möchte ich ein Projekt durchführen, um das bisher Gelernte zu festigen.
Nach langem Überlegen habe ich mich schließlich dazu entschlossen, ein E-Commerce-Projekt zu machen, das die Xiaomi Mall nachahmt. Vielleicht ist es lange her und ich habe viele Dinge, die ich zuvor gelernt habe, fast vergessen. Bei diesem Projekt habe ich mich im Grunde genommen an die offiziellen Dokumente gehalten und es Stück für Stück gemacht. Es ist unvermeidlich, dass es zu Hause verschiedene Dinge gibt, die den Fortschritt des Projekts verzögern. Jetzt ist es fast fertig. Teilen Sie es mit, damit Neulinge loslegen können. Wenn es Fehler gibt, geben Sie mir bitte einen Rat.
Das Front-End und das Back-End dieses Projekts sind in Bezug auf die Xiaomi-Mall getrennt. Es handelt sich jedoch um eine rein persönliche Angelegenheit Xiaomi-Produkte finden Sie im offiziellen Xiaomi-Einkaufszentrum.
Dies ist das Front-End dieses Projekts. Bitte wechseln Sie für das Back-End auf den Store-Server.
Das Frontend wurde auf Alibaba Cloud bereitgestellt. Sie können gerne http://101.132.181.9/ besuchen (es ist nicht mit mobilen Geräten kompatibel, bitte verwenden Sie einen Computer für den Zugriff).
Das Backend wurde ebenfalls in der Alibaba Cloud bereitgestellt und die Schnittstellenadresse wurde in eine Online-Adresse geändert. Das lokal laufende Frontend kann auch normal auf das Backend zugreifen.
Ich befinde mich im dritten Jahr meines Grundstudiums und werde diesen Sommer ein Praktikum beginnen. Ich werde in Zukunft vielleicht nicht mehr so viele Freiheiten haben, aber ich werde das Projekt von Zeit zu Zeit aktualisieren und verbessern. Wenn Sie Fragen haben, stellen Sie diese bitte direkt in Issues.
Wenn Sie denken, dass dieses Projekt gut ist, können Sie oben rechts auf
Starklicken, um es zu unterstützen. ^_^
Das Front-End und das Back-End dieses Projekts sind getrennt. Das Front-End basiert auf Vue + Vue-router + Vuex + Element-ui + Axios und wird unter Bezugnahme auf Xiaomi Mall implementiert. Das Backend ist auf Basis von Node.js(Koa框架) + Mysql implementiert.
Das Frontend enthält 11 Seiten: Startseite, Login, Registrierung, alle Produkte, Produktdetailseite, Über uns, Meine Sammlung, Warenkorb, Bestellabwicklungsseite, Meine Bestellung und Fehlerbehandlungsseite.
Es implementiert Produktanzeige, Produktklassifizierungsabfrage, Stichwortsuche für Produkte, Anzeige von Produktdetailinformationen, Anmeldung, Registrierung, Benutzer-Warenkorb, Auftragsabwicklung, Benutzerbestellung, Benutzerfavoritenliste und Fehlerbehandlungsfunktionen.
Das Back-End übernimmt das MVC-Modell und die entsprechende Schnittstelle, Steuerungsschicht und Datenpersistenzschicht werden entsprechend den vom Front-End benötigten Datenmodulen entworfen. Backend-Lieferadressen-Speicherserver.
Frontend: Vue + Vue-router + Vuex + Element-ui + Axios
Backend: Node.js , Koa框架
Datenbank: Mysql
Die Seite verwendet den Dialog von element-ui, um den Effekt zu erzielen, dass das Maskendialogfeld angezeigt wird. Die登录wird in der App.vue-Stammkomponente festgelegt, und ob das Anmeldefeld angezeigt wird, wird über showLogin Status in vuex gesteuert.
Bei diesem Design kann sich der Benutzer anmelden, indem er auf die Schaltfläche auf der Seite klickt, oder das Anmeldefeld kann automatisch angezeigt werden, nachdem der Benutzer auf eine Seite zugegriffen hat, die eine Anmeldebestätigung erfordert, oder das Backend gibt eine Eingabeaufforderung zurück, die eine Anmeldebestätigung erfordert, wodurch Seitensprünge reduziert werden und Vereinfachung der Benutzeroperationen.
Die von Benutzern eingegebenen Daten sind oft unzuverlässig, daher werden die Anmeldeinformationen sowohl am Front-End als auch am Back-End dieses Projekts überprüft. Das Front-End basiert auf der Formularüberprüfungsmethode von element-ui und verfügt über benutzerdefinierte Überprüfungsregeln.
Die Seite verwendet auch den Dialog von element-ui, um den Effekt zu erzielen, dass das Maskendialogfeld angezeigt wird.注册wird in der App.vue-Stammkomponente festgelegt, und der über die übergeordnete/untergeordnete Komponente übergebene Wert steuert, ob das Registrierungsfeld angezeigt wird .
Die von Benutzern eingegebenen Daten sind oft unzuverlässig, daher werden die Registrierungsinformationen auch im Front-End und im Back-End dieses Projekts überprüft. Das Front-End basiert auf der Formularüberprüfungsmethode von element-ui und verfügt über benutzerdefinierte Überprüfungsregeln.
Die Homepage dient hauptsächlich der Anzeige von Produkten, wobei ein Karussell empfohlene Produkte und beliebte Produkte nach Kategorien anzeigt.
Die Gesamtproduktseite integriert die gesamte Produktanzeige, Produktklassifizierungsabfrage und Produktsuchergebnisanzeige basierend auf Schlüsselwörtern.
Auf der Produktdetailseite werden hauptsächlich detaillierte Informationen zu einem bestimmten Produkt angezeigt, auf der Benutzer ihre Lieblingsprodukte in den Warenkorb oder in die Favoritenliste legen können.
Der Warenkorb wird mit Vuex implementiert und der Seiteneffekt bezieht sich auf den Warenkorb der Xiaomi Mall.
Den detaillierten Implementierungsprozess finden Sie unter: Implementierung des Xiaomi Mall Shopping Cart basierend auf Vuex
Nachdem der Nutzer im Warenkorb das zu kaufende Produkt ausgewählt und auf den Button „Zur Kasse gehen“ geklickt hat, gelangt er auf diese Seite. Hier wählt der Nutzer die Lieferadresse aus, bestätigt die relevanten Informationen zur Bestellung und bestätigt anschließend den Kauf.
Benutzer können ihre Lieblingsprodukte zur Favoritenliste hinzufügen, indem sie auf der Produktdetailseite auf die Schaltfläche „Gefällt mir hinzufügen“ klicken.
Alle vom Benutzer aufgegebenen Bestellungen anzeigen.
Beachten:
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
Titelseite
Alle Produkte
Warenkorb
meine Sammlung
meine Bestellung
Einloggen
registrieren
Autor hai-27
8. März 2020
