【项目实战】SpringBoot+vue+iview打造一个极简个人博客系统

我就是我 2024-05-11 09:06 74阅读 0赞

## 极简个人博客 ##

##### 基于SpringBoot+vue+iview极简个人博客 #####

### ?项目介绍 ###

#### 个人极简博客 ####

【个人极简博客】是一个**适用于初学者学习的博客系统**，其中包含文章分类、写文章、标签管理、用户管理等基础功能，代码简洁注释完善，易上手学习。技术栈基于**SpringBoot+MybatisPlus+vue+iview**等更多优秀组件及前沿技术开发，注释丰富，代码简洁，开箱即用。极其适合**尝试全栈开发及实战练手训练**也可以当作**毕业设计**进行二次开发，是个**轻松学习的好机会**。

[ ![iview][] ][_iview_] [ ![iview][iview 1] ][_iview_iview 1_] [ ![shiro][] ][_shiro_] [ ![spring-boot][] ][_spring-boot_] [ ![mybatis-plus][] ][_mybatis-plus_] [ ![mybatis-plus][mybatis-plus 1] ][_mybatis-plus_mybatis-plus 1_]  ![license Apache 2.0][]

--------------------

### ?快速链接 ###

#### 公众号：**JavaDog程序狗** ####

**关注公众号，发送 【blog】或【博客】，无任何套路即可获得**

![在这里插入图片描述][b606f389dd5b49b8baa27ab37a2470cb.png]

--------------------

### ?体验地址 ###

#### 访问地址 ####

[个人极简博客][Link 1]

> http://myblog.javadog.net

![在这里插入图片描述][25287f35ccb0484aba6bdf246bb484ec.png]  
![在这里插入图片描述][29ca5a874cad4a8d9e02f27d7e143a1c.png]  
![在这里插入图片描述][681019047bf24646ac2e9663a07f5e14.png]

--------------------

#### ?猜你喜欢 ####

##### 文章推荐 #####

[【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目][SpringBoot_uniapp_uview2_H5_APP]  
[【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序][SpringBoot_uniapp_uview2]  
[【模块分层】还不会SpringBoot项目模块分层？来这手把手教你！][SpringBoot]  
[【ChatGPT】手摸手，带你玩转ChatGPT][ChatGPT_ChatGPT]  
[【ChatGPT】SpringBoot+uniapp+uview2对接OpenAI，带你开发玩转ChatGPT][ChatGPT_SpringBoot_uniapp_uview2_OpenAI_ChatGPT]

--------------------

#### ?猜你想问 ####

##### 1.如何熟练掌握全栈技术 #####

##### 2.如何将学到的知识应用实际项目 #####

关注公众号【**JavaDog程序狗**】，任何留言提问我都会一一回复，如果有需要可以直接联系我，**有问必答**

![在这里插入图片描述][1397a3641ec74b318adfdee60cdd6b9e.png]

### ?主要功能模块 ###

#### ?️模块思维导图 ####

![在这里插入图片描述][16415993f83f488daf8e2d489557483e.png]

--------------------

#### ?web前端页面 ####

##### 首页 #####

