[Top of the Full Stack] Node.js + Vue.js Full-Stack-Entwicklung der offiziellen Website und des Management-Backends von Honor of Kings Mobile
Dieses Projekt ist der relevante Quellcode von Bilibilis Top-of-Stack-Video-Tutorial https://github.com/wxs77577/node-vue-moba. Es wird kontinuierlich aktualisiert ... Bitte achten Sie darauf.
1. Erste Schritte
- Projekteinführung
- Werkzeuginstallation und Umgebungsaufbau (nodejs, npm, mongodb)
- Projekt initialisieren
2. Management-Hintergrund
Aufbau einer grundlegenden Backend-Verwaltungsschnittstelle basierend auf der Element-Benutzeroberfläche
Erstellen Sie Kategorien
Kategorieliste
Klassifizierung ändern
Kategorie löschen
Unterkategorie
Generische CRUD-Schnittstelle
Gerätemanagement
Bild-Upload (Multer)
Heldenmanagement
Held bearbeiten (Verknüpfung, Mehrfachauswahl, El-Select, Mehrfach)
Skills-Editor
Artikelverwaltung
Rich-Text-Editor (Feder)
Home-Werbemanagement
Administratorkontoverwaltung (bcrypt)
Anmeldeseite
Anmeldeschnittstelle (jwt, jsonwebtoken)
Überprüfung der Serveranmeldung
Client-Routing-Einschränkungen (beforeEach, Meta)
Anmeldeüberprüfung für hochgeladene Dateien (EL-Upload, Header)
3. Mobile Website
- „Tool Style“-Konzepte und SASS (SCSS)
- Stil zurückgesetzt
- Farb- und Schriftartendefinition der Website (Farben, Text)
- Definition des universellen Flex-Layoutstils (Flex)
- Häufig verwendete Randdefinitionen (Rand, Polsterung)
- Startseitenrahmen und oberes Menü
- Karussellbild oben auf der Homepage (Vue Swiper)
- Benutze Sprites
- Schriftartsymbole (iconfont) verwenden
- Kartenbestandteil (Karte)
- Listenkartenkomponenten (Listenkarte, Navigation, Swiper)
- Home News und Informationen – Dateneingabe (+Backend Bug Fix)
- Startseite Nachrichten und Informations-Daten-Schnittstelle
- Startseite Nachrichten- und Informationsschnittstellenanzeige
- Homepage-Heldenliste – Extrahieren Sie offizielle Website-Daten
- Heldenliste der Startseite – Daten eingeben
- Anzeige der Heldenliste auf der Startseite
- Seite mit Nachrichtendetails
- Nachrichtendetails – perfekt
- Hero-Details Seite-1-Front-End-Vorbereitung
- Heldendetails Seite-2-Backend-Bearbeitung
- Heldendetails Seite 3 oben im vorderen Ende
- Heldendetails Seite 4 – perfekt
4. Veröffentlichung und Bereitstellung (Alibaba Cloud)
- Für die Produktionsumgebung kompilieren
- Kaufen Sie Domainnamen und Server
- Auflösung von Domainnamen
- Nginx-Installation und -Konfiguration
- Installation und Konfiguration der MongoDB-Datenbank
- Git-Installation und Konfiguration SSH-Schlüssel
- Node.js installiert und konfiguriert das Taobao-Image
- Ziehen Sie den Code, installieren Sie pm2 und starten Sie das Projekt
- Konfigurieren Sie den Nginx-Reverse-Proxy
- Lokale Daten auf den Server migrieren (Mongodump)
5. Fortgeschritten
- Aktivieren Sie eine sichere HTTPS-Verbindung mit kostenlosem SSL-Zertifikat
- Verwenden Sie den Cloud-Speicher Alibaba Cloud OSS, um hochgeladene Dateien zu speichern
