So implementieren Sie die Blog-Management-Plattform in Vue+SpringBoot

V Tribe ist eine Blog-Verwaltungsplattform für mehrere Benutzer. In diesem Artikel wird hauptsächlich die Entwicklung der Blog-Management-Plattform V Tribe von Vue+SpringBoot vorgestellt.

Demo-Adresse: http://45.77.146.32:8081/index.html

Projektadresse: https://github.com/lenve/VBlog

Anmeldeseite

Artikelliste

Artikel veröffentlichen

Benutzer Verwaltung

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 Frontend 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. Die Datenbankkonfiguration befindet sich in den application.properties von das SpringBoot-Projekt

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

OK Zu diesem Zeitpunkt können wir direkt http://localhost eingeben. 8081/index.html in der Adressleiste, um darauf zuzugreifen. Wenn unser Projekt eine sekundäre Entwicklung erfordert, fahren Sie bitte mit den Schritten fünf und sechs fort.

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

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

Da ich die Portweiterleitung im Vueblog-Projekt konfiguriert habe, um Daten an SpringBoot weiterzuleiten, geben Sie das Projekt nach dem Start ein http://localhost:8080 im Browser, um auf unser Front-End-Projekt zuzugreifen. Alle Anfragen übertragen Daten über die Portweiterleitung an SpringBoot (achten Sie darauf, das SpringBoot-Projekt zu diesem Zeitpunkt nicht zu schließen).

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 in das Verzeichnis resources/static/ im SpringBoot-Projekt kopiert Anschließend 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. Das habe ich für Sie zusammengestellt Dich in der Zukunft.

Verwandte Artikel:

vue vuex vue-rouert Berechtigungsrouting (ausführliches Tutorial)

So implementieren Sie orderBy Sortierung und Unschärfe in Angular Abfrage

So implementieren Sie sensible Textaufforderungen in Angular

So implementieren Sie die versteckte Anzeige in Angular

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Blog-Management-Plattform in Vue+SpringBoot. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!