基于验证码的用户注册 Dear 丶 2021-07-24 21:05 404阅读 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
还没有评论,来说两句吧...