Stories

Detail Return Return

【項目實戰】SpringBoot+vue+iview打造一個極簡個人博客系統 - Stories Detail

📚項目介紹

個人極簡博客

【個人極簡博客】是一個適用於初學者學習的博客系統,其中包含文章分類、寫文章、標籤管理、用户管理等基礎功能,代碼簡潔註釋完善,易上手學習。技術棧基於SpringBoot+MybatisPlus+vue+iview等更多優秀組件及前沿技術開發,註釋豐富,代碼簡潔,開箱即用。極其適合嘗試全棧開發及實戰練手訓練也可以當作畢業設計進行二次開發,是個輕鬆學習的好機會

<p align="center">

<p align="center">
    <a href="https://cn.vuejs.org/">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2cbacee30e364a079bc858c759e35be8~tplv-k3u1fbpfcp-zoom-1.image" alt="iview">
    </a> 
    <a href="https://www.uviewui.com/">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1be593e8e6ff4596998f36c336ac5cbc~tplv-k3u1fbpfcp-zoom-1.image" alt="iview">
    </a> 
    <a href="https://shiro.apache.org/">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/139b927a083d4748b5114e3c5d85b0b4~tplv-k3u1fbpfcp-zoom-1.image" alt="shiro">
    </a> 
    <a href="http://spring.io/projects/spring-boot">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09465b4cc1094e68b870996769876b8b~tplv-k3u1fbpfcp-zoom-1.image" alt="spring-boot">
    </a>
    <a href="http://mp.baomidou.com">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d85f9c1d28564a9dad89e9b662a23790~tplv-k3u1fbpfcp-zoom-1.image" alt="mybatis-plus">
    </a>  
     <a href="http://hutool.cn/">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24ad29ffa17b45358ff0b9359ca4c05b~tplv-k3u1fbpfcp-zoom-1.image" alt="mybatis-plus">
    </a> 
    <a href="./LICENSE">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b12324744e654191adb46ed5465dc6fd~tplv-k3u1fbpfcp-zoom-1.image" alt="license Apache 2.0">
    </a>
</p>

</p>


🎁快速鏈接

公眾號:JavaDog程序狗

關注公眾號,發送 【blog】或【博客】,無任何套路即可獲得

在這裏插入圖片描述


🌱體驗地址

訪問地址

個人極簡博客

http://myblog.javadog.net

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述


🍯猜你喜歡

文章推薦

【項目實戰】SpringBoot+uniapp+uview2打造H5+小程序+APP入門學習的聊天小項目

【項目實戰】SpringBoot+uniapp+uview2打造一個企業黑紅名單吐槽小程序

【模塊分層】還不會SpringBoot項目模塊分層?來這手把手教你!

【ChatGPT】手摸手,帶你玩轉ChatGPT

【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 編輯器組件

🥎代碼結構圖

後端代碼

在這裏插入圖片描述

前端代碼

在這裏插入圖片描述


🛠️快速啓動

👸啓動前端

  1. 在blog-web項目目錄下下載依賴

    npm install 或者 cnpm install  
    1. 依賴下載成功後,在blog-web項目目錄下啓動項目

      npm run serve
  2. 啓動成功
    在這裏插入圖片描述


👦啓動後端

  1. 開發工具內配置好,並將maven配置好,建議使用阿里雲鏡像
  2. 選擇激活對應的環境,如本地則可使用dev

在這裏插入圖片描述

  1. blog-boot根路徑下的/db/db_blog.sql進行本地執行,並在application配置文件中修改數據庫配置
    在這裏插入圖片描述

在這裏插入圖片描述

  1. 運行啓動SpringBoot項目,如見到以下日誌即為啓動成功

在這裏插入圖片描述


🤑體驗

在這裏插入圖片描述
在這裏插入圖片描述


😊總結

本篇文章以實戰項目形式進行展開,適合咱初學者進行實際開發體驗,熟練SpringBoot+vue同時,也加深分層的思路。上手全棧開發,體驗實操的快感。項目雖小,但五臟俱全。希望大家在學習的同時,不要忘了點贊關注不迷路呦。


🧧Tips

如有想拿此項目做畢設或用於學習之外用途時,一定詢問徵求本狗意見,開源不易,加強版權意識。

優秀案例

詢問一下,略顯尊重

在這裏插入圖片描述

JavaDog 狗屋地址
個人博客 https://blog.javadog.net
公眾號 https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw
CSDN https://blog.csdn.net/baidu_25986059
掘金 https://juejin.cn/user/2172290706716775
知乎 https://www.zhihu.com/people/JavaDog
簡書 https://www.jianshu.com/u/1ff9c6bdb916
gitee https://gitee.com/javadog-net
GitHub https://github.com/javadog-net

Add a new Comments

Some HTML is okay.