SpringCloud acimage

次元印象

次元印象，一個SpringCloud構建的動漫交流論壇

前言

傳說Github上的中國程式設計師有一半是二次元，於是為了吸引更多star我邊學SpringCloud技術邊開發了這個動漫交流論壇。

項目介紹

次元印象( acimage ) 是一個基於SpringCloud構建的前後端分離的動漫交流論壇。後端使用SpringCloud + Mybatis-Plus + Reids + Rabbitmq + Elasticsearch 。前端使用Vue + ElementUi + Vite 。項目已經上線。各位Github的二次元們，還不來點個star(๑•̀ㅂ•́)و✧。

網址

*次元印象o( ≧▽≦)ツ~動漫交流論壇www.acimage.top （只適配網頁端，如果畫面顯小，可以適當放大瀏覽器，視覺效果更佳）。

首頁

論壇頁

系統架構

專案功能

使用者前台

• 以圖識圖，即上傳圖片，辨識出論壇內相似圖片及其所在主題。
• 多樣化搜索，可以同時根據關鍵字、分類、標籤以及排序字段等搜索，並根據關鍵字高亮匹配文字。
• 相關話題推薦，隨機推薦。
• 話題排行榜（依star、瀏覽量、留言數等、活躍時間排行）。
• 用戶排行榜（依話題數、star等排行）。
• 分類、標籤，並且點選可篩選出符合相關分類或標籤的話題。
• 即時展示最新活躍話題。
• 敏感詞過濾，圖片壓縮。
• 訊息通知
• 查看個人動態、修改個人資訊。
• 登入、註冊、登出，驗證碼防刷，郵箱驗證。
• 發表話題，評論，star等。

後台管理

• 較為完善的RBAC權限控制，可動態調整使用者角色、角色權限、介面權限等。
• 網站基本資料展示，訪客量，介面呼叫數等。
• 首頁輪播圖片管理。
• 話題、評論、用戶管理。

專案特點

• JWT實現單一登錄，網關統一身份認證和鑑權，完善的RBAC權限控制。
• 利用Redis+Lua腳本+定時任務對變動比較頻繁的資料（瀏覽量等）定時持久化。
• 利用Redis+Lua腳本+自訂註解，只需一個註解就可以實現針對ip、使用者、和整體請求量的限流。
• 利用Dhash演算法實現以圖識圖功能，效果還可以。
• 上傳的圖片皆用webp壓縮，大幅減少頻寬壓力。

專案目錄

後端服務

• acimage_gateway ：網關，統一身分認證、鑑權，分別針對使用者和整體請求量的限流
• acimage_user ：使用者中心，使用者註冊、登錄，郵件服務等
• acimage_community ：社群服務，負責論壇主題相關的核心功能
• acimage_image ：圖片服務，負責話題圖片上傳、頭像上傳、以圖識圖等功能
• acimage_admin : 管理服務

後端模組

• acimage_common ：公共模組，存放實體類別、公共的攔截器、公共配置以及公共工具類別等
• acimage_feign ：放置各個模組的feign客戶端

前端

• vue_manage_system ：後台管理頁面
• vue_acimage_web ：入口網站頁面

其它

• doc : 一些文件、圖片和資料庫文件

運行與部署

目前專案仍在不斷改進，運行與部署流程以後再更新。

• 將doc/sql下的三個資料庫分別匯入mysql中，四個資料庫分別是四個前台服務對應的資料庫

• 在每個服務的application-dev.yml檔案中設定mysql、redis、rabbitmq 、 nacos對應的位址或帳號密碼

• 填寫acimage_common中的application-qiniu-template.yml中的七牛雲帳號信息，包括access-key 、 secret-key 、 domian 、 bucket ，或者給這四個屬性隨便賦值（不能為空，否則NPE ），但是這樣無法使用上傳圖片。並將application-qiniu-template.yml重新命名為application-qiniu.yml

• 在acimage_common模組的下的application.yml配置nacos位址、 sentinel位址（ sentinel不配也不影響運作）

• 啟動nacos、redis、rabbitmq、mysql

• 依序啟動acimage_user 、 acimage_community 、 acimage_image 、 acimage_gateway ，不這樣啟動的話可能會由於rabbitmq佇列建立和綁定順序的問題報錯，如果遇到了，則全部服務再重新啟動一遍。

• 運行前端（具體看vue_acimage_web的README ）後點擊預設彈出的連結即可存取首頁

• 前台登入**：使用者：wk，密碼：wk123456 （還有幾個使用者可以從資料庫sql檔案看到，密碼都是使用者名稱123456）

• 連接埠：

  • acimage_user : 8100

  • acimage_image : 8090

  • acimage_community : 8080

  • acimage_gateway : 8070

技術選型

後端技術堆疊

SpringBoot 、 SpringCloud 、 MyBatis-plus 、 Druid （資料庫連接池）、 Redis （分散式快取）、 Rabbitmq （訊息佇列）、 Elasticsearch （分散式搜尋引擎）、 Minio （物件儲存服務）、 Nginx （反向代理伺服器） 、 Docker （應用容器引擎）

使用者介面前端

Vue2 、 Vue Router （路由）、 ElementUi （Vue基礎元件庫）、 axios （http客戶端）、 jsencrypt （基於RSA加解密的js庫）、 vue-dompurify-html （防xss攻擊）、 tinymce-vue （富文字編輯器）

後台管理介面前端

Vite 、 TypeSript

Todo

• 分類、標籤
• 主題、用戶排行榜
• 隨機推薦
• 相似話題推薦
• 敏感詞過濾
• 介面冪等
• 細化限流
• 完善RABC權限控制，網關統一身分認證及鑑權
• 增加郵件服務，信箱驗證，驗證碼等
• 將圖片儲存在minio（原來儲存在七牛雲）
• elasticsearch多樣化搜索，關鍵字高亮
• 增加用戶訊息通知功能
• 利用redis+lua批量提取快取中話題和瀏覽量等，減少通訊次數，即時展示資料。
• 增加評論表情
• 增加關注功能
• 完善sentinel和nacos等配置和使用
• 增加爬蟲模組
• 完善單元測試
• 等等等

交流

專案起初是為了學習技術搭建的，由於能力有限，還有很多不完善的地方，歡迎各位能夠指正。如果有人有興趣（多麼希望真的有人感興趣手動摀臉）或者該項目遇到什麼問題或有什麼建議提issue，可聯繫郵箱[email protected]或進群692992463交流。喜歡的話記得點個star。

網站截圖

Web端

Admin端<br>管理系統隨便放幾張吧，反正管理系統都長一樣。

開源協議

Apache License 2.0