【項目實戰】SpringBoot+vue+iview打造一個極簡個人博客系統
個人極簡博客是一個適用于初學者學習的博客系統，其中包含文章分類、寫文章、標簽管理、用戶管理等基礎功能，代碼簡潔注釋完善，易上手學習。技術?；赟pringBoot+MybatisPlus+vue+iview等更多優秀組件及前沿技術開發，注釋豐富，代碼簡潔，開箱即用。極其適合嘗試全棧開發及實戰練手訓練也可以當作畢業設進行二次開發，是個輕松學習的好機會。
基于SpringBoot+vue+iview個人極簡博客
??項目介紹
個人極簡博客
【個人極簡博客】是一個適用于初學者學習的博客系統，其中包含文章分類、寫文章、標簽管理、用戶管理等基礎功能，代碼簡潔注釋完善，易上手學習。技術?；?strong>SpringBoot+MybatisPlus+vue+iview等更多優秀組件及前沿技術開發，注釋豐富，代碼簡潔，開箱即用。極其適合嘗試全棧開發及實戰練手訓練也可以當作畢業設計進行二次開發，是個輕松學習的好機會。
??快速鏈接
公眾號：JavaDog程序狗
關注公眾號，發送 【blog】或【博客】，無任何套路即可獲得
??體驗地址
訪問地址
??猜你喜歡
文章推薦
【項目實戰】SpringBoot+uniapp+uview2打造H5+小程序+APP入門學習的聊天小項目
【項目實戰】SpringBoot+uniapp+uview2打造一個企業黑紅名單吐槽小程序
【模塊分層】還不會SpringBoot項目模塊分層？來這手把手教你！
【ChatGPT】SpringBoot+uniapp+uview2對接OpenAI，帶你開發玩轉ChatGPT
??猜你想問
1.如何熟練掌握全棧技術
2.如何將學到的知識應用實際項目
關注公眾號【JavaDog程序狗】，任何留言提問我都會一一回復，如果有需要可以直接聯系我，有問必答
??主要功能模塊
???模塊思維導圖
??web前端頁面
首頁
用戶通過域名根路徑訪問，如http://myblog.javadog.net/，查看首頁文章列表，以時間軸形式展示已發布的文章
文章詳情
用戶通過文章列表點擊后，跳轉文章詳情，其中包含文章標題、分類、標簽、發布時間等
?admin后臺管理
用戶訪問http://myblog.javadog.net/#/admin，如果登錄授權過則跳轉后臺，否則跳轉登錄注冊頁
注冊
未創建后臺用戶時，填入用戶名、密碼、確認密碼進行注冊
登錄
已創建后臺用戶時，填入用戶名、密碼進行登錄
首頁
登陸后默認打開【admin歡迎頁】，后期可根據訪問量進行首頁大屏分析圖展示迭代
文章
所有文章
點擊【所有文章】，展示所有文章列表，列表包含標題、狀態、分類、標簽、訪問、發布時間等，操作列中包含預覽、編輯、刪除等按鈕
分類目錄
點擊【分類目錄】，左側展示所有表單名稱、描述，可新增更新；右側展示分類列表
寫文章
點擊【寫文章】，其中包含markdown編輯器，文章標題，點擊【發布】后，彈出文章設置，表單包括文章標題、分類、標簽、摘要，可點擊發布或者選擇放置草稿箱
標簽
點擊【標簽】，左側展示表單標簽名、顏色，可新增更新；右側平鋪展示標簽
用戶
個人資料
點擊【個人資料】，左側展示個人信息表單包括頭像、昵稱、性別、出生日期、簡介，可進行更新；右側展示修改密碼表單包括原始密碼、新密碼、確認密碼，可進行密碼修改
??組件
后端組件
| 插件 | 版本 | 用途 |
|---|---|---|
| jdk | 1.8 | java環境 |
| lombok | 1.18.16 | 代碼簡化插件 |
| maven | 3.6.3 | 包管理工具 |
| druid | 1.1.24 | JDBC組件 |
| hutool | 5.7.20 | Java工具類庫 |
| mybatis-plus | 3.4.1 | 基于 MyBatis 增強工具 |
| mysql | 8.0 / 5.7 | 數據庫 |
前端組件
| 插件 | 版本 | 用途 |
|---|---|---|
| vue | ^2.6.10 | 漸進式的 JavaScript 框架 |
| iview | ^4.0.2 | 一套基于 Vue.js 的高質量UI 組件庫 |
| vue-router | ^3.0.6 | 為 Vue.js 提供富有表現力、可配置的、方便的路由 |
| vuex | ^3.2.0 | 一個專為 Vue.js 應用程序開發的狀態管理模式 + 庫 |
| vue-color | ^2.8.1 | 顏色選擇器插件 |
| moment | ^2.29.4 | js工具庫 |
| axios | ^1.3.2 | 一個基于promise的網絡請求庫 |
| core-js | ^3.27.2 | JavaScript 的模塊化標準庫 |
| mavon-editor | ^2.10.4 | 基于 Vue 的 Markdown 編輯器組件 |
??代碼結構圖
后端代碼
前端代碼
???快速啟動
??啟動前端
- 在blog-web項目目錄下下載依賴
npm install 或者 cnpm install - 依賴下載成功后，在blog-web項目目錄下啟動項目
npm run serve - 啟動成功
??啟動后端
- 開發工具內配置好，并將maven配置好，建議使用阿里云鏡像
- 選擇激活對應的環境，如本地則可使用dev
- 將blog-boot根路徑下的/db/db_blog.sql進行本地執行，并在application配置文件中修改數據庫配置
- 運行啟動SpringBoot項目，如見到以下日志即為啟動成功
??體驗
??總結
本篇文章以實戰項目形式進行展開，適合咱初學者進行實際開發體驗，熟練SpringBoot+vue同時，也加深分層的思路。上手全棧開發，體驗實操的快感。項目雖小，但五臟俱全。希望大家在學習的同時，不要忘了點贊關注不迷路呦。
??Tips
如有想拿此項目做畢設或用于學習之外用途時，一定詢問征求本狗意見，開源不易，加強版權意識。
優秀案例
詢問一下，略顯尊重
posted on 2023-04-26 08:42 JavaDog程序狗 閱讀(67) 評論(0) 編輯 收藏 舉報
