基於 Springboot Vue 快速構建輕量級實用的部落格系統

Mondo 科技 更新 2024-02-05

去年7月,一想到我有備用伺服器放在那裡就是一種浪費,而我恰好有網域名稱備案,所以我考慮在公共網路上部署乙個部落格系統。 於是我去了github,找到了乙個看起來比較好的開源部落格專案,這個專案的技術棧和現在主流的網際網絡應用架構是一樣的,比如用SpringCloud微服務、中介軟體、ES等。

但是部署起來非常困難,這個專案大約有5個微服務,更不用說ES這樣的中介軟體了,在我自己的伺服器(1核2G)的配置下,這顯然是不可行的。

因此,我決定編寫自己的輕量級部落格系統,該系統可以用最少的資源進行部署,而不會丟失功能。

tip以下是我用 SpringBoot+Vue 搭建的輕量級部落格原始碼,有興趣可以自己獲取。

// git**。

本部落格專案在功能上分為後台管理端和前端使用者端,管理端主要負責維護博文、檢視使用者範圍行為等,使用者端主要用於展示博文並提供使用者互動功能(點讚、評論等)。

預覽位址:單頁部落格。

部落格主頁

部落格詳細資訊

點讚評論

管理員輸入賬號密碼後,即可進入管理頁面

在部落格管理選單下,有文章、主題、標題和類別管理

在文章管理下,我們首先建立文章並設定標題和類別等基本資訊

然後,在列表頁,雙擊標題進入文章詳情編輯頁面,對文章進行編輯預覽

還有乙個專門的選單,用於部落格的使用者行為日誌

部落格的技術架構採用前後端分離,前端頁面基於 Vue+element-ui 元件庫進行開發、編譯和打包,服務端使用 Springboot 框架進行自動化配置,按需引入入門元件,實現業務功能邏輯開發。

前後端獨立,相互依存,降低開發部署影響風險,提高開發效率。

前端頁面獨立使用 vue+element-ui

後端採用m**en+springboot,按照功能模組進行分層設計,雖然目前打包為單體專案,但方便在需要時獨立部署

部落格詳細資訊內容編輯使用開源且功能強大的富文字編輯器 wangeditor(5.)。1.23)

Wangeditor5 是一款基於 j**ascript 開發的 Web 富文字編輯器,多達 20 個常用功能,簡單易用,易於維護,提供擴充套件外掛程式、上傳服務等相關資源,讓我們在開發過程中可以更好的使用。

部落格管理端的資源許可權認證框架使用SpringSecurity+OAuth2+JWT框架。 SpringSecurity 是 Spring 框架的安全框架,用於提供身份認證和授權功能,使用 OAuth2 實現認證伺服器統一發放認證令牌,主要用於單點登入(SSO),生成令牌的資料格式使用 JWT,具有可靠性和自驗證性。

tip我已經封裝了SpringSecurity + OAuth2 + JWT作為入門,我只需要介紹一下對應的伺服器CION就可以使用了,有興趣可以自己獲取。

// git**。

該項目的業務比較簡單,主要是查詢,比如查詢詳情頁、列表頁,顯然系統的主要效能瓶頸是資料庫QPS,所以我決定使用二級快取(Redis+本地快取),市面上已經有比較流行的框架JetCache了。

Jetcache是阿里巴巴集團基於Spring和Redis的開源分布式快取框架,其主要特點包括:基於註解、多級快取、高效能、易用性。

直接在所需方法上新增快取的注釋@cached

要執行專案,我們需要提前安裝 jdk (1.)8)、mysql(>=5.7) Redis、nginx(靜態資源**)第二種是將編譯好的靜態資源和功能服務jar檔案打包到伺服器。

這裡用的是docker安裝,具體安裝過程在本文中不再贅述對管理 UI 的更改。 env.production 檔案,然後執行 npm 命令將其打包

使用者 UI 更改。 env.production 檔案,然後執行 npm 命令將其打包

將編譯打包好的靜態檔案上傳到伺服器首頁對應目錄下,配置nginxconf**

server 

客戶端 UI。

location ^~/webui

在本地執行MVN Clean Install命令,將JAR檔案編譯打包並上傳到伺服器nginx.配置conf介面,執行j**a -jar命令啟動j**a程式

server 

客戶端介面。

location ^~/api

j**a -jar -xms300m -xmx300m yeee-app-bootstrap-1.0.0-snapshot.jar >./startup-blog.log&

至此,我已經通過功能介紹、技術架構和部署流程,完全介紹了我的開源輕量級部落格系統,如果有任何問題可以在評論區交流,也可以去 github 提交 PR 或者問我問題,謝謝大家的支援。

tip以下是我用 SpringBoot+Vue 搭建的輕量級部落格原始碼,有興趣可以自己獲取。

// git**。

相關問題答案

    基於Java SpringBoot和Vue的醫院資訊管理掛號系統

    總結 醫院資訊管理系統 HIMS 是應用於醫療機構的資訊管理系統,旨在提高醫療服務質量,降低運營成本,提高工作效率,滿足患者需求。通過對醫院內各種資訊的整合 管理和共享,實現醫療資源的有效利用和優化配置。HIMS的實施和應用,將有助於提高醫院的管理水平,提高醫療服務質量,降低醫療成本,實現醫療資源的...

    基於 Prometheus Grafana 4 設定 IT 監控和告警的最佳實踐

    看到像面孔一樣的文字,大家好,我是小飛,上一篇文章介紹了發電機YML 檔案配置和 prometheusYML檔案配置,包括檔案服務自動發現機制,以及基於生成器YML配置,根據SNMP匯出器提供的生成器,生成SNMPYML配置檔案等,今天主要講解官方環境的配置和情況,包括虛擬機器節點匯出器節點資料採集...

    基於 Prometheus Grafana 3 設定 IT 監控和告警的最佳實踐

    大家好,我是小飛。延續上一部分,主要講解配置檔案的用途和說明,上一部分鏈結如下 Prometheus Grafana 構建 IT 監控和告警最佳實踐 擴充套件交換機的資料採集,因為節點匯出器採集器完善,使用官網模板採集資料基本滿足當前需求,沒有定製需求,而且Grafana的面板在Grafana官網上...

    基於Python Flask MySQL的後台許可權管理系統

    基於 Python flaskmysql之後台許可權管理系統。該專案主要依賴 django mysqlbootstrap基於Python Flask MySQL的後台許可權管理系統,用於對系統登入使用者的許可權進行管理和區分。在 python 中.測試通過,專案包含需求檔案,方便環境遷移。可以使用資...

    基於Transformer模型的長文字生成研究

    隨著神經網路的快速發展,Transformer模型作為一種基於注意力機制的深度學習習模型,在長文字生成任務的自然語言處理領域嶄露頭角。本文將介紹基於Transformer模型的長文字生成,重點介紹其在語義理解和創造性表達中的應用。從單詞到句子再到文字,Transformer 模型學習語言 習 的結構...