基于验证码的用户注册

Dear 丶 2021-07-24 21:05 463阅读 0赞

# 一 后端接口 #

## 1 引入工具类MD5 ##

public final class MD5 {
        public static String encrypt(String strSrc) {
            try {
                char hexChars[] = {'0', '1', '2', '3', '4', '5', '6', '7', '8',
                        '9', 'a', 'b', 'c', 'd', 'e', 'f'};
                byte[] bytes = strSrc.getBytes();
                MessageDigest md = MessageDigest.getInstance("MD5");
                md.update(bytes);
                bytes = md.digest();
                int j = bytes.length;
                char[] chars = new char[j * 2];
                int k = 0;
                for (int i = 0; i < bytes.length; i++) {
                    byte b = bytes[i];
                    chars[k++] = hexChars[b >>> 4 & 0xf];
                    chars[k++] = hexChars[b & 0xf];
                }
                return new String(chars);
            } catch (NoSuchAlgorithmException e) {
                e.printStackTrace();
                throw new RuntimeException("MD5加密出错！！+" + e);
            }
        }
    
        public static void main(String[] args) {
            System.out.println(MD5.encrypt("111111"));
        }
    }

## 2 定义RegisterVo ##

@Data
    public class RegisterVo implements Serializable {
        private static final long serialVersionUID = 1L;
        /**
         * 昵称
         */
        private String nickname;
        /**
         * 手机
         */
        private String mobile;
        /**
         * 密码
         */
        private String password;
        /**
         * 验证码
         */
        private String code;
    }

## 3 web层 ##

@Api(description = "会员管理")
    @CrossOrigin
    @RestController
    @RequestMapping("/api/ucenter/member")
    @Slf4j
    public class ApiMemberController {
    
    
        @Autowired
        private MemberService memberService;
    
    
        @ApiOperation(value = "会员注册")
        @PostMapping("register")
        public R register(@RequestBody RegisterVo registerVo) {
            memberService.register(registerVo);
            return R.ok().message("注册成功");
        }
    }

## 4 service层 ##

接口

/**
    * 功能描述：注册会员
    *
    * @author cakin
    * @date 2020/12/25
    * @param registerVo 注册信息
    */
    void register(RegisterVo registerVo);

## 5 实现 ##

/**
    * @className: MemberServiceImpl
    * @description: 会员表 服务实现类
    * @date: 2020/12/25
    * @author: cakin
    */
    @Service
    public class MemberServiceImpl extends ServiceImpl<MemberMapper, Member> implements MemberService {
    
    
        @Autowired
        private RedisTemplate redisTemplate;
    
    
        /**
         * 功能描述：注册会员
         *
         * @param registerVo 注册信息
         * @author cakin
         * @date 2020/12/25
         */
        @Override
        public void register(RegisterVo registerVo) {
            // 校验参数
            String nickname = registerVo.getNickname();
            String mobile = registerVo.getMobile();
            String password = registerVo.getPassword();
            String code = registerVo.getCode();
            // 校验手机是否为空以及校验手机是否非法
            if (StringUtils.isEmpty(mobile)
                    || !FormUtils.isMobile(mobile)) {
                throw new GuliException(ResultCodeEnum.LOGIN_MOBILE_ERROR);
            }
            // 校验其他字段是否为空
            if (StringUtils.isEmpty(nickname)
                    || StringUtils.isEmpty(password)
                    || StringUtils.isEmpty(code)) {
                throw new GuliException(ResultCodeEnum.PARAM_ERROR);
            }
            // 通过redis校验验证码
            String checkCode = (String) redisTemplate.opsForValue().get(mobile);
            if (!code.equals(checkCode)) {
                throw new GuliException(ResultCodeEnum.CODE_ERROR);
            }
            // 校验用户是否注册：mysql
            QueryWrapper<Member> queryWrapper = new QueryWrapper<>();
            queryWrapper.eq("mobile", mobile);
            Integer count = baseMapper.selectCount(queryWrapper);
            if (count > 0) {
                throw new GuliException(ResultCodeEnum.REGISTER_MOBLE_ERROR);
            }
            // 注册
            Member member = new Member();
            member.setNickname(nickname);
            member.setMobile(mobile);
            member.setPassword(MD5.encrypt(password));
            member.setAvatar("https://guli-file-191125.oss-cn-beijing.aliyuncs.com/avatar/default.jpg");
            member.setDisabled(false);
            baseMapper.insert(member);
        }
    }

# 二 前端 #

## 1 api ##

import request from '@/utils/request'
    export default {
      // 发送验证码
      sendMessage(mobile) {
        return request({
          baseURL: 'http://localhost:8150',
          url: `/api/sms/send/${mobile}`,
          method: 'get'
        })
      },
      // 注册
      register(member) {
        return request({
          baseURL: 'http://localhost:8160',
          url: '/api/ucenter/member/register',
          method: 'post',
          data: member
        })
      }
    }

## 2 页面部分 ##

<template>
      <div class="main">
        <div class="title">
          <a href="/login">登录</a>
          <span>·</span>
          <a class="active" href="/register">注册</a>
        </div>
    
    
        <div class="sign-up-container">
          <form action="register">
            <div class="input-prepend restyle">
              <input
                v-model="member.nickname"
                type="text"
                placeholder="你的昵称">
              <i class="iconfont icon-user"/>
            </div>
            <div class="input-prepend restyle no-radius">
              <input
                v-model="member.mobile"
                type="text"
                placeholder="手机号">
              <i class="iconfont icon-phone"/>
            </div>
            <div class="input-prepend restyle no-radius" style="position:relative">
              <input
                v-model="member.code"
                type="text"
                placeholder="验证码">
              <i class="iconfont icon-yanzhengma"/>
              <a
                href="javascript:"
                type="button"
                style="position:absolute;right: 10px;top: 15px;"
                @click="getCodeFun()">{
       { codeText }}</a>
            </div>
            <div class="input-prepend">
              <input
                v-model="member.password"
                type="password"
                placeholder="设置密码">
              <i class="iconfont icon-password"/>
            </div>
            <div class="btn">
              <input
                type="button"
                class="sign-up-button"
                value="注册"
                @click="submitRegister()">
            </div>
            <p class="sign-up-msg">
              点击 “注册” 即表示您同意并愿意遵守简书
              
    
              <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
              和
              <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
            </p>
          </form>
          
          <div class="more-sign">
            <h6>社交帐号直接注册</h6>
            <ul>
              <li><a id="weixin" class="weixin" href="http://localhost:8150/api/ucenter/wx/login"><i class="iconfont icon-weixin"/></a></li>
              <li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
            </ul>
          </div>
        </div>
      </div>
    </template>
    
    
    <script>
    import '~/assets/css/sign.css'
    import '~/assets/css/iconfont.css'
    import registerApi from '~/api/register'
    
    
    export default {
      layout: 'sign',
      data() {
        return {
          member: {
            mobile: '',
            code: '',
            nickname: '',
            password: ''
          },
          sending: false, // 是否发送验证码
          second: 60, // 倒计时间
          codeText: '获取验证码'
        }
      },
      methods: {
        // 获取验证码
        getCodeFun() {
          if (this.sending) return // 如果已点击则退出，防止多次重复提交
          this.sending = true // 用户已点击
          registerApi.sendMessage(this.member.mobile).then(response => {
            // 倒计时
            this.timeDown()
            // 提示发送成功
            this.$message.success(response.message)
          })
        },
    
    
        // 倒计时
        timeDown() {
          this.codeText = this.second
    
    
          // 定义计时器
          const timer = setInterval(() => {
            this.codeText--
            if (this.codeText < 1) {
              clearInterval(timer)
              this.codeText = '获取验证码'
              this.sending = false
              this.second = 60
            }
            // console.log(new Date())
          }, 1000)
        },
    
    
        // 注册
        submitRegister() {
          registerApi.register(this.member).then(response => {
            // 提示注册成功
            this.$message.success(response.message)
            this.$router.push({ path: 'login' })
          })
        }
      }
    }
    </script>

# 三 测试 #

![20201226145248844.png][]

[20201226145248844.png]: /images/20210724/e78c9c91d99244ab9f87c150f6edc9f5.png