用户通过域名根路径访问，如[http://myblog.javadog.net/][http_myblog.javadog.net]，查看**首页文章列表**，以**时间轴**形式展示**已发布的文章**  
![在这里插入图片描述][c0feb17cc4fa4e75a2ca5a4897b87a47.png]

##### 文章详情 #####

用户通过**文章列表点击后**，跳转**文章详情**，其中包含文章标题、分类、标签、发布时间等

![在这里插入图片描述][b13627e1317649b9be6552af711531b1.png]

--------------------

#### ⛄admin后台管理 ####

用户访问[http://myblog.javadog.net/\#/admin][http_myblog.javadog.net_admin]，如果**登录授权过则跳转后台**，否则跳转**登录注册页**

##### 注册 #####

**未创建后台用户时**，填入**用户名、密码、确认密码**进行注册  
![在这里插入图片描述][1a06dbe169bd4b22b14808aae2c94f83.png]

--------------------

##### 登录 #####

**已创建后台用户时**，填入**用户名、密码**进行登录

![在这里插入图片描述][fe8d595f26104e65af32cec5c6545b17.png]

--------------------

##### 首页 #####

登陆后默认打开【admin欢迎页】，后期可根据访问量进行**首页大屏分析图**展示迭代

![在这里插入图片描述][f28596b9c3104bcb8af510ed0536f82a.png]

--------------------

##### 文章 #####

###### 所有文章 ######

点击【所有文章】，展示所有**文章列表**，列表包含**标题、状态、分类、标签、访问、发布时间**等，操作列中包含**预览、编辑、删除**等按钮  
![在这里插入图片描述][35e568af74194335849e7b2944e6e204.png]

###### 分类目录 ######

点击【分类目录】，**左侧**展示所有表单**名称、描述**，可新增更新；**右侧**展示分类列表  
![在这里插入图片描述][582e33138d4848cda5ac327048ceb562.png]

###### 写文章 ######

点击【写文章】，其中包含**markdown编辑器，文章标题**，点击【发布】后，弹出文章设置，表单包括**文章标题、分类、标签、摘要**，可点击**发布**或者选择放置**草稿箱**

![在这里插入图片描述][6348b9b487cb4e9f97e3df69d73138d8.png]

###### 标签 ######

点击【标签】，**左侧**展示表单**标签名、颜色**，可新增更新；**右侧**平铺展示标签  
![在这里插入图片描述][fad8cc081fba4a43b97ad4bf8f8608a3.png]

--------------------

##### 用户 #####

###### 个人资料 ######

点击【个人资料】，左侧展示**个人信息表单包括头像、昵称、性别、出生日期、简介**，可进行更新；右侧展示**修改密码表单**包括**原始密码、新密码、确认密码，可进行密码修改**

![在这里插入图片描述][216a737435634ff9a821676cc5838bd7.png]

--------------------

### ?组件 ###

#### 后端组件 ####

<table> 
 <thead> 
  <tr> 
   <th>插件</th> 
   <th>版本</th> 
   <th>用途</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>jdk</td> 
   <td>1.8</td> 
   <td>java环境</td> 
  </tr> 
  <tr> 
   <td>lombok</td> 
   <td>1.18.16</td> 
   <td>代码简化插件</td> 
  </tr> 
  <tr> 
   <td>maven</td> 
   <td>3.6.3</td> 
   <td>包管理工具</td> 
  </tr> 
  <tr> 
   <td>druid</td> 
   <td>1.1.24</td> 
   <td>JDBC组件</td> 
  </tr> 
  <tr> 
   <td>hutool</td> 
   <td>5.7.20</td> 
   <td>Java工具类库</td> 
  </tr> 
  <tr> 
   <td>mybatis-plus</td> 
   <td>3.4.1</td> 
   <td>基于 MyBatis 增强工具</td> 
  </tr> 
  <tr> 
   <td>mysql</td> 
   <td>8.0 / 5.7</td> 
   <td>数据库</td> 
  </tr> 
 </tbody> 
</table>

#### 前端组件 ####

<table> 
 <thead> 
  <tr> 
   <th>插件</th> 
   <th>版本</th> 
   <th>用途</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>vue</td> 
   <td>^2.6.10</td> 
   <td>渐进式的 JavaScript 框架</td> 
  </tr> 
  <tr> 
   <td>iview</td> 
   <td>^4.0.2</td> 
   <td>一套基于 Vue.js 的高质量UI 组件库</td> 
  </tr> 
  <tr> 
   <td>vue-router</td> 
   <td>^3.0.6</td> 
   <td>为 Vue.js 提供富有表现力、可配置的、方便的路由</td> 
  </tr> 
  <tr> 
   <td>vuex</td> 
   <td>^3.2.0</td> 
   <td>一个专为 Vue.js 应用程序开发的状态管理模式 + 库</td> 
  </tr> 
  <tr> 
   <td>vue-color</td> 
   <td>^2.8.1</td> 
   <td>颜色选择器插件</td> 
  </tr> 
  <tr> 
   <td>moment</td> 
   <td>^2.29.4</td> 
   <td>js工具库</td> 
  </tr> 
  <tr> 
   <td>axios</td> 
   <td>^1.3.2</td> 
   <td>一个基于promise的网络请求库</td> 
  </tr> 
  <tr> 
   <td>core-js</td> 
   <td>^3.27.2</td> 
   <td>JavaScript 的模块化标准库</td> 
  </tr> 
  <tr> 
   <td>mavon-editor</td> 
   <td>^2.10.4</td> 
   <td>基于 Vue 的 Markdown 编辑器组件</td> 
  </tr> 
 </tbody> 
</table>

--------------------

### ?代码结构图 ###

#### 后端代码 ####

![在这里插入图片描述][bba83e2437494380a597ab7c3b162f5c.png]

#### 前端代码 ####

![在这里插入图片描述][592ca96d350c49409ce39cf2c6e85920.png]

--------------------

### ?️快速启动 ###

#### ?启动前端 ####

1.  在blog-web项目目录下下载依赖
    
        npm install 或者 cnpm install
2.  依赖下载成功后，在blog-web项目目录下启动项目
    
        npm run serve
3.  启动成功  
    ![在这里插入图片描述][2421fa5c2280412aa85b6b453d037760.png]

--------------------

#### ?启动后端 ####

1.  开发工具内配置好，并将**maven**配置好，建议使用**阿里云镜像**
2.  选择激活对应的环境，如本地则可使用**dev**  
    ![在这里插入图片描述][f43b824b23d040698da312606c613868.png]
3.  将**blog-boot根路径**下的\*\*/db/db\_blog.sql\*\*进行本地执行，并在application配置文件中修改数据库配置  
    ![在这里插入图片描述][cddf44d2433347c7a4523e6a8ea1079d.png]  
    ![在这里插入图片描述][ca951d331cac450b92c063800c9f2303.png]
4.  运行启动SpringBoot项目，如见到以下日志即为启动成功  
    ![在这里插入图片描述][9b887a24a9d44faf9e428c1c1092834f.png]

--------------------

### ?体验 ###

![在这里插入图片描述][d8412bf444b345058bf67ca87a4709ef.png]  
![在这里插入图片描述][27ff51a142c94875b59d6b45a514b26f.png]

--------------------

### ?总结 ###

本篇文章以**实战项目**形式进行展开，适合咱**初学者**进行实际开发体验，熟练**SpringBoot+vue**同时，也加深分层的思路。上手全栈开发，体验实操的快感。项目虽小，但五脏俱全。希望大家在学习的同时，不要忘了**点赞关注**不迷路呦。

--------------------

### ?Tips ###

如有想拿此项目做**毕设或用于学习之外用途时**，一定**询问征求本狗意见**，开源不易，加强版权意识。

**优秀案例**

> 询问一下，略显尊重

![在这里插入图片描述][29ea8e165af649fe98a913105a76d371.png]

![e74f3636c05a430eab8819333fa004eb.jpeg][]

<table> 
 <thead> 
  <tr> 
   <th align="center">JavaDog</th> 
   <th align="center">狗屋地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">个人博客</td> 
   <td align="center"><a href="https://blog.javadog.net" rel="nofollow">https://blog.javadog.net</a></td> 
  </tr> 
  <tr> 
   <td align="center">公众号</td> 
   <td align="center"><a href="https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw" rel="nofollow">https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw</a></td> 
  </tr> 
  <tr> 
   <td align="center">CSDN</td> 
   <td align="center"><a href="https://blog.csdn.net/baidu_25986059" rel="nofollow">https://blog.csdn.net/baidu_25986059</a></td> 
  </tr> 
  <tr> 
   <td align="center">掘金</td> 
   <td align="center"><a href="https://juejin.cn/user/2172290706716775" rel="nofollow">https://juejin.cn/user/2172290706716775</a></td> 
  </tr> 
  <tr> 
   <td align="center">知乎</td> 
   <td align="center"><a href="https://www.zhihu.com/people/JavaDog" rel="nofollow">https://www.zhihu.com/people/JavaDog</a></td> 
  </tr> 
  <tr> 
   <td align="center">简书</td> 
   <td align="center"><a href="https://www.jianshu.com/u/1ff9c6bdb916" rel="nofollow">https://www.jianshu.com/u/1ff9c6bdb916</a></td> 
  </tr> 
  <tr> 
   <td align="center">gitee</td> 
   <td align="center"><a href="https://gitee.com/javadog-net" rel="nofollow">https://gitee.com/javadog-net</a></td> 
  </tr> 
  <tr> 
   <td align="center">GitHub</td> 
   <td align="center"><a href="https://github.com/javadog-net" rel="nofollow">https://github.com/javadog-net</a></td> 
  </tr> 
 </tbody> 
</table>

[iview]: https://img.shields.io/badge/vue-2.x-green.svg
[_iview_]: https://cn.vuejs.org/
[iview 1]: https://img.shields.io/badge/iview-4.x-blue.svg
[_iview_iview 1_]: https://www.uviewui.com/
[shiro]: https://img.shields.io/badge/shiro-1.3.2-pink.svg
[_shiro_]: https://shiro.apache.org/
[spring-boot]: https://img.shields.io/badge/spring--boot-2.4.0-orange.svg
[_spring-boot_]: http://spring.io/projects/spring-boot
[mybatis-plus]: https://img.shields.io/badge/mybatis--plus-3.4.1-blue.svg
[_mybatis-plus_]: http://mp.baomidou.com
[mybatis-plus 1]: https://img.shields.io/badge/hutool-5.7.20-dark.svg
[_mybatis-plus_mybatis-plus 1_]: http://hutool.cn/
[license Apache 2.0]: https://img.shields.io/badge/license-Apache%202-red
[b606f389dd5b49b8baa27ab37a2470cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/2b1bd7accf494a3cbfd76e6dbc0058a2.png
[Link 1]: http://myblog.javadog.net
[25287f35ccb0484aba6bdf246bb484ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/0f7e5409c5164fed9b32e9d08ad7a679.png
[29ca5a874cad4a8d9e02f27d7e143a1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/552c1cb7b2d046bc87897cddfb863d56.png
[681019047bf24646ac2e9663a07f5e14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/610fafbd35804dcabff4ad4a88662384.png
[SpringBoot_uniapp_uview2_H5_APP]: https://mp.weixin.qq.com/s/g7AZOWLgW5vcCahyJDEPKA
[SpringBoot_uniapp_uview2]: https://mp.weixin.qq.com/s/t_qwF_HvkdW-6TI3sYUHrA
[SpringBoot]: https://mp.weixin.qq.com/s/fpkiNR2tj832a6VxZozwDg
[ChatGPT_ChatGPT]: https://mp.weixin.qq.com/s/9wEelbTN6kaChkCQHmgJMQ
[ChatGPT_SpringBoot_uniapp_uview2_OpenAI_ChatGPT]: https://mp.weixin.qq.com/s/b19J36Eo3-ba7bHbWzoZYQ
[1397a3641ec74b318adfdee60cdd6b9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/9a4a6843478d42578b0c38cc23d43f6b.png
[16415993f83f488daf8e2d489557483e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/f40abb30487b44318656287a107c0273.png
[http_myblog.javadog.net]: http://myblog.javadog.net/
[c0feb17cc4fa4e75a2ca5a4897b87a47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/6210c284046f4a89bccbe294ce3a1b7a.png
[b13627e1317649b9be6552af711531b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/73e862e8b93e4791bb97fbbffcaca074.png
[http_myblog.javadog.net_admin]: http://myblog.javadog.net/#/admin
[1a06dbe169bd4b22b14808aae2c94f83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/95bd5c484c034c18b1c4b812809c09e7.png
[fe8d595f26104e65af32cec5c6545b17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/cec01ac03a5b44aaa4cc06b8e472eae1.png
[f28596b9c3104bcb8af510ed0536f82a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/78fa73cb09e44b58a1c5d97dbc445378.png
[35e568af74194335849e7b2944e6e204.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/59ba923642e9460f92edf835dfa3d450.png
[582e33138d4848cda5ac327048ceb562.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/74e47f31a78d4e509db4351dbffa65cc.png
[6348b9b487cb4e9f97e3df69d73138d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/672d1358a2af464a8edc782ec0e2f992.png
[fad8cc081fba4a43b97ad4bf8f8608a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/0cc07dfe8fce4df1b91ff31a9d6f8958.png
[216a737435634ff9a821676cc5838bd7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/b69f8ebe3d3f4719921c42accfd58756.png
[bba83e2437494380a597ab7c3b162f5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/875551d79c104d2a815d7fb4f2c56791.png
[592ca96d350c49409ce39cf2c6e85920.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/b2ac3e03641147319d32eb24b4985a95.png
[2421fa5c2280412aa85b6b453d037760.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/2c4c25d94ff945e18fa200c2eaf08f9f.png
[f43b824b23d040698da312606c613868.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/736721ac0c12435c91a8c3737bf61e2b.png
[cddf44d2433347c7a4523e6a8ea1079d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/7bf5fc2ed28b462abadf290c9201f260.png
[ca951d331cac450b92c063800c9f2303.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/db8d762b793f4a138450934899ec6be7.png
[9b887a24a9d44faf9e428c1c1092834f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/d973828f4d974348a2f5e6725a6a5658.png
[d8412bf444b345058bf67ca87a4709ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/f8bd20f3d70c4e319369f6de78e008aa.png
[27ff51a142c94875b59d6b45a514b26f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/0f039e2f82f643a4aa337410b7da9443.png
[29ea8e165af649fe98a913105a76d371.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/7fb7e855ee3f4d2b9fd81c238d7c0679.png
[e74f3636c05a430eab8819333fa004eb.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/d14858d8f0f74f4c9979b7e124f98fba.jpeg