w blog

W-Blog

beschreiben

Ein persönlicher Blog, der Spring Boot 2.x im Backend, NuxtJs im Frontend und Vue im Backend verwendet

Einführung

1. Link

   • Gitee-Link:
     • API: https://gitee.com/windsnowli/w-blog-api
     • Rezeption: https://gitee.com/windsnowli/vue-ssr-blog
     • Backend: https://gitee.com/windsnowli/vue-admin-blog
   • GitHub-Link:
     • API: https://github.com/WindSnowLi/w-blog-api
     • Rezeption: https://github.com/WindSnowLi/vue-ssr-blog
     • Backend: https://github.com/WindSnowLi/vue-admin-blog

2. Ein einfaches persönliches Blog-Projekt ist in drei Teile unterteilt:前台,后台und api .

   • API: Das Backend basiert auf SpringBoot . Verlässt sich hauptsächlich auf Mybatis , Mybatis-Redis , Redis , fastjson , DruidDataSource , Lombok , java-jwt , aliyun-sdk-oss , knife4j usw. Die Datenbank verwendet MySQL8.0+

   • Rezeption: Der Hauptstil der Rezeption stammt aus einer BizBlog Vorlage im Internet. Ich weiß nicht, woher sie ursprünglich stammt. Sie wurde basierend auf dem Original in ein nuxtJs -Projekt umgeschrieben.

   • Backend: Der in der Backend-Benutzeroberfläche verwendete vue-element-admin wird grundsätzlich direkt verwendet. Wenn Sie ihn selbst anpassen möchten, lässt dies die Stärke nicht zu.

3. Beispiel: Grünes Futter – Cai Dog

Beginnen Sie lokal

Starten Sie Projekt für Projekt

API: Die vom Front- und Backend angeforderte API verwendet dasselbe Projekt

1. git clone https://gitee.com/WindSnowLi/w-blog-api.git oder git clone https://github.com/WindSnowLi/w-blog-api.git um das Projekt lokal zu klonen

2. mvn clean install dependency:tree

3. Erstellen Sie eine Datenbank und stellen Sie sie auf UTF8 Kodierung ein ( utf8mb4 ).

4. Umgebungseinstellungen ändern

   • Ändern Sie die Datenbankkonfigurationsinformationen in der Entwicklungsumgebung application-dev.yml und der Produktionsumgebung application-prod.yml .
   • Ändern Sie Redis bezogene Informationen in redis.properties .
   • Hinweis: knife4j ist nur in der Entwicklungsumgebung aktiviert.

5. mvn clean package -Dmaven.test.skip=true überspringt Tests und generiert jar Pakete

6. java -jar 生成的包名.jar wird zum Ausführen der Entwicklungskonfigurationsumgebung verwendet. Die Datenbank wird beim ersten Start automatisch initialisiert (die Produktionsumgebung kann die zu ladende Konfigurationsdatei angeben --spring.profiles.active="prod" )

7. Besuchen Sie http://127.0.0.1:9000/doc.html um die api -Dokumentation anzuzeigen

8. Es wird empfohlen, IDEA zum Öffnen des Projektordners zu verwenden, um Abhängigkeiten automatisch zu verarbeiten und den Betrieb zu erleichtern.

Rezeption

1. git clone https://gitee.com/WindSnowLi/vue-ssr-blog.git oder git clone https://github.com/WindSnowLi/vue-ssr-blog.git klonen das Projekt auf lokal
2. npm install Installationsabhängigkeiten
3. Die host in der Datei config/sitemap.xml kann geändert werden, um eine Zugriffskarte zu generieren.
4. Die Portnummer in nuxt.config.js kann geändert werden
5. Sie können BASE_URL im script in der Datei package.json ändern, um die Backend- api -Adresse anzugeben.
6. npm run build
7. npm start lokal ausführen

Hinter der Bühne

1. git clone https://gitee.com/WindSnowLi/vue-admin-blog.git oder git clone https://github.com/WindSnowLi/vue-admin-blog.git klonen das Projekt auf lokal
2. npm install Installationsabhängigkeiten
3. npm run dev verwendet eine simulierte Datenvorschauschnittstelle
4. Ändern Sie die VUE_APP_BASE_API -Adresse in der Datei .env.production in die Adresse der Backend api
5. npm run build:prod kompilieren
6. Die kompilierten Dateien im dist Ordner können für den Zugriff unter dem http -Server abgelegt werden (Sie können npm verwenden, um http-server zu installieren).

Docker-Integration gestartet

1. git clone https://gitee.com/WindSnowLi/w-blog.git oder git clone https://github.com/WindSnowLi/w-blog.git klonen w-blog Repository auf lokal
2. cd w-blog um in das Stammverzeichnis w-blog zu wechseln
3. sh ./step-1-clone.sh klonen w-blog-api , vue-ssr-blog und vue-admin-blog Repository in das Stammverzeichnis
4. Ändern Sie die Konfigurationen für jedes Projekt
   1. w-blog-api -Projekt
      1. Ändern Sie die Datenbankkonfigurationsinformationen in der Entwicklungsumgebung application-dev.yml und der Produktionsumgebung application-prod.yml .
      2. Ändern Sie Redis bezogene Informationen in redis.properties .
      3. Hinweis: knife4j ist nur in der Entwicklungsumgebung aktiviert.
      4. redis可自行安装, oder Sie können relevante Einstellungen docker-compose.yml angeben
   2. vue-ssr-blog Projekt
      1. Die host in der Datei config/sitemap.xml kann geändert werden, um eine Zugriffskarte zu generieren.
      2. Die Portnummer in nuxt.config.js kann geändert werden
      3. Sie können BASE_URL im script in der Datei package.json ändern, um die Backend- api -Adresse anzugeben.
   3. vue-admin-blog Projekt
      1. Ändern Sie die VUE_APP_BASE_API -Adresse in der Datei .env.production in die Adresse der Backend api
5. sh ./step-2-build.sh installiert Abhängigkeiten und generiert zugehörige Dateien
6. Ändern Sie die relevante Portzuordnung und Ordnerzuordnung von docker-compose.yml
7. docker-compose up -d docker镜像generieren und ausführen

Schnittstellenanzeige

Rezeption

Hinter der Bühne

Lizenz

MIT

Copyright (c) 2021 WindSnowLi