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中的用户信息即可

整个流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NfUk0y09-1638616727885)(项目总结.assets/image-20211202194136974.png)]

9、注册

同样是仅梳理思路

用户注册

判断账户是否合法
判断账户是否存在，存在返回账户已经注册
不存在，注册用户
生成token
传入redis并返回
注意加上事务，中间任何一步出现问题，用户回滚！

其实原理上和登录时一样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ptbzkUwA-1638616727887)(项目总结.assets/image-20211203100145267.png)]

需要注意的一点就是，我们注册用户需要添加一个事务:出现错误就进行回滚防止添加异常

@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，这样就不会修改其他的属性了！ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WsnYxijD-1638616727887)(项目总结.assets/image-20211203140223006.png)]

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日志

参考文章：[SpringBoot：配置 AOP 打印日志]

17、文章图片上传

Springboot集成七牛云，实现图片上传功能

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">

    <!--做一个结果集映射-->
         <resultMap id="articleMap" type="com.huel.dao.pojo.Article">
             <id column="id" property="id" />
             <result column="author_id" property="authorId"/>
             <result column="comment_counts" property="commentCounts"/>
             <result column="create_date" property="createDate"/>
             <result column="summary" property="summary"/>
             <result column="title" property="title"/>
             <result column="view_counts" property="viewCounts"/>
             <result column="weight" property="weight"/>
             <result column="body_id" property="bodyId"/>
             <result column="category_id" property="categoryId"/>
         </resultMap>

        <!--查询归档-->
        <select id="listArchives" resultType="com.huel.dao.dos.Archives">
             SELECT YEAR(FROM_UNIXTIME(create_date/1000)) YEAR,
             MONTH(FROM_UNIXTIME(create_date/1000)) MONTH,
             COUNT(*) COUNT FROM ms_article
             GROUP BY YEAR,MONTH;
        </select>

       <!--查询文章列表-->
    <select id="listArticle" resultMap="articleMap">
        select * from ms_article
        <where>
            1 = 1
            <if test="categoryId != null">
                and category_id=#{categoryId}
            </if>
            <if test="tagId != null">
                and id in (select article_id from ms_article_tag where tag_id=#{tagId})
            </if>
            <if test="year != null and year.length>0 and month != null and month.length>0">
                and (FROM_UNIXTIME(create_date/1000,'%Y') =#{year} and 
                FROM_UNIXTIME(create_date/1000,'%m')=#{month})
            </if>
        </where>
        order by weight desc ,create_date desc
    </select>

</mapper>

21、全局缓存优化 *

内存的访问速度远远大于磁盘的访问速度（1000倍起）

思路总结

我们给一个接口添加注解，这个接口就相当于是一个切点，我们的切面为这个切点进行环绕通知，方法增强，我们可以在切面中获取到

切点的方法名，类名，参数，以及注解中的name，接下来先将参数通过MD5加密一下，再将这些参数拼接一起,

这新生成的一串字符串就是Redis key，当我们调用这个接口的时候，会先去Redis判断这个key是否对应存在value,

如果存在，直接返回，这就是走了Redis（缓存）
如果不存在，那么继续调用该接口，将接口得到的结果，先将这个这个结果拿到<Redis key,这个结果>，保存在Redis中，
然后直接作为返回值缓存

22、搭建管理后台

后台只做了一个用户的权限管理使用了SpringSecurity

注意：这里的登录是针对后台的登录，前面的登录是针对用户的，不是同一张表！

编写SecurityConfig配置

/***
 * SpringSecurity的配置
 */
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    //加密对象
    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder(){      //采用BCrypt的加密方式
        return new BCryptPasswordEncoder();
    }


    //用于生成测试数据
    public static void main(String[] args) {
        //加密策略 MD5 不安全 彩虹表  MD5 加盐
        String password = new BCryptPasswordEncoder().encode("admin");
        System.out.println(password);
    }

    @Override
    public void configure(WebSecurity web) throws Exception {
        super.configure(web);
    }

    /*定制授权规则，定制请求需要的权限*/
    @Override
    protected void configure(HttpSecurity http) throws Exception {
//链式编程
        http.authorizeRequests() //开启登录认证
//                .antMatchers("/user/findAll").hasRole("admin") //访问接口需要admin的角色
                .antMatchers("/css/**").permitAll()
                .antMatchers("/img/**").permitAll() //放行
                .antMatchers("/js/**").permitAll()
                .antMatchers("/plugins/**").permitAll()
                //所有带/admin/**的请求都要进行认证处理，通过 authService处理后返回true说明认证通过，返回false说明认证失败！
                .antMatchers("/admin/**").access("@authService.auth(request,authentication)") //自定义service 来去实现实时的权限认证
                //所有带/pages/**的请求只要登录成功即可访问
                .antMatchers("/pages/**").authenticated()

        // 没有权限进入默认的登陆页面 , 我们使用自己的登录页面替代默认的登录页面
                .and().formLogin()
                .loginPage("/login.html") //自定义的登录页面
                .loginProcessingUrl("/login") //登录处理接口（springSecurity自带的登录界面）
                .usernameParameter("username") //定义登录时的用户名的key 默认为username
                .passwordParameter("password") //定义登录时的密码key，默认是password
                .defaultSuccessUrl("/pages/main.html")  //登录成功跳转到的页面
                .failureUrl("/login.html")  //登录失败跳转到的页面
                .permitAll() //通过 不拦截，更加前面配的路径决定，这是指和登录表单相关的接口 都通过
                .and().logout() //退出登录配置
                .logoutUrl("/logout") //退出登录接口
                .logoutSuccessUrl("/login.html")
                .permitAll() //退出登录的接口放行
                .and()
                .httpBasic()
                .and()              //关闭csrf功能:跨站请求伪造,默认只能通过post方式提交logout请求
                .csrf().disable() //csrf关闭 如果自定义登录 需要关闭 （如果不写上会出现登录或注销中的一个有问题！404）
                .headers().frameOptions().sameOrigin(); //支持iframe嵌套
    }
}
/***
 *  SpringSecurity的流程 ： 1、首先我们在配置文件为请求定制认证规则，每个请求需要什么权限才能访问
 *                         2、然后当我们访问某个请求的时候，对其拦截，需要判断当前用户是否认证（登录）
 *                         3、如果为认证（登录），跳转到登录界面，如果认证成功，根据用户id查找对应的权限id，然后获取到当前用户的权限
 *                         4、用户就可以根据自身的具备权限去访问！
 *
 */

当我们的未认证的时候默认会请求/login,让用户登录，进行认证，当我们的用户进行登陆的时候，会走如下方法：进行用户名的校验！

通过判断数据库中是否存在该用户，

如果不存在，直接抛出异常UsernameNotFoundException ！
如果存在的话，获取该对象的username、password（数据库中加密后的），权限列表（通过用户名字查处的权限）

然后将这个结果封装为一个Security自己的User对象，返回，密码的部分交给我们的security去判断，这里不做判断

loadUserByUsername(String username)

/***
 *  我们SpringSecurity的认证功能（登录）
 *
 */
@Component
public class SecurityUserService implements UserDetailsService {

    @Autowired
    private AdminService adminService ;

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        /***
         *  1、登录的时候会把username传递到这里
         *  2、通过username去查询admin表，如果admin存在，将密码告诉SpringSecurity
         *  3、如果不存在返回null 认证失败
         *
         */
        Admin admin = adminService.findAdminByUsername(username);
        if (admin == null){
            //登录失败
            return null  ;
        }
        //登录成功（只能说明数据库存在这个用户！）
        //验证密码（验证密码的部分交给SpringSecurity去处理）
        UserDetails userDetails = new User(username,admin.getPassword(),new ArrayList<>()) ;
        return userDetails;
    }
}
//登录成功！

然后就是对我们的当前用户进行授权判断，执行auth方法: 当我们的调用一个需要权限接口的时候执行

首先，获取当前请求的是哪个接口（也就是用户的请求路径）
然后，判断用户是否存在，是否是游客等，如果是则return false, 表示当前用户不存在，并无访问该接口的权限！否则，说明用户存在，获取用户的权限，然后进行校验！
获取当前用户的id，如果id为1，表示当前用户超级管理员，无需进行权限判断，他具有一切权限！否则通过id获取当前用户权限
用户权限与接口相比较，如果用户具有当前权限，那么就会return true，访问成功！反之return false 无权限访问！

完工！

posted @ 2022-01-23 20:35 爪洼ing 阅读(287) 评论(0) 编辑收藏举报

刷新页面返回顶部

【爪洼ing的博客】

Vue+Springboot 博客项目总结