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

简介: 这是一个基于 SpringBoot+MybatisPlus+Vue+Iview 技术栈构建的个人极简博客系统,适合初学者实战练习。项目包含文章分类、撰写文章、标签管理和用户管理等功能,代码简洁并配有详细注释,易于上手。此外,该项目也可作为毕业设计的基础进行二次开发。

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


📚项目介绍

个人极简博客

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


🎁快速链接

公众号: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
    
    AI 代码解读
    1. 依赖下载成功后,在blog-web项目目录下启动项目
      npm run serve
      
      AI 代码解读
  2. 启动成功

👦启动后端

  1. 开发工具内配置好,并将maven配置好,建议使用阿里云镜像
  2. 选择激活对应的环境,如本地则可使用dev

  1. blog-boot根路径下的/db/db_blog.sql进行本地执行,并在application配置文件中修改数据库配置

  1. 运行启动SpringBoot项目,如见到以下日志即为启动成功

🤑体验


😊总结

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


🧧Tips

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

优秀案例

询问一下,略显尊重

目录
打赏
0
0
0
0
32
分享
相关文章
微服务——SpringBoot使用归纳——Spring Boot开发环境搭建和项目启动
本文介绍了Spring Boot开发环境的搭建和项目启动流程。主要内容包括:jdk的配置(IDEA、STS/eclipse设置方法)、Spring Boot工程的构建方式(IDEA快速构建、官方构建工具start.spring.io使用)、maven配置(本地maven路径与阿里云镜像设置)以及编码配置(IDEA和eclipse中的编码设置)。通过这些步骤,帮助开发者顺利完成Spring Boot项目的初始化和运行准备。
33 0
微服务——SpringBoot使用归纳——Spring Boot开发环境搭建和项目启动
微服务——SpringBoot使用归纳——Spring Boot中的项目属性配置——少量配置信息的情形
本课主要讲解Spring Boot项目中的属性配置方法。在实际开发中,测试与生产环境的配置往往不同,因此不应将配置信息硬编码在代码中,而应使用配置文件管理,如`application.yml`。例如,在微服务架构下,可通过配置文件设置调用其他服务的地址(如订单服务端口8002),并利用`@Value`注解在代码中读取这些配置值。这种方式使项目更灵活,便于后续修改和维护。
14 0
微服务——SpringBoot使用归纳——Spring Boot使用slf4j进行日志记录——使用Logger在项目中打印日志
本文介绍了如何在项目中使用Logger打印日志。通过SLF4J和Logback,可设置不同日志级别(如DEBUG、INFO、WARN、ERROR)并支持占位符输出动态信息。示例代码展示了日志在控制器中的应用,说明了日志配置对问题排查的重要性。附课程源码下载链接供实践参考。
32 0
对话即服务:Spring Boot整合MCP让你的CRUD系统秒变AI助手
本文介绍了如何通过Model Context Protocol (MCP) 协议将传统Spring Boot服务改造为支持AI交互的智能系统。MCP作为“万能适配器”,让AI以统一方式与多种服务和数据源交互,降低开发复杂度。文章以图书管理服务为例,详细说明了引入依赖、配置MCP服务器、改造服务方法(注解方式或函数Bean方式)及接口测试的全流程。最终实现用户通过自然语言查询数据库的功能,展示了MCP在简化AI集成、提升系统易用性方面的价值。未来,“对话即服务”有望成为主流开发范式。
356 1
微服务——SpringBoot使用归纳——Spring Boot中的全局异常处理——处理系统异常
本文介绍了在Spring Boot项目中如何通过创建`GlobalExceptionHandler`类来全局处理系统异常。通过使用`@ControllerAdvice`注解,可以拦截项目中的各种异常,并结合`@ExceptionHandler`注解针对特定异常(如参数缺失、空指针等)进行定制化处理。文中详细展示了处理参数缺失异常和空指针异常的示例代码,并说明了通过拦截`Exception`父类实现统一异常处理的方法。虽然拦截`Exception`可一劳永逸,但为便于问题排查,建议优先处理常见异常,最后再兜底处理未知异常,确保返回给调用方的信息友好且明确。
33 0
微服务——SpringBoot使用归纳——Spring Boot中的全局异常处理——处理系统异常
微服务——SpringBoot使用归纳——Spring Boot中的项目属性配置——指定项目配置文件
在实际项目中,开发环境和生产环境的配置往往不同。为简化配置切换,可通过创建 `application-dev.yml` 和 `application-pro.yml` 分别管理开发与生产环境配置,如设置不同端口(8001/8002)。在 `application.yml` 中使用 `spring.profiles.active` 指定加载的配置文件,实现环境快速切换。本节还介绍了通过配置类读取参数的方法,适用于微服务场景,提升代码可维护性。课程源码可从 [Gitee](https://gitee.com/eson15/springboot_study) 下载。
24 0
微服务——SpringBoot使用归纳——Spring Boot中的项目属性配置——少量配置信息的情形
在微服务架构中,随着业务复杂度增加,项目可能需要调用多个微服务。为避免使用`@Value`注解逐一引入配置的繁琐,可通过定义配置类(如`MicroServiceUrl`)并结合`@ConfigurationProperties`注解实现批量管理。此方法需在配置文件中设置微服务地址(如订单、用户、购物车服务),并通过`@Component`将配置类纳入Spring容器。最后,在Controller中通过`@Resource`注入配置类即可便捷使用,提升代码可维护性。
17 0
SpringBoot项目打包成war包
通过上述步骤,我们成功地将一个Spring Boot应用打包成WAR文件,并部署到外部的Tomcat服务器中。这种方式适用于需要与传统Servlet容器集成的场景。
50 8
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
SpringBoot start.aliyun.com创建项目,解决properties乱码的问题
通过确保文件和开发环境的编码一致,配置 Maven 编码,设置 Spring Boot 应用和嵌入式服务器的编码,可以有效解决 properties 文件的乱码问题。以上步骤可以帮助开发者确保在 Spring Boot 项目中正确处理和显示多语言字符,避免因编码问题导致的乱码现象。
58 5

热门文章

最新文章