Vue+Springboot 博客项目总结
Posted 爪洼ing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue+Springboot 博客项目总结相关的知识，希望对你有一定的参考价值。
Vue+Springboot 博客项目总结
技术栈 ： Vue + Springboot + Mybatis-Plus + Redis + mysql
1、项目环境的搭建
1.1、子模块和父模块的依赖问题
当父模块使用版本管理进行依赖管理的话，必须声明版本号，如果不这样子模块是无法引入到父模块的依赖的，当然还有一种方法是，直接copy一份父模块的依赖全部到子模块这样的话父模块可以不声明版本号 ；
1.2、声明父工程
必须再父模块的pom文件中声明如下：
<packaging>pom</packaging> <!--用于说明当前是一个父工程-->
2、首页文章列表
2.1、日期关于日期的查询
由于数据库中create_date 为bigint 13位，直接year()不行，需要先转date型后year()。
select year(FROM_UNIXTIME(create_date/1000)) year,month(FROM_UNIXTIME(create_date/1000))
2.2、Mapper接口爆红、
在Mapper文件的上面添加注解即可
@Repository
public interface ArticleMapper extends BaseMapper<Article>
2.3、mybatisplus遇到多表查询怎么办
复杂的sql需要我们自己实现，但是需要注意的是：我们要在resouces下为mapper添加对应的xml时，resources下的包名要与java下mapper文件的一致
3、最热标签
最热标签就是对标签ms_article_tag中的tag_id进行排序数量最多的就是我们的最热标签
1、标签所拥有的文章数量最多就是最热标签 2、查询 根据tag_id分组计数，从大到小排列取前limit个3、然后根据id查出标签
4、统一异常处理
@ControllerAdvice //对加了Controller注解的方法进行拦截处理 AOP的实现！
public class AllExceptionHandler
//进行异常处理，处理Exception.class
@ExceptionHandler(Exception.class)
@ResponseBody
public Result doException(Exception e)
e.printStackTrace();
return Result.fail(-999,"系统异常") ; //发生异常返回错误的json
5、最热文章
先按照是置顶排序 ,然后按照浏览量倒叙排列 order by view_count desc
6、最新文章
先按照是置顶排序 ,然后按照创造时间倒叙排列 order by create_time desc
7、文章归档
SELECT YEAR(FROM_UNIXTIME(create_date/1000)) YEAR,MONTH(FROM_UNIXTIME(create_date/1000)) MONTH,COUNT(*)COUNT FROM ms_article GROUP BY YEAR,MONTH;
GROUP BY YEAR,MONTH;意思是将所有具有相同month字段值和year的记录放到一个分组里。也就是按年月分组，年月都一致算一组
8、登录、用户信息、注销
仅梳理思路
- Token是服务端端生成的一串字符串，作为客户端进行请求时辨别客户身份的的一个令牌。当用户第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
- token前端获取到之后，会存储在 storage中 h5 ，本地存储，存储好后，拿到storage中的token去获取用户信息，如果这个接口没实现，他就会一直请求陷入死循环
- Token的目的是为了验证用户登录情况以及减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
用户登录
-
检查参数是否合法
-
根据用户名和密码去user表中查询是否存在
-
如果不存在登录失败
-
如果存在使jwt生成token返回给前端
-
将token放入redis当中 ,设置过期时间
//将token放入redis key: 令牌 value: 用户信息 过期时间：1天 redisTemplate.opsForValue().set("TOKEN_"+token, JSON.toJSONString(sysUser),1, TimeUnit.DAYS); -
先认证token是否合法，再去redis认证是否存在）
获取当前用户信息
- token的合法性验证:是否为空、解析是否成功、redis是否存在
- 校验失败返回错误
- 校验成功返回结果LoginUserVo
注销
- 此时我们肯定是登录状态可以获取到token，我们通过这个token删除redis中的用户信息即可
整个流程
9、注册
同样是仅梳理思路
用户注册
- 判断账户是否合法
- 判断账户是否存在，存在返回账户已经注册
- 不存在，注册用户
- 生成token
- 传入redis并返回
- 注意加上事务，中间任何一步出现问题，用户回滚！
其实原理上和登录时一样的
需要注意的一点就是，我们注册用户需要添加一个事务:出现错误就进行回滚防止添加异常
@Service
@Transactional //开启事务
public class LoginServiceImpl implements LoginService
当然 一般建议将事务注解@Transactional加在 接口上，通用一些。
@Transactional
public interface LoginService
Result login(LoginParam loginParam);
SysUser checkToken(String token);
Result logout(String token);
Result register(LoginParam loginParam);
10、ThreadLocal保存用户信息*
项目亮点
//抽取出来一个类
public class UserThreadLocal
private UserThreadLocal()
//线程变量隔离
private static final ThreadLocal<SysUser> LOCAL = new ThreadLocal<>();
public static void put(SysUser sysUser)
LOCAL.set(sysUser);
public static SysUser get()
return LOCAL.get();
public static void remove()
LOCAL.remove();
怎么使用？
我们为项目添加一个拦截器，为某些接口做拦截工作，通过获取token验证用户是否登录，用户如果登陆的话，获取用户信息保存在ThreadLocal中，其意思可以理解为<Thread,SysUser>这个键值对，线程隔离的，为当前线程绑定一个用户信息，这样只要是当前线程，我们可以随时获取到我们的当前用户信息！
需要注意
- 我们使用过ThreadLocal后需要删除，否则会出现内存泄漏问题
11、文章详情
此时，可能会出现id精度损失的情况，由于我们数据库采用的时雪花算法的分布式Id，将其查询出来用Long类型去存当然没问题，但是我们的js可以没法解析Long类型的数据，会丢失精度，因此我们转换的vo对象中的id属性需要处理
- 方法1：通过注解进行序列化保证精度
public class ArticleVo
@JsonSerialize(using = ToStringSerializer.class) //这个注解的作用是保证了雪花算法得到的id的精度
private Long id;
- 方法2：转化为String保证精度,这一步需要再对象转换的时候单独抽取出来，因为copy方法无法直接将Long转为String【推荐】
public class ArticleVo
private String id;
//copy方法中的内容
articleVo.setId(String.valueOf(article.getId())); //long 和 String 不能复制
12、线程池更新阅读次数*
当我们的访问一篇文章的时候，我们需要做到：
- 在点开文章后我们的需要让阅读次数加一，
- 看完文章后本应该直接返回数据，这时候做了一个写操作，更新时加写锁阻塞其他操作，性能比较低
- 更新操作，增加此次接口的耗时，一旦更新出问题，不能影响看文章的操作
这个过程可以得到优化，让我们的浏览数+1的任务和文章详情加载异步执行即可，这里的异步执行采用的就是线程池！
线程池配置
@Configuration
@EnableAsync // 开启多线程池
public class ThreadPoolConfig
@Bean("taskExecutor")
public Executor asyncServiceExecutor()
ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
// 设置核心线程数
executor.setCorePoolSize(5);
// 设置最大线程数
executor.setMaxPoolSize(20);
//配置队列大小
executor.setQueueCapacity(Integer.MAX_VALUE);
// 设置线程活跃时间（秒）
executor.setKeepAliveSeconds(60);
// 设置默认线程名称
executor.setThreadNamePrefix("SQx's博客");
// 等待所有任务结束后再关闭线程池
executor.setWaitForTasksToCompleteOnShutdown(true);
//执行初始化
executor.initialize();
return executor;
通过注解将我们的这个任务丢给线程池去执行
@Async("taskExecutor") //这个任务丢入我们的线程池
public void updateArticleViewCount(ArticleMapper articleMapper, Article article)
int viewCounts = article.getViewCounts() ; //获取出文章当前的阅读数
Article articleUpdate = new Article();
articleUpdate.setViewCounts(viewCounts+1); //创建新的对象，设置阅读数+1
LambdaUpdateWrapper<Article> updateWrapper = new LambdaUpdateWrapper<>(); //我们更新操作的条件
updateWrapper.eq(Article::getId,article.getId());
updateWrapper.eq(Article::getViewCounts,viewCounts) ; //此处使用了乐观锁的思想，保证了线程安全
System.out.println("修改后的对象是"+articleUpdate+"======================");
//执行更新操作
articleMapper.update(articleUpdate,updateWrapper);
这里执行的sql是用了乐观锁的思想的哦！
此处存在一个Bug需要注意 !
我们更新浏览次数的时候，是通过创建一个新的对象设置阅读数+1，此时我们的Article对象中存在int属性的话 （基本类型属性）会自动的赋一个初值0，这样的当将这个对象修传入update的时候，mybatisplus但凡不是null就会生成到sql语句中进行更新，所以此时将对象中的基本户数据类型全部转换为Integer封装类型，这样创建你对象不赋值的情况下没有默认值只会是null，这样就不会修改其他的属性了！
13、评论列表
关于评论最重要就是理解他的每个字段的意思了
public class Comment
private Long id; //评论的id
private String content; //评论的内容
private Long createDate; //评论的时间
private Long articleId; //文章id（给哪篇文章评论的）
private Long authorId; //作者id（谁评论的）
private Long parentId; //父评论id
private Long toUid; // 给谁评论 父评论id的作者
private Integer level; //当前评论等级
然后就是通过文章id查出来就可以了，只是其中几个属性需要做一些稍微复杂的转换！
14、评论
本质还是封装对象，然后
@Override
public Result comment(CommentParam commentParam)
//拿到当前用户
SysUser sysUser = UserThreadLocal.get(); //获取当前用户信息
Comment comment = new Comment();
comment.setArticleId(commentParam.getArticleId()); //获取文章id
comment.setAuthorId(sysUser.getId()); //当前用户id
comment.setContent(commentParam.getContent()); //评论的内容
comment.setCreateDate(System.currentTimeMillis()); //评论的时间
Long parent = commentParam.getParent(); //父评论id
if (parent == null || parent == 0)
comment.setLevel(1); //父评论id不存在，当前评论的等级为1
else
comment.setLevel(2); //父评论id存在，当前评论的等级设置为2
//如果是空，parent就是0
comment.setParentId(parent == null ? 0 : parent); //父评论id
Long toUserId = commentParam.getToUserId(); //被评论用户
comment.setToUid(toUserId == null ? 0 : toUserId);
this.commentMapper.insert(comment);
return Result.success(null);
15、发布文章
发布文章前需要查出来所有的分类和标签信息（这个很简单）
实现发布文章
// @RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)；
// 而最常用的使用请求体传参的无疑是POST请求了，所以使用@RequestBody接收数据时，一般都用POST方式进行提交。
@PostMapping("publish")
public Result publish(@RequestBody ArticleParam articleParam)
return articleService.publish(articleParam);
@Override
@Transactional
public Result publish(ArticleParam articleParam)
//注意想要拿到数据必须将接口加入拦截器
SysUser sysUser = UserThreadLocal.get();
/**
* 1. 发布文章 目的 构建Article对象
* 2. 作者id 当前的登录用户
* 3. 标签 要将标签加入到 关联列表当中
* 4. body 内容存储 article bodyId
*/
Article article = new Article();
article.setAuthorId(sysUser.getId());
article.setCategoryId(articleParam.getCategory().getId());
article.setCreateDate(System.currentTimeMillis());
article.setCommentCounts(0);
article.setSummary(articleParam.getSummary());
article.setTitle(articleParam.getTitle());
article.setViewCounts(0);
article.setWeight(Article.Article_Common);
article.setBodyId(-1L);
//插入之后 会生成一个文章id（因为新建的文章没有文章id所以要insert一下
//官网解释："insart后主键会自动'set到实体的ID字段。所以你只需要"getid()就好
// 利用主键自增，mp的insert操作后id值会回到参数对象中
//https://blog.csdn.net/HSJ0170/article/details/107982866
this.articleMapper.insert(article);
//tags
List<TagVo> tags = articleParam.getTags();
if (tags != null)
for (TagVo tag : tags)
ArticleTag articleTag = new ArticleTag();
articleTag.setArticleId(article.getId());
articleTag.setTagId(tag.getId());
this.articleTagMapper.insert(articleTag);
//body
ArticleBody articleBody = new ArticleBody();
articleBody.setContent(articleParam.getBody().getContent());
articleBody.setContenthtml(articleParam.getBody().getContentHtml());
articleBody.setArticleId(article.getId());
articleBodyMapper.insert(articleBody);
//插入完之后再给一个id
article.setBodyId(articleBody.getId());
//MybatisPlus中的save方法什么时候执行insert，什么时候执行update
// https://www.cxyzjd.com/article/Horse7/103868144
//只有当更改数据库时才插入或者更新，一般查询就可以了
articleMapper.updateById(article);
ArticleVo articleVo = new ArticleVo();
articleVo.setId(article.getId());
return Result.success(articleVo);
16、AOP日志
17、文章图片上传
18、所有标签、分类列表
这2个很简单的，无需参数，直接查对应的2个表就是！
19、分类，标签文章列表
通过我们的分类id|标签id去查，分类的详细信息，然后再通过分类id|标签id去文章表中查符合条件的文章
分页查询文章
@Override
public Result listArticle(PageParams pageParams)
/**
* 1、分页查询article数据库表
*/
Page<Article> page = new Page<>(pageParams.getPage(), pageParams.getPageSize());
LambdaQueryWrapper<Article> queryWrapper = new LambdaQueryWrapper<>();
//查询文章的参数 加上分类id，判断不为空 加上分类条件
if (pageParams.getCategoryId()!=null)
//and category_id=#categoryId
queryWrapper.eq(Article::getCategoryId,pageParams.getCategoryId());
//是否置顶进行排序, //时间倒序进行排列相当于order by create_data desc
queryWrapper.orderByDesc(Article::getWeight,Article::getCreateDate);
Page<Article> articlePage = articleMapper.selectPage(page, queryWrapper);
//分页查询用法 https://blog.csdn.net/weixin_41010294/article/details/105726879
List<Article> records = articlePage.getRecords();
// 要返回我们定义的vo数据，就是对应的前端数据，不应该只返回现在的数据需要进一步进行处理
List<ArticleVo> articleVoList =copyList(records,true,true);
return Result.success(articleVoList);
标签同理
20、归档文章列表
需要通过年月作为条件查询全部文章，通过动态sql实现
@Override
public Result listArticle(PageParams pageParams)
Page<Article> page = new Page<>(pageParams.getPage(),pageParams.getPageSize());
IPage<Article> articleIPage = this.articleMapper.listArticle(page,pageParams.getCategoryId(),pageParams.getTagId(),pageParams.getYear(),pageParams.getMonth());
return Result.success(copyList(articleIPage.getRecords(),true,true));
<?xml version="1.0" encoding="UTF-8" ?>
<!--MyBatis配置文件-->
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.huel.dao.mapper.ArticleMapper">
<!--做一个结果集映射-->
以上是关于Vue+Springboot 博客项目总结的主要内容，如果未能解决你的问题，请参考以下文章
SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
Vue+SpringBoot超详细！一周开发一个SpringBoot + Vue+MybatisPlus+Shiro+JWT+Redis前后端分离个人博客项目！！！项目完结