WhiteJotter
1.0.0
Dies ist ein einfaches Front-End- und Back-End-Trennprojekt, das hauptsächlich mit Vue.js + SpringBoot-Technologien entwickelt wurde.
Ich hoffe, dass das Projekt nicht nur als Einführungsübung dient, sondern auch als Gerüst für einige gängige Webprojekte verwendet werden kann, um Ihnen dabei zu helfen, den Prozess der Erstellung einer Website zu vereinfachen. Es wird White-Jotter genannt, weil es bei 0 beginnt und sich mit der Zeit allmählich verbessert.
Frontend-Repo: https://github.com/realdonald1994/WhiteJotter_Vue
Backend-Repo: https://github.com/realdonald1994/WhiteJotter
Willkommen beim White Jotter!
Als Anzeigeseite, einschließlich der wichtigsten Referenzmaterialien für die Entwicklung dieses Projekts, aktueller Aktualisierungen und des Slogans
Bietet eine Anzeigefunktion für Buch- und Filminformationen
Bereitstellung von Notizen und Anzeigefunktion für Blogbeiträge
Einschließlich Dashboard, Inhaltsverwaltung, Benutzer- und Berechtigungsverwaltung usw.
Persönliche Vorstellung und weiterführende Links
1.Vue.js
2.ElementUI
3.axios
4.Vuex
1. Frühlingsstiefel
2.Spring Data + JPA
3.MySQL
4.Shiro
1.Mysql
1.Centos7
2.Nginx
3.FastDFS
1. Juni
2. Scherz
1. Projekt auf lokal klonen
Frontend:
git clone https://github.com/realdonald1994/WhiteJotter_Vue
Backend:
git clone https://github.com/realdonald1994/WhiteJotter
2. Erstellen Sie eine Datenbank white_jotter in MySQL, führen Sie das Projekt aus und die Daten werden automatisch eingefügt.
Der Redis-Port ist 6379 (Standardport) und das Passwort ist leer.
3. Die Datenbank ist in der Datei application.properties im Verzeichnis src main resources des Backend-Projekts konfiguriert und die MySQL-Version ist 8.0.15.
4.Führen Sie das Backend-Projekt in IntelliJ IDEA aus. Um sicherzustellen, dass das Projekt erfolgreich ausgeführt wird, können Sie mit der rechten Maustaste auf pom.xml klicken und maven-> reimport auswählen und das Projekt neu starten
Zu diesem Zeitpunkt wurde der Server erfolgreich gestartet. Führen Sie gleichzeitig das Front-End-Projekt aus und besuchen Sie http: // localhost: 8080 Sie können die Anmeldeseite aufrufen. Das Standardkonto lautet admin und das Kennwort lautet 123
Wenn Sie eine sekundäre Entwicklung durchführen möchten, sehen Sie sich bitte weiterhin den fünften und sechsten Schritt an.
5.Geben Sie das Stammverzeichnis des Front-End-Projekts ein und geben Sie die folgenden Befehle der Reihe nach in die Befehlszeile ein:
# Install dependencies
npm install
# Start the project at localhost: 8080
npm run dev
Da im wj-front -Projekt die Portweiterleitung so konfiguriert wurde, dass die Daten an SpringBoot weitergeleitet werden, geben Sie nach dem Projektstart http: // localhost: 8080 in den Browser ein, um auf unser Front-End-Projekt zuzugreifen. Alle Anforderungen leiten Daten an SpringBoot weiter durch Portweiterleitung (beachten Sie, dass Sie das SpringBoot-Projekt zu diesem Zeitpunkt nicht schließen sollten).
6. Schließlich können Sie WebStorm und andere Tools verwenden, um das wj-front -Projekt zu öffnen und die Entwicklung fortzusetzen. Nachdem die Entwicklung abgeschlossen ist und das Projekt online gehen soll, geben Sie immer noch das Verzeichnis wj-front ein und führen dann den folgenden Befehl aus:
npm run build
Nachdem der Befehl erfolgreich ausgeführt wurde, wird ein dist Ordner im wj-front-Verzeichnis generiert und die beiden Dateien assets und index.html im Ordner können nach nginx kopiert werden. Geben Sie dann das Backend-Stammverzeichnis ein und führen Sie die Befehlszeile aus:
mvn clean install
Geben Sie abschließend den Befehl java -jar xxx.jar in das neu generierte target ein. Starten Sie den Back-End-Server.
Geben Sie die Befehlszeile unter der Nginx-Datei ein: start nginx . Starten Sie den Frontend-Server.
08-20 Redis hinzufügen
06-09 Unit-Test mit Vue-Test-Utils und Jest hinzufügen
06-04 Verwenden Sie gzip, um das Problem zu lösen, dass die Webseite langsam lädt
06-02 Das Projekt wird auf dem Cloud-Server bereitgestellt und die Website wird zum ersten Mal veröffentlicht ?
29.05. Separate Front-End- und Back-End-Projekte
04-20 Verwenden Sie den Open-Source-Markdown-Editor, um das Artikelanzeige- und Verwaltungsmodul zu erreichen
...
