【项目实战】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打造一个博客系统,在项目中学习! 项目功能 文章 游览 创建 编辑 删除 评论 用户 游客 注册用户 关注 被关注 后台统计 注册用户数 在线人数 文章总数 评论总 ...
随机推荐
- vue/cli中css.sourceMap-open-inline-host-port-https-openPage-compress -devServer.proxy的简单介绍
Vue/cli4.0 配置属性--css.sourceMap 设置是否开启 css 的 sourse map功能. css 的 sourse map作用类似与 js 的 sourse map. 注意: ...
- 将地址栏的参数变成json序列化。
将地址栏的参数变成json序列化. GetQueryJson1 () { let url = this.$route.query.redirect; // 获取当前浏览器的URL (redirect= ...
- CF676C 题解
使用尺取法(双指针法). 由于字符种类只有 \(2\) 种,答案一定是全 a 或全 b. 情况 \(1\):全 a 快指针循环移动,并统计字符 b 的数量 \(cntb\),直到 \(cntb\) 即 ...
- Go 泛型之明确使用时机与泛型实现原理
目录 一.引入 二.何时适合使用泛型? 场景一:编写通用数据结构时 场景二:函数操作的是 Go 原生的容器类型时 场景三:不同类型实现一些方法的逻辑相同时 三.Go 泛型实现原理 Stenciling ...
- TienChin 渠道管理-渠道类型
在上一篇文章当中,表里面有一个渠道类型,我们这节主要是将这个渠道类型创建好,首先我们来看看字典表. sys_dict_type 表: 字段名 数据类型 注释 dict_id bigint 字典主键 d ...
- 驱动开发:WinDBG 配置内核双机调试
WinDBG 是在windows平台下,强大的用户态和内核态调试工具,相比较于Visual Studio它是一个轻量级的调试工具,所谓轻量级指的是它的安装文件大小较小,但是其调试功能却比VS更为强大, ...
- 数据共享Manager(Python)
from multiprocessing import Process,Manager,Lock def change_dic(dic,lock): with lock: dic['count'] - ...
- 【算法】【C语言进阶】C语言字符串操作宝藏级别汇总 strtok函数 strstr函数该怎么用?【超详细的使用解释和模拟实现】
[算法][C语言进阶]C语言字符串操作宝藏级别汇总[超详细的使用解释和模拟实现] 作者: @小小Programmer 这是我的主页:@小小Programmer 在食用这篇博客之前,博主在这里介绍一下其 ...
- 2024-02-03:用go语言,你有 k 个背包。给你一个下标从 0 开始的整数数组 weights, 其中 weights[i] 是第 i 个珠子的重量。同时给你整数 k, 请你按照如下规则将所有
2024-02-03:用go语言,你有 k 个背包.给你一个下标从 0 开始的整数数组 weights, 其中 weights[i] 是第 i 个珠子的重量.同时给你整数 k, 请你按照如下规则将所有 ...
- 阿里二面:SpringBoot可以同时处理多少个请求?当场懵了。。。。
SpringBoot以其简洁高效的开发方式和强大的内嵌容器特性,为开发者提供了构建高性能后端服务的便利.然而,当面临高并发场景时,理解并合理配置Spring Boot应用以达到最佳的并发处理能力至关重 ...