【项目实战】SpringBoot+vue+iview打造一个极简个人博客系统
基于SpringBoot+vue+iview个人极简博客
项目介绍
个人极简博客
【个人极简博客】是一个适用于初学者学习的博客系统,其中包含文章分类、写文章、标签管理、用户管理等基础功能,代码简洁注释完善,易上手学习。技术栈基于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
如有想拿此项目做毕设或用于学习之外用途时,一定询问征求本狗意见,开源不易,加强版权意识。
优秀案例
询问一下,略显尊重


【项目实战】SpringBoot+vue+iview打造一个极简个人博客系统的更多相关文章
- Vue+node.js实现一个简洁的个人博客系统
本项目是一个用vue和node以及mysql实现的一个简单的个人博客系统,整体逻辑比较简单.但是可以我们完整的了解一个项目从数据库到后端到前端的实现过程,适合不太懂这一块的朋友们拿来练手. 本项目所用 ...
- 【ASP.NET实战教程】基于ASP.NET技术下多用户博客系统全程实战开发(NNblog)
岁末主推:牛牛老师主讲,多用户博客系统,基于ASP.NET技术,年后将带来移动业务平台项目项目目标: 打造个性品牌Blogo,定制多用户博客 为每一个博客用户提供个性化的 blogo解决方案,打造精品 ...
- 推荐一个简洁优雅的博客系统,farbox
这是我用farbox搞的一个博客:http://www.jsnull.com/ 特点: 1.无数据库,数据存在dropbox里,需要自己注册一个dropbox帐号 2.静态文本文件即是文章,可以在任何 ...
- SpringBoot+vue+Iview前后端分离权限内容管理CMS系统
hrcms基于springBoot框架的内容管理系统,采用最新最主流的技术,后端采用spring boot,mybatis-plus,freemaker,shiro,redis,mysql,等,主要功 ...
- Vue.js 入门:从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架
Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...
- Python+Flask+Gunicorn 项目实战(一) 从零开始,写一个Markdown解析器 —— 初体验
(一)前言 在开始学习之前,你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解.项目的源码你可以在 https://github.com/zhu-y ...
- Spring Boot(5)一个极简且完整的后台框架
https://blog.csdn.net/daleiwang/article/details/75007588 Spring Boot(5)一个极简且完整的后台框架 2017年07月12日 11:3 ...
- 使用Docker部署Spring-Boot+Vue博客系统
在今年年初的时候,完成了自己的个Fame博客系统的实现,当时也做了一篇博文Spring-boot+Vue = Fame 写blog的一次小结作为记录和介绍.从完成实现到现在,也断断续续的根据实际的使用 ...
- spring-boot序章:打造博客系统
blog 使用spring-boot打造一个博客系统,在项目中学习! 项目功能 文章 游览 创建 编辑 删除 评论 用户 游客 注册用户 关注 被关注 后台统计 注册用户数 在线人数 文章总数 评论总 ...
随机推荐
- js中计算一个时间点加上一个时间段后的时间
function aa(a,b){ console.log(111,a,b) var nd = new Date(Date.parse(a.replace(/-/g, "/"))) ...
- 2024-01-27:用go语言,阿里巴巴走进了装满宝藏的藏宝洞。藏宝洞里面有N堆金币, 第i堆金币的总重量和总价值分别是m[i]、v[i], 阿里巴巴有一个承重量为T的背包,但并不一定有办法将全部的
2024-01-27:用go语言,阿里巴巴走进了装满宝藏的藏宝洞.藏宝洞里面有N堆金币, 第i堆金币的总重量和总价值分别是m[i].v[i], 阿里巴巴有一个承重量为T的背包,但并不一定有办法将全部的 ...
- 深度学习应用篇-计算机视觉-语义分割综述[5]:FCN、SegNet、Deeplab等分割算法、常用二维三维半立体数据集汇总、前景展望等
深度学习应用篇-计算机视觉-语义分割综述[5]:FCN.SegNet.Deeplab等分割算法.常用二维三维半立体数据集汇总.前景展望等 语义分割综述(semantic segmentation) 1 ...
- C++ Boost 实现异步端口扫描器
端口扫描是一种用于识别目标系统上哪些网络端口处于开放.关闭或监听状态的网络活动.在计算机网络中,端口是一个虚拟的通信端点,用于在计算机之间传输数据.每个端口都关联着特定类型的网络服务或应用程序.端口扫 ...
- 解决线程不安全的方式(Java)
一.同步代码块 package com.synchronized1; // 买票示例 // 使用同步代码块解决线程安全问题 public class TicketRunnableImp impleme ...
- 单片机 IAP 功能基础开发篇之APP升级(二)
1.前言 上一篇单片机 IAP 功能基础开发篇之APP升级(一)讲到了单片机 IAP 功能给 APP 程序升级的设计思路,这篇介绍的是具体实现方式. 下一篇单片机 IAP 功能基础开发篇之APP升级( ...
- .NET中使用BootstrapBlazor组件库Table实操篇
前言 Table表格在后台管理应用中使用的是相当频繁的,因此找一个功能齐全的前端框架对于我们而言是非常必要的,因为封装完善的前端框架能够大大提升我们的工作对接效率.今天我们主要来讲解一下在.NET中使 ...
- Kafka-生产者、broker、消费者的调优参数总结
生产环境下,为了尽可能提升Kafka的整体吞吐量,可以对Kafka的相关配置参数进行调整,以达到提升整体性能的目的. 本文主要从Kafka的不同组件出发,讲解各组件涉及的配置参数和参数含义. 一.生产 ...
- 零基础入门Vue之拘元遣将——其他常用指令&自定义指令
回首 在 零基础入门Vue之梦开始的地方--插值语法 我记录了v-bind.v-on.v-model的学习 在 零基础入门Vue之To be or not to be--条件渲染 我记录了v-if.v ...
- 【译】使用.NET将WebAssembly扩展到云(一)
原文 | Richard Lander 翻译 | 郑子铭 WebAssembly(Wasm)是一种令人兴奋的新虚拟机和(汇编)指令格式. Wasm 诞生于浏览器,是 Blazor 项目的重要组成部分. ...