【项目实战】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
    
    1. 依赖下载成功后,在blog-web项目目录下启动项目
      npm run serve
      
  2. 启动成功

👦启动后端

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

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

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

🤑体验


😊总结

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


🧧Tips

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

优秀案例

询问一下,略显尊重

目录
相关文章
|
12天前
|
Java 容器
如何在SpringBoot项目中使用过滤器和拦截器
过滤器和拦截器是日常开发中常用技术,用于对特定请求进行增强处理,如插入自定义代码以实现特定功能。过滤器在请求到达 `servlet` 前执行,而拦截器在请求到达 `servlet` 后执行。`SpringBoot` 中的拦截器依赖于 `SpringBoot` 容器,过滤器则由 `servlet` 提供。通过实现 `Filter` 接口并重写 `doFilter()` 方法可实现过滤器;通过实现 `HandlerInterceptor` 接口并重写相应方法可实现拦截器。两者的主要区别在于执行时机的不同,需根据具体场景选择使用。
如何在SpringBoot项目中使用过滤器和拦截器
|
6天前
|
Java 关系型数据库 MySQL
创建一个SpringBoot项目,实现简单的CRUD功能和分页查询
【9月更文挑战第6天】该内容介绍如何使用 Spring Boot 实现具备 CRUD 功能及分页查询的项目。首先通过 Spring Initializr 创建项目并选择所需依赖;其次配置数据库连接,并创建实体类与数据访问层;接着构建服务层处理业务逻辑;最后创建控制器处理 HTTP 请求。分页查询可通过添加 URL 参数实现。
|
16天前
|
XML 安全 Java
掌握SpringBoot单点登录精髓,一键通行多系统,轻松打造无缝用户体验新纪元!
【8月更文挑战第29天】单点登录(SSO)是一种身份认证机制,用户在多个相互信任的应用系统中只需登录一次即可访问所有系统,无需重复输入凭证。本文详细介绍如何利用Spring Security和OAuth2在SpringBoot中实现SSO,并提供示例代码。核心步骤包括:引入依赖、配置认证服务器与资源服务器、实现单点登录拦截器及完成SSO配置。通过合理配置,SSO能显著提升用户体验和系统安全性。
45 2
|
15天前
|
XML 前端开发 Java
还不会SpringBoot项目模块分层?来这手把手教你
本文详细介绍了如何为SpringBoot项目创建模块并进行合理的分层设计。通过逐步演示,从创建项目到构建各功能模块,再到具体代码实现,手把手教你实现整洁的代码分层。主要内容包括:创建依赖层、主启动层、模块层及其子模块(如共通层、控制器层、数据持久层等),并通过实例演示了从前端请求到后台服务调用的实际流程。适合SpringBoot初学者及有一定经验但需优化项目结构的开发者参考。
60 2
还不会SpringBoot项目模块分层?来这手把手教你
|
15天前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
37 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
15天前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
37 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
21天前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的前后端分离的考试管理系统(含教程&源码&数据库数据)
在数字化时代背景下,本文详细介绍了如何使用Spring Boot框架结合Vue.js技术栈,实现一个前后端分离的考试管理系统。该系统旨在提升考试管理效率,优化用户体验,确保数据安全及可维护性。技术选型包括:Spring Boot 2.0、Vue.js 2.0、Node.js 12.14.0、MySQL 8.0、Element-UI等。系统功能涵盖登录注册、学员考试(包括查看试卷、答题、成绩查询等)、管理员功能(题库管理、试题管理、试卷管理、系统设置等)。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的前后端分离的考试管理系统(含教程&源码&数据库数据)
|
14天前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
46 0
|
JavaScript 算法 Java
springboot vue二手交易市场毕设源码(毕设)
springboot vue二手交易市场毕设源码
347 0
springboot vue二手交易市场毕设源码(毕设)
|
25天前
|
SQL 前端开发 NoSQL
SpringBoot+Vue 实现图片验证码功能需求
这篇文章介绍了如何在SpringBoot+Vue项目中实现图片验证码功能,包括后端生成与校验验证码的方法以及前端展示验证码的实现步骤。
SpringBoot+Vue 实现图片验证码功能需求