BAI_SHOP

BAI_SHOP-Projekt

1. Projekteinführung

Projekteinführung: Dieses Projekt übernimmt das Front-End- und Back-End-Entwicklungsmodell, vue_shop ist die Front-End-Entwicklungscodedatei und vue_shop_server ist die Front-End-Produktionscodedatei Das direkte Ausführen von vue_shop_server ist viel einfacher als das direkte Ausführen von vue_shop

Technologie-Stack für Front-End-Projekte	veranschaulichen
Vue	Ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen
Vue-Router	vue-router ist der offizielle Routing-Manager von vue.js
Element-UI	ElementUI Element ist eine auf Vue 2.0 basierende Komponentenbibliothek für Entwickler, Designer und Produktmanager. Sie bietet unterstützende Designressourcen, damit Ihre Website schnell Gestalt annimmt.
Axios	axios ist eine Promise-basierte HTTP-Bibliothek, die in node.js-Umgebungen und Browsern verwendet werden kann
Echarts	Einfach ausgedrückt ist ECharts ein Plug-In, das von der Backend-Datenbank verwendet wird, um im Prozess von Internet-Entwicklungsprogrammen Daten auf Grafiken abzubilden.

Technologie-Stack für Backend-Projekte	veranschaulichen
Node.js	nodejs ist eine in C++ entwickelte Sprache, die auf der Serverseite ausgeführt wird. Sie kann Website-Hintergrundprogramme schreiben und serverseitige Anwendungsentwicklung durchführen.
Äußern	Express ist ein minimalistisches und flexibles Framework für die Entwicklung von Webanwendungen, das auf der Node.js-Plattform basiert. Es bietet eine Reihe leistungsstarker Funktionen, die Sie bei der Erstellung verschiedener Web- und Mobilgeräteanwendungen unterstützen.
wxya	Der JSON-Webtoken ist ein JSON-basierter offener Standard, der für die Bereitstellung von Ansprüchen in einer Webanwendungsumgebung implementiert ist
MySQL	Datenbank
Fortsetzung	Sequelize.js bietet einfachen Zugriff auf MySQL-, MariaDB-, SQLite- und PostgreSQL-Datenbanken, indem Datenbankeinträge Objekten oder Objekte Datenbankeinträgen zugeordnet werden. Kurz gesagt handelt es sich um ORM (Object-Relational-Mapper). Sequelize.js ist vollständig in JavaScript geschrieben und für Node.js-Umgebungen geeignet.

2. Beschreibung des Dokuments

1.vue_api_server-Dateibeschreibung

• config Konfigurationsdateiverzeichnis
  • default.json Standardkonfigurationsdatei (die Datenbankkonfiguration und JWT-Konfiguration enthält)
• dao -Datenzugriffsschicht, die die Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge der Datenbank speichert
  • Von DAO.js bereitgestellte öffentliche Datenbankzugriffsmethoden
• models speichert spezifische Datenbank-ORM-Modelldateien
• modules Projektmodule
  • authorization.js API-Berechtigungsüberprüfungsmodul
  • Datenbankmodul database.js (das Laden der Datenbank basiert auf dem Laden der Bibliothek „nodejs-orm2“)
  • passport.js basiert auf dem Login-Modul von Passport
  • Die einheitliche Rückgabeergebnisschnittstelle resextra.js API
• Module von Drittanbietern, von denen node_modules -Projekt abhängt
• Routeneinheitliches routes
  • api stellt eine API-Schnittstelle bereit
  • mapp bietet eine mobile APP-Schnittstelle
  • mweb bietet mobile Websites
• In dieser Schicht wird der services geschrieben und die über verschiedene Schnittstellen erhaltenen Daten in die vom einheitlichen Front-End benötigten Daten umgewandelt
• app.js Hauptprojekteintragsdatei
• package.json -Projektkonfigurationsdatei

2.vue_shop-Dateibeschreibung

• dist -Ordner Der nach der Projektverpackung generierte Ordner (für die Produktionsumgebung)

  • Enthält css , fonts , img , js , favicon.ico und index.html
  • Starten Sie einfach einen einfachen Server, mounten Sie das Projekt, führen Sie den Server aus und greifen Sie auf den Standardport zu
  • So führen Sie das gepackte Vue-Projekt aus: https://www.cnblogs.com/zhujiabin/p/10557982.html

• Der public Ordner speichert statische Ressourcen.

  • Enthält die Dateien favicon.ico und index.html

