Detailliertes Beispiel für die Vue+SpringBoot-Entwicklung der V-Tribe-Blog-Management-Plattform

V Tribe ist eine Blog-Verwaltungsplattform für mehrere Benutzer. In diesem Artikel wird hauptsächlich die Vue+SpringBoot-Entwicklung der V-Tribe-Blog-Management-Plattform vorgestellt. Freunde, die sie benötigen, können darauf verweisen.

V Tribe ist eine Blog-Verwaltungsplattform für mehrere Benutzer, die mit Vue+SpringBoot entwickelt wurde.

Anmeldeseite

Artikelliste

Artikel veröffentlichen

Benutzerverwaltung

Spaltenverwaltung

Datenstatistik

Technologie-Stack

Backend-Technologie-Stack

Das Backend verwendet hauptsächlich:

1. SpringBoot

2.SpringSecurity

3.MyBatis

4. Einige Schnittstellen folgen dem Restful-Stil

5.MySQL

Front-End-Technologie-Stack

Das Front-End verwendet hauptsächlich:

1.Vue

2.axios

3.ElementUI

4.vue-echarts

5.mavon-editor

6.vue-router

Es gibt andere triviale Technologien, die ich hier nicht auflisten werde. .

Schnell ausführen

1. Dieses Projekt lokal klonen

git@github.com:lenve/VBlog.git

2. Suchen Sie die Datei vueblog.sql im Ressourcenverzeichnis des Blogserver-Projekts und führen Sie sie in der MySQL-Datenbank aus.

3 Ändern Sie die Datenbankkonfiguration entsprechend Ihrer lokalen Situation. Eigenschaften des SpringBoot-Projekts

4. Führen Sie das Blogserver-Projekt in IntelliJ IDEA aus

OK Zu diesem Zeitpunkt wurde der Server direkt gestartet :8081/index.html in der Adressleiste Sie können auf unser Projekt zugreifen. Wenn Sie eine sekundäre Entwicklung durchführen möchten, fahren Sie bitte mit den Schritten fünf und sechs fort.

5. Betreten Sie das Vueblog-Verzeichnis und geben Sie die folgenden Befehle in die Konsole ein:

# 安装依赖
npm install
# 在 localhost:8080 启动项目
npm run dev

Da ich den Port im Vueblog-Projekt konfiguriert habe Weiterleitung , leiten Sie die Daten an SpringBoot weiter, sodass Sie nach dem Start des Projekts auf unser Front-End-Projekt zugreifen können, indem Sie http://localhost:8080 in den Browser eingeben. Bei allen Anfragen werden die Daten über die Portweiterleitung an SpringBoot weitergeleitet (beachten Sie dies). Schließen Sie das SpringBoot-Projekt nicht).

6. Schließlich können Sie Tools wie WebStorm verwenden, um das Vueblog-Projekt zu öffnen und die Entwicklung fortzusetzen. Wenn die Entwicklung abgeschlossen ist, gehen Sie immer noch in das Vueblog-Verzeichnis und führen Sie den folgenden Befehl aus:

npm run build

Nachdem der Befehl erfolgreich ausgeführt wurde, wird ein dist-Ordner im Vueblog-Verzeichnis generiert und die beiden Dateien static und index.html im Ordner werden kopiert das Verzeichnis resources/static/ im SpringBoot-Projekt, und dann können Sie wie in Schritt 4 direkt darauf zugreifen.

Schritt 5 erfordert, dass jeder etwas Erfahrung in der Verwendung von NodeJS, NPM usw. hat. Freunde, die damit nicht vertraut sind, können zuerst selbst suchen und lernen. Wir empfehlen das offizielle Vue-Tutorial.

Projektabhängigkeiten

1. vue-echarts

2. mavonEditor

Verwandte Empfehlungen:

Wie man es einfach macht PHP-Blog

Ein detailliertes Beispiel dafür, wie Angular die rekursive Anzeige von Blog-Kommentaren implementiert und Daten für Antwortkommentare erhält

Ressourcen zum Erstellen eines vollständigen Blogs System mit dem Yii2-Framework Share

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Vue+SpringBoot-Entwicklung der V-Tribe-Blog-Management-Plattform. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!