springboot+vue设置10天后内容不可修改

springboot+vue设置10天后不可修改

账号信息是非常重要的信息，我们对其的修改也需要进行限制，在此我们简单的设置为在距离注册时间10天后聊天号不可再进行修改，下面就是详细代码

先看效果图
不可修改状态

可修改状态

请求数据

我们先带着用户的 id 去请求后端来看是否符合修改的要求

  created () {
    userApi.getCode(this.$store.state.user.userInfo.id).then(res => {
      this.userCode = res.data.codeVo.code
      this.modifiable = !res.data.codeVo.modifiable
    })
  },

后台判断

我们的视图类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class CodeVo implements Serializable {

    // 用户id
    private Long id;
    // code
    private String code;
    // 是否可修改
    private Boolean modifiable;

}

后端 controller 接口

    // 查询code状态
    @GetMapping("/getCode/{userId}")
    public R getCode(@PathVariable("userId") Long id) {
        CodeVo codeVo = userService.getCodeStatus(id);
        return R.ok().data("codeVo", codeVo);
    }

业务实现类

    //查询code状态
    @Override
    public CodeVo getCodeStatus(Long id) {
        User user = baseMapper.selectOne(new QueryWrapper<User>()
                .select("id", "code", "create_time")
                .eq("id", id));
        CodeVo codeVo = new CodeVo();
        codeVo.setId(id);
        codeVo.setCode(user.getCode());
        // 目前与创建时间相差的天数
        long betweenDay = getBetweenDay(user.getCreateTime());
        codeVo.setModifiable(betweenDay <= ConstValueEnum.CODE_EXP);
        return codeVo;
    }
    //根据时间获取与当前时间相差的天数
    long getBetweenDay(Date target){
        return DateUtil.between(target, DateUtil.date(), DateUnit.DAY);
    }

校验数据

在状态为可修改，我们进行修改后点击修改按钮，首先我们需要判断是否为 字母数字及下划线组合 ，这里使用正则表达式来进行简单的判断

/[\w]/g.test(this.userCode)

\w 表示字母数字及下划线

/g 表示所有内容都要进行匹配

test 是进行匹配返回匹配结果

    updateCode () {
      let flag = /[\w]/g.test(this.userCode)
      if (flag) {
        const params = {
          id: this.$store.state.user.userInfo.id,
          code: this.userCode
        }
        userApi.updateCode(params).then(res => {
          if (res.code === 2000) {
            this.$message.success('修改chat号成功Ｏ(≧口≦)Ｏ')
            this.$store.state.user.userInfo.code = res.data.code
            console.log('res.data.code', res.data.code)
            console.log('this.$store.state.user.userInfo.code', this.$store.state.user.userInfo.code)
            this.$store.dispatch('user/SET_USER_INFO', this.$store.state.user.userInfo)
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        this.$message.error('请输入字母数字及下划线组合 (￣_,￣ )')
      }
    }

后台校验

这里为了安全起见，我们还需要在后端再次进行判断是否可以进行修改，然后再真正修改

controller

    // 修改code,即chat号
    @PostMapping("/updateCode")
    public R updateCode(@RequestBody CodeVo vo) {
        boolean modifiable = userService.updateCode(vo);
        if(modifiable){
            return R.ok().data("code", vo.getCode());
        }else {
            return R.error().resultEnum(ResultEnum.CODE_TIME_OUT);
        }
    }

service

    //修改chat号
    @Override
    public boolean updateCode(CodeVo vo) {
        User user = baseMapper.selectById(vo.getId());
        long betweenDay = getBetweenDay(user.getCreateTime());
        if(betweenDay <=  ConstValueEnum.CODE_EXP){
            user.setCode(vo.getCode());
            int i = baseMapper.updateById(user);
            return i!=0;
        }
        return false;
    }

前端所有代码

<template>
    <div class="code-info">
        <el-input
            v-model="userCode"
            style="width:80%"
            placeholder="请输入chat号"
            maxlength="20"
            clearable
            :disabled="modifiable">
            <template slot="prepend">chat号:</template>
        </el-input>
        <el-alert
            title="只有在距注册10天之内才可进行修改操作"
            type="warning"
            show-icon
            :closable="false">
        </el-alert>
        <el-alert
          title="chat号应为a-z,A-Z,0-9和下划线_组合"
          type="warning"
          show-icon
          :closable="false">
        </el-alert>
        <div>
            <el-button type="primary" plain :disabled="modifiable" @click="updateCode">确认修改</el-button>
        </div>
    </div>
</template>
<script>
import userApi from '@/api/modules/user'
export default {
  name: 'CodeInfo',
  data () {
    return {
      userCode: '',
      modifiable: true
    }
  },
  created () {
    userApi.getCode(this.$store.state.user.userInfo.id).then(res => {
      this.userCode = res.data.codeVo.code
      this.modifiable = !res.data.codeVo.modifiable
    })
  },
  methods: {
    updateCode () {
      let flag = /[\w]/g.test(this.userCode)
      if (flag) {
        const params = {
          id: this.$store.state.user.userInfo.id,
          code: this.userCode
        }
        userApi.updateCode(params).then(res => {
          if (res.code === 2000) {
            this.$message.success('修改chat号成功Ｏ(≧口≦)Ｏ')
            this.$store.state.user.userInfo.code = res.data.code
            console.log('res.data.code', res.data.code)
            console.log('this.$store.state.user.userInfo.code', this.$store.state.user.userInfo.code)
            this.$store.dispatch('user/SET_USER_INFO', this.$store.state.user.userInfo)
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        this.$message.error('请输入字母数字及下划线组合 (￣_,￣ )')
      }
    }
  }
}
</script>
<style>
.code-info {
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
</style>