• Der Ordner src ist der Ordner, in dem das Quellprogramm gespeichert ist.

  • assets : speichert einige größere Ressourcendateien des Projekts, wie Bilder, Schriftarten usw.

  • components : speichert Projekt-Vue-Unterkomponenten

  • plugins : Vom Projekt eingeführte element-ui Komponenten

  • router : Projektrouting index.js

  • tools : Projekt-Tool-Klasse

  • App.vue : Vue-Root-Komponente

  • main.js : Web-Eingang

• Andere Konfigurationsdateien

  • .browserslistrc : Diese Konfiguration kann den Zielbrowser und die NodeJS-Version in verschiedenen Front-End-Tools teilen. Diese Tools können automatisch entsprechend dem Zielbrowser konfiguriert werden.
  • .editorconfig : Hilft Entwicklern, konsistente Codierungsstile für verschiedene Editoren und IDEs zu definieren und beizubehalten
  • .eslintignore : Dateien festlegen, die nicht von eslint überprüft werden ( ESLint ist ein Plug-in und konfigurierbares Tool zur Überprüfung von JavaScript-Grammatikregeln und Codestilen).
  • .eslintrc.js : eslint-Konfigurationsdatei
  • .gitignore : Dateien festlegen, die von Git ignoriert werden
  • .prettierrc : Wenn wir die Rechtsklick-Formatierung verwenden, hilft sie uns automatisch, die Symbole zu vervollständigen. Einige Symbole melden jedoch Syntaxfehler in eslint. Was müssen wir also tun? Sie können die Datei über .prettierrc konfigurieren
  • babel.config.js : Babel-Konfigurationsdatei ( Babel ist eine Toolkette, die hauptsächlich zum Konvertieren des ECMAScript-Versionscodes ab 2015 in abwärtskompatible JavaScript-Syntax verwendet wird, sodass er in aktuellen und älteren Versionen von Browsern oder anderen Umgebungen ausgeführt werden kann.)

3.vue_shop_server Dateibeschreibung

• Die von vue_shop im Ordner dist gepackten Projektdateien der Produktionsumgebung
• Enthält css , fonts , img , js , favicon.ico und index.html
  • Wenn Sie das Projekt ausführen, löschen Sie zuerst node_modules , geben Sie dann das Verzeichnis vue_shop_server ein und führen Sie npm install aus, um das neue Abhängigkeitspaket erneut herunterzuladen.
  • Nachdem das Abhängigkeitspaket heruntergeladen wurde, führen Sie den Befehl nodemon app.js im Dokumentfenster aus und besuchen Sie http://localhost:3000 um die Front-End-Seite des Projekts anzuzeigen.
• Der app.js Dateiserver führt die Eintragsdatei aus, die einige grundlegende Konfigurationen für den Server enthält.

3. Vorsichtsmaßnahmen für den Projektbetrieb

1. Laden Sie BAI_SHOP.zip herunter und entpacken Sie es

2. Geben Sie vue_api_server/db ein und importieren Sie mydb.sql im Ordner db in die MySQL-Datenbank

3. Nachdem die Daten erfolgreich importiert wurden, öffnen Sie die Datei default.json im config und konfigurieren Sie darin db_config .

4. Öffnen Sie das doc-Befehlsfenster, geben Sie das Verzeichnis vue_api_server ein und führen Sie den Befehl npm install aus, um die für das Projekt erforderlichen Abhängigkeiten zu laden.

5. Nachdem die Abhängigkeiten geladen wurden, führen Sie zum Ausführen nodemon app.js aus

6. Öffnen Sie ein neues Doc-Befehlsfenster, geben Sie das Verzeichnis vue_shop ein und führen Sie den Befehl npm install aus, um die für das Projekt erforderlichen Abhängigkeiten zu laden.

7. Nachdem die Abhängigkeiten geladen wurden, führen Sie im aktuellen Fenster den Befehl npm run serve aus, um das Projekt auszuführen. Wenn die Meldung Compiled successfully in xxxxms angezeigt wird, öffnen Sie den Browser und besuchen Sie localhost:8080

8. Nachtrag: Im Allgemeinen laufen Projekte im Entwicklungsmodus erfolgreich! Hinweis: Sie müssen zuerst über eine NodeJS-Umgebung verfügen! Und Sie müssen den Nodemon-Abhängigkeitscode global installieren: npm install nodemon -g

Wenn Sie ein Projekt im Produktionsmodus bereitstellen möchten, lesen Sie bitte die Dateibeschreibung vue_shop und vue_shop_server oben. Der Ordner dist ist die Datei, nachdem das vue-Projekt gepackt wurde.