基于Springboot和Vue前后端分离的博客项目

1.项目简介

1.1 前言

学习Java也有一段时间，期间更多的是理论的学习和一些Demo代码编写，知识还比较分散、浅薄，所以我做了这么一个实战项目，把已学的知识应用到实践中，通过从零实现一个完整项目，建立一个Java Web应用开发的基本认知，同时也能更加深入的理解各个技术的细节。除此之外，也是为了锻炼自己的编码能力和遇到问题的解决能力。

这个是我第一个练手的SpringBoot小项目，以前学习写的都是一些小Demo，所以这个项目在各方面可能都还很稚嫩，欢迎大家多多指教。如果本项目对您有帮助，可以点个赞鼓励一下，谢谢。

另外，本文只是对项目做一个简单的介绍，如果后续有时间或者有必要，我会复盘出一个比较详细的系列文章。

作者是文章写作小白，如文章结构混乱，语言不通，请见谅，我会学习并慢慢进步的。

1.2 项目介绍

MyBlog主要是基于 SpringBoot + Vue 前后端分离开发的一款动态个人博客系统，后台和前台均通过JSON数据做交互，主要功能有文章管理、分类管理、标签管理、附件管理、评论管理、友链管理、个人资料/博客信息管理等。

1.3 技术栈

前端采用 Vue2.9.6 绘制页面，博客样式借鉴李仁密的小而美博客，涉及到的技术点为：

router路由
filter全局过滤器
service代码封装
axios异步请求
Restful风格请求
layer弹窗
semantic美化框架
aes加解密
markdorn编辑器集成
tocbot目录生成
highlight.js代码高亮

后端采用的是 Springboot2.4.0 编写后台，涉及到的技术点为：

MyBatisPlus持久化框架
Restful风格请求
AOP实现的AES加解密
@ControllerAdvice实现的AES解密
全局异常处理
JWT登录验证
跨域请求处理
七牛云、阿里云对象存储
Markdown转HTML

2.数据库设计

2.1 表结构设计

博客表

字典表

友情链接表

留言表

类型表

2.2 E-R图

3.项目实现

3.1 业务代码

```java @AESDecrypt @GetMapping("/blog") public R selectList(@RequestParam HashMap param) { // 获取参数 Integer pageNum = BlogUtil.objToInt(param.get("pageNum")); Integer pageSize = BlogUtil.objToInt(param.get("pageSize")); Integer commend = BlogUtil.objToInt(param.get("commend")); String typeId = param.get("typeId").toString(); String title = param.get("title").toString(); commend = commend == 0 ? null : commend; typeId = typeId.equals("0") ? null : typeId; // 查询所有博客列表 PageInfo info = blogService.selectListByWrapperPage(pageNum, pageSize, title, typeId, commend); // 查询所有分类列表 List types = typeService.selectList(); return R.success("博客列表获取成功") .setAttribute("info", info) .setAttribute("types", types); }

@GetMapping("/blog/{id}") public R selectOneBlog(@PathVariable String id) { BlogEntity entity = blogService.adminSelectOneById(id); List types = typeService.selectList(); return R.success("博客获取成功！") .setAttribute("blog", entity) .setAttribute("types", types); }

@AESDecrypt @DeleteMapping("/blog") public R deleteById(@RequestParam HashMap param) { String id = param.get("id").toString(); blogService.deleteById(id); return R.success("删除成功！"); }

@AESDecrypt @PostMapping("/blog") public R releaseBlog(@RequestBody BlogEntity entity) { blogService.releaseBlog(entity); return R.success("博客发布成功！"); }

@PutMapping("/blog/{id}/release/{release}") public R updateRelease( @PathVariable String id, @PathVariable Integer release) { BlogEntity entity = new BlogEntity(); entity.setId(id); entity.setRelease(release); blogService.updateRelease(entity); return R.success("发布状态更新成功！"); }

@PutMapping("/blog/{id}/commend/{commend}") public R updateCommend( @PathVariable String id, @PathVariable Integer commend) { BlogEntity entity = new BlogEntity(); entity.setId(id); entity.setCommend(commend); blogService.updateCommend(entity); return R.success("推荐状态更新成功！"); }

@AESDecrypt @PutMapping("/blog") public R updateBlog(@RequestBody BlogEntity entity) { blogService.updateBlog(entity); return R.success("博客更新成功！"); } ```

3.2 前端代码

```html template>

#	标题	分类	发布时间	操作
{{index+1}}	{{item.title}}	{{item.typeName}}	{{item.createTime \| dateFormat}}	编辑推荐撤销发布下架删除
上一页下一页

4.项目展示

4.1 用户访问页面

主页

分类

留言板

作者信息

搜索功能

查看博客

4.2 管理员页面

首页

添加博客

分类管理

留言管理

系统设置

5.部署网站

执行blog.sql创建数据库表
修改一些配置信息
Springboot
- application.yml中的数据库连接配置
- utils包下的AES秘钥
- utils包下的OSS对象存储配置(七牛、阿里)
Vue
- service下的constant中的AES秘钥
- service下的constant中的请求地址
执行 npm run build 将vue项目进行打包，然后放到Springboot的 public 目录下，就大功告成了