Skip to content

blog-system build by springboot3 the frontend using vue3 and vuetify

Notifications You must be signed in to change notification settings

yaiiow159/Blog_app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

部落客系統

簡單的部落格系統,可以進行張貼文章以及撰寫評論回復留言等基本功能,如果是管理員身分的話可額外使用使用者管理、群組管理、權限管理等功能設置系統
可以在使用者資料上查看當前張貼文章數、評論數、按讚數等訊息,系統也能進行全文搜尋 利用文章內文 標題 作者等進行查詢
當使用者收藏其他作者的文章時 若該作者更改其文章內容或發佈新文章時,可從注冊mail中收到通知 利用kafka 線性序傳輸的特性 可保證資料不丟失 且 功能還在持續擴充中

待添加功能

  • 作者追蹤
  • 個人收藏
  • 個人文章
  • 個人儀錶板
  • 管理員儀錶板
  • 分析報告
  • 評論審核
  • 富文本編輯器

項目使用技術處理點

  • 使用springboot aop 用動態代理 對指定功能進行增強,再透過kafka傳輸寄送郵件訊息,透過kafka線性序列傳輸特點,可提高傳輸速度以及保證資料不丟失,確保郵件傳遞效率
  • 因應jwt無狀態的情況,為避免被有心人士擷取登入,設置黑名單並存放置redis中進行校驗
  • 避免登入時訪問資料庫次數過多,使用緩存quava-cache存儲使用者資訊,減少資料庫訪問次數
  • 使用redis 儲存驗證碼 refresh-token
  • 使用redisson鎖 透過aop 進行 方法判斷 設置delay時間 避免重複提交表單內容
  • 使用redis緩存 紀錄收藏數 按讚數等訊息 並設置過期時間避免數據更新 且取消緩存空值 避免緩存穿透問題
  • aop 紀錄 請求地址 以及花費時間等
  • 使用ApplicationEvent 監聽 Authetication 驗證狀況,如登入驗證成功,則記錄當下登入時間以及其他訊息,並保存置db中 並在登出時寫入登出時間
  • 使用Jsoup 過濾前端文章內文,避免sql注入等問題
  • 使用OpenApi生成文件以及後端測試接口
  • kafka 使用手動提交ack確保商業邏輯處理正確後才確認消費該筆消息成功,設置retry機制保證消息可正確消費成功,添加死信對列若消息消費失敗紀錄致database中顯示於前端提示

系統介紹:

使用springboot + vue 的前後端分離項目,使用spring-security進行功能的權限驗證管理、因項目是採取前後分離因此設定可採不同源訪問
前端採用vite搭建vue3項目 搭配vuetify進行前端頁面撰寫、使用pinia、router 進行路由管理以及使用者資料全局狀態管理
後端使用springboot搭建spring項目、使用restful建置controller功能項,並且統一管理錯誤處理、回應物件處理等增加統一性
搭配docker、dockerfile、docker-compos 進行容器化處理 以及maven-plugin 進行docker-build push等處理 上傳項目至docker-hub

前端項目網址: https://github.com/yaiiow159/blog-frontend

目前正在進行: 撰寫前端後端的CI/CD流程

系統流程說明 (構思說明)

前端使用axios來傳遞前端資料至後端,後端使用dto接收資料,並使用mapstructer來轉換dto至po物件並在dao層進行crud操作
系統可以針對容器化配置以及本地化配置有分別使用不同配k

流程圖:
blog_app系統流程圖 drawio

資料庫規劃: Diagram 1


使用技術介紹:


前端使用技術: vue3 + pinia(全局狀態管理) + sass + router(路由管理) + axios(前後端資料傳遞)
後端使用技術: springboot3 (spring配置框架) + spring-security(權限控制) + spring-data-jpa(dao層操作) + spring-scheduled(定時任務) + springboot-mail(郵件發送)
消息隊列: kafka + zookeeper
資料庫:mysql
非關係型資料庫:redis
文檔生成以及測試: openApi3
容器化: docker、docker-compose
容器化管理平台: portainer
雲服務技術: GCP(google-storage、computer-engine)


OpenApi3 測試後端Api 以及說明文檔

因應項目是前後端分離項目,導入openApi 可以針對後端Api進行測試 驗證回傳結果 測試前須先使用jwt token開放權限

openApi測試相關網址

http://localhost:9090/swagger-ui/index.html
http://localhost:9090/v3/api-docs

swagger測試相關

openApi測試
openApi測試開放

openApi Dto說明


容器化

項目有針對容器化環境進行項目配置,可使用dockerFile搭配docker-compose 集成 搭建項目所需環境,並搭配portainer檢控容器狀況 此構思是因應快速部屬環境以及部屬至雲服務 docker照片

容器化項目正常運行 docker項目正常運行


畫面預覽:

登入畫面

有進行格式校驗 以及驗證碼校驗 可註冊會員 或是忘記密碼重設等

登入畫面

使用者資訊

可查看當前使用者 總文章數、總文章按讚數、總評論數、總按讚數等資訊 使用者資訊

鎖戶功能

使用者啟用 提用

權限判斷:

jwy權限驗證2 jwt權限判斷 驗證token過期 權限驗證錯誤

重複提交檢驗

後端會進行檢驗判斷 利用redission鎖機制 在delay時間會釋放鎖 如時間內進行提交 會提出錯誤訊息

重複提交檢查

首頁畫面

首頁閱讀文章畫面 首頁畫面3

分類管理畫面

分類管理畫面 創建成功分類 分類管理畫面 分類管理更新成功 刪除成功

文章管理畫面

文章提供 倒攢、按讚、收藏、添加評論等功能

文章管理 文章管理閱讀 文章管理編輯 收藏功能 倒贊成功

評論功能

評論功能 評論按讚倒讚

標籤管理畫面

標籤編輯成功 - 複製 標籤管理頁面 - 複製 標籤管理功能畫面 - 複製 標籤新增成功 - 複製 標籤刪除成功 - 複製

使用者管理畫面

用戶管理新增成功 用戶管理頁面 用戶管理更新成功 用戶管理刪除成功

群組管理畫面

群組管理頁面 Uploading 標籤刪除成功 - 複製.png… 群組管理新增成功 群組管理畫面

角色管理畫面

角色管理編輯 角色管理新增 角色管理畫面 角色管理刪除

使用者登入紀錄畫面

使用者登入紀錄畫面

郵件通知畫面

郵件通知頁面

Releases

No releases published

Packages

No packages published

Languages