Part13 - 用户注册

超、凢脫俗 2022-11-17 10:26 172阅读 0赞

## 01-前端整合发送短信验证码 ##

### 一、运行srb-site ###

1、解压  
`srb_site`  
2、运行

npm run dev

### 二、前端页面整合 ###

pages/register.vue

methods: { 
        //发短信 
        send() { 
          if (!this.userInfo.mobile) { 
            this.$message.error('请输入手机号')
            return
          }
    
          //防止重复提交
          if (this.sending) return
          this.sending = true
    
          //倒计时
          this.timeDown()
    
          //远程调用发送短信的接口
          this.$axios
            .$get('/api/sms/send/' + this.userInfo.mobile)
            .then((response) => { 
              this.$message.success(response.message)
            })
        },
    
        //倒计时
        timeDown() { 
          console.log('进入倒计时')
          this.leftSecond = this.second
          //创建定时器
          const timmer = setInterval(() => { 
            //计数器减一
            this.leftSecond--
            if (this.leftSecond <= 0) { 
              //停止定时器
              clearInterval(timmer)
              //还原计数器
              this.leftSecond = this.second
              //还原按钮状态
              this.sending = false
            }
          }, 1000)
        },
      },

## 02-实现用户注册 ##

### 需求 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW55YW8xOTk0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW55YW8xOTk0_size_16_color_FFFFFF_t_70 1]

### 一、后端接口 ###

#### 1、创建VO对象 ####

service-core中创建vo

package com.atguigu.srb.core.pojo.vo;
    
    @Data
    @ApiModel(description="注册对象")
    public class RegisterVO { 
    
        @ApiModelProperty(value = "用户类型")
        private Integer userType;
    
        @ApiModelProperty(value = "手机号")
        private String mobile;
    
        @ApiModelProperty(value = "验证码")
        private String code;
    
        @ApiModelProperty(value = "密码")
        private String password;
    }

#### 2、定义常量 ####

UserInfo中添加常量

public static final Integer STATUS_NORMAL = 1;
    public static final Integer STATUS_LOCKED = 0;

#### 3、引入MD5工具类 ####

guigu-common中util包，引入工具类：

MD5.java：MD5加密

#### 4、Controller ####

注意：将controller包中的UserInfoController移植到controller.api包下

package com.atguigu.srb.core.controller.api;
    
    @Api(tags = "会员接口")
    @RestController
    @RequestMapping("/api/core/userInfo")
    @Slf4j
    @CrossOrigin
    public class UserInfoController { 
    
        @Resource
        private UserInfoService userInfoService;
    
        @Resource
        private RedisTemplate redisTemplate;
    
        @ApiOperation("会员注册")
        @PostMapping("/register")
        public R register(@RequestBody RegisterVO registerVO){ 
    
            String mobile = registerVO.getMobile();
            String password = registerVO.getPassword();
            String code = registerVO.getCode();
    
            //MOBILE_NULL_ERROR(-202, "手机号不能为空"),
            Assert.notEmpty(mobile, ResponseEnum.MOBILE_NULL_ERROR);
            //MOBILE_ERROR(-203, "手机号不正确"),
            Assert.isTrue(RegexValidateUtils.checkCellphone(mobile), ResponseEnum.MOBILE_ERROR);
            //PASSWORD_NULL_ERROR(-204, "密码不能为空"),
            Assert.notEmpty(password, ResponseEnum.PASSWORD_NULL_ERROR);
            //CODE_NULL_ERROR(-205, "验证码不能为空"),
            Assert.notEmpty(code, ResponseEnum.CODE_NULL_ERROR);
    
            //校验验证码
            String codeGen = (String)redisTemplate.opsForValue().get("srb:sms:code:" + mobile);
            //CODE_ERROR(-206, "验证码不正确"),
            Assert.equals(code, codeGen, ResponseEnum.CODE_ERROR);
    
            //注册
            userInfoService.register(registerVO);
            return R.ok().message("注册成功");
        }
    }

#### 5、Service ####

接口：UserInfoService

package com.atguigu.srb.core.service;
    
    public interface UserInfoService extends IService<UserInfo> { 
    
        void register(RegisterVO registerVO);
    }

实现：UserInfoServiceImpl

package com.atguigu.srb.core.service.impl;
    
    @Service
    public class UserInfoServiceImpl extends ServiceImpl<UserInfoMapper, UserInfo> implements UserInfoService { 
    
        @Resource
        private UserAccountMapper userAccountMapper;
    
        @Transactional(rollbackFor = { Exception.class})
        @Override
        public void register(RegisterVO registerVO) { 
    
            //判断用户是否被注册
            QueryWrapper<UserInfo> queryWrapper = new QueryWrapper<>();
            queryWrapper.eq("mobile", registerVO.getMobile());
            Integer count = baseMapper.selectCount(queryWrapper);
            //MOBILE_EXIST_ERROR(-207, "手机号已被注册"),
            Assert.isTrue(count == 0, ResponseEnum.MOBILE_EXIST_ERROR);
    
            //插入用户基本信息
            UserInfo userInfo = new UserInfo();
            userInfo.setUserType(registerVO.getUserType());
            userInfo.setNickName(registerVO.getMobile());
            userInfo.setName(registerVO.getMobile());
            userInfo.setMobile(registerVO.getMobile());
            userInfo.setPassword(MD5.encrypt(registerVO.getPassword()));
            userInfo.setStatus(UserInfo.STATUS_NORMAL); //正常
            //设置一张静态资源服务器上的头像图片
            userInfo.setHeadImg("https://srb-file.oss-cn-beijing.aliyuncs.com/avatar/07.jpg");
            baseMapper.insert(userInfo);
    
            //创建会员账户
            UserAccount userAccount = new UserAccount();
            userAccount.setUserId(userInfo.getId());
            userAccountMapper.insert(userAccount);
        }
    }

### 二、前端整合 ###

pages/register.vue  
//注册

register() {
      this.$axios
        .$post('/api/core/userInfo/register', this.userInfo)
        .then((response) => {
          this.step = 2
        })
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW55YW8xOTk0_size_16_color_FFFFFF_t_70]: /images/20221022/f3271c3daf4442398e0778bfc1571bcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW55YW8xOTk0_size_16_color_FFFFFF_t_70 1]: /images/20221022/b7946c05833f4339bea48139c19766bd.png