w blog

w-blog

描述

一個後端使用Spring Boot 2.x、前台使用nuxtJs、後台使用vue的個人博客

簡介

1. 連結

   • Gitee連結：
     • api： https://gitee.com/windsnowli/w-blog-api
     • 前台： https://gitee.com/windsnowli/vue-ssr-blog
     • 後台： https://gitee.com/windsnowli/vue-admin-blog
   • GitHub連結：
     • api： https://github.com/WindSnowLi/w-blog-api
     • 前台： https://github.com/WindSnowLi/vue-ssr-blog
     • 後台： https://github.com/WindSnowLi/vue-admin-blog

2. 一個簡單的個人部落格項目，共分為了前台、后台、 api三個部分。

   • api: 後端基於SpringBoot 。主要依賴Mybatis 、 Mybatis-Redis 、 Redis 、 fastjson 、 DruidDataSource 、 Lombok 、 java-jwt 、 aliyun-sdk-oss 、 knife4j等，資料庫使用的是MySQL8.0+

   • 前台: 前台的主要樣式是來自網路上了一個BizBlog模板，最初來自哪我不得而知，在原本的基礎上改寫成了nuxtJs專案。

   • 後台: 後台UI套用的vue-element-admin，基本上是直接拿來用了，想自己定制著實實力不允許。

3. 例：綠色食品——菜狗

本地啟動

逐一計畫啟動

api：前台後台請求的api使用的是同一個項目

1. git clone https://gitee.com/WindSnowLi/w-blog-api.git或git clone https://github.com/WindSnowLi/w-blog-api.git克隆專案到本地

2. mvn clean install dependency:tree安裝依賴

3. 建立資料庫，並設定為UTF8編碼（ utf8mb4 ）

4. 修改環境設定

   • 修改開發環境application-dev.yml及生產環境application-prod.yml中的資料庫設定資訊；
   • 修改redis.properties中的Redis相關資訊；
   • 註： knife4j只在開發環境中活化。

5. mvn clean package -Dmaven.test.skip=true跳過測試並產生jar封包

6. java -jar 生成的包名.jar運行開發配置環境，初次運行會自動初始化資料庫（生產環境可指定已載入的設定檔--spring.profiles.active="prod" ）

7. 造訪http://127.0.0.1:9000/doc.html查看api文檔

8. 推薦使用IDEA開啟專案資料夾自動處理依賴、方便執行

前台

1. git clone https://gitee.com/WindSnowLi/vue-ssr-blog.git或git clone https://github.com/WindSnowLi/vue-ssr-blog.git克隆專案到本地
2. npm install安裝依賴
3. 可修改config/sitemap.xml檔案中的host位址，用於產生存取地圖
4. 可修改nuxt.config.js中的連接埠號
5. 可修改package.json檔案中的script中的BASE_URL來指定後端api位址
6. npm run build編譯
7. npm start本地運行

後台

1. git clone https://gitee.com/WindSnowLi/vue-admin-blog.git或git clone https://github.com/WindSnowLi/vue-admin-blog.git克隆專案到本地
2. npm install安裝依賴
3. npm run dev使用模擬資料預覽介面
4. 修改.env.production檔案中的VUE_APP_BASE_API位址為後端api的位址
5. npm run build:prod編譯
6. dist資料夾下的為編譯好的文件，可放到http伺服器下（可使用npm安裝http-server ）進行訪問

Docker整合啟動

1. git clone https://gitee.com/WindSnowLi/w-blog.git或git clone https://github.com/WindSnowLi/w-blog.git克隆w-blog倉庫至本地
2. cd w-blog切換進w-blog根目錄
3. sh ./step-1-clone.sh克隆w-blog-api 、 vue-ssr-blog 、 vue-admin-blog倉庫至根目錄
4. 修改各項目相關配置
   1. w-blog-api項目
      1. 修改開發環境application-dev.yml及生產環境application-prod.yml中的資料庫設定資訊；
      2. 修改redis.properties中的Redis相關資訊；
      3. 註： knife4j只在開發環境中活化。
      4. redis可自行安装，也可docker-compose.yml指定相關設置
   2. vue-ssr-blog項目
      1. 可修改config/sitemap.xml檔案中的host位址，用於產生存取地圖
      2. 可修改nuxt.config.js中的連接埠號
      3. 可修改package.json檔案中的script中的BASE_URL來指定後端api位址
   3. vue-admin-blog項目
      1. 修改.env.production檔案中的VUE_APP_BASE_API位址為後端api的位址
5. sh ./step-2-build.sh安裝依賴產生相關文件
6. 修改docker-compose.yml的相關連接埠映射和資料夾映射
7. docker-compose up -d產生docker镜像並運行

介面展示

前台

後台

License

MIT

Copyright (c) 2021 WindSnowLi