Vue+Springboot 博客项目总结

x33g5p2x  于2021-12-06 转载在 Vue.js  
字(14.8k)|赞(0)|评价(0)|浏览(469)

Vue+Springboot 博客项目总结

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的目的是为了验证用户登录情况以及减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。

用户登录

  1. 检查参数是否合法
  2. 根据用户名和密码去user表中查询是否存在
  3. 如果不存在登录失败
  4. 如果存在使jwt生成token返回给前端
  5. 将token放入redis当中 ,设置过期时间
//将token放入redis key: 令牌 value: 用户信息 过期时间:1天
redisTemplate.opsForValue().set("TOKEN_"+token, JSON.toJSONString(sysUser),1, TimeUnit.DAYS);
  1. 先认证token是否合法,再去redis认证是否存在)

获取当前用户信息

  1. token的合法性验证:是否为空、解析是否成功、redis是否存在
  2. 校验失败返回错误
  3. 校验成功返回结果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是用了乐观锁的思想的哦!

我们更新浏览次数的时候,是通过创建一个新的对象设置阅读数+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日志

参考文章:[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、搭建管理后台

注意:这里的登录是针对后台的登录,前面的登录是针对用户的,不是同一张表!

编写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 无权限访问!

相关文章