这是一次人类低阶程序员排bug过程

最近在跟b站up码神之路练习SpringBoot的个人博客项目,算是比较入门的项目吧!
当我跟着视频做到P22评论功能,发现一个bug
在这里插入图片描述

即登录后,无法查看文章详情。
F12后报的是
Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'length
事实上我不是特别懂前端vue,所有前端代码是直接用up的代码。
然后自己摸索了一会,没有头绪。所以搂一眼评论,看看有没有同样遇到此问题的。
在这里插入图片描述

对于这个回答,我其实是觉得不靠谱的。主要原因是当用户没有登录时,是可以查看文章详情。即这跟类型是无关的,对于说id太长,跟是不靠谱,因为文章里的id有只为个位数,登录后依然无法打开。

于是我又苦哈哈接着去排,首先我去找返回的数据(如下),这是符合接口要求的。
在这里插入图片描述
接着我打开WebStorm去看报错的代码
提示length为null,然后找到了 this.$store.state.avatar。这块以我浅薄的理解就像是全局变量一样

    computed: {
      avatar() {
        let avatar = this.$store.state.avatar

        if (avatar.length > 0) {
          return avatar
        }
        return default_avatar
      },
      title() {
        return `${this.article.title} - 文章 - 码神之路`
      }
    },

继续翻,找到了
在这里插入图片描述
这里我其实已经明白,大概是avatar返回null,或者没有返回


中午小睡一会,接着干

接着看后台代码
后台是用jwt技术,生成token,且把token放入redis中
在这里插入图片描述

(红框是我修改后,上面为原token,果然没有avatar)
继续找

    @Override
    public SysUser findUser(String account, String password) {
        LambdaQueryWrapper<SysUser> queryWrapper=new LambdaQueryWrapper<>();
        queryWrapper.eq(SysUser::getAccount,account);
        queryWrapper.eq(SysUser::getPassword,password);
        queryWrapper.select(SysUser::getAccount,SysUser::getId,SysUser::getNickname);
        queryWrapper.last("limit 1");
        return sysUserMapper.selectOne(queryWrapper);
    }

问题所在
少了一个,所以只有Account、id、NickName

SysUser::getAvatar

修改再次测试,bug排除!!!


心得

  1. 后端程序员也要懂前端
  2. 靠别人不如自己
Logo

前往低代码交流专区

更多推荐