手机号码注册html页面和js代码：
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title>注册</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="./AmazeUI-2.4.2/assets/css/amazeui.min.css" />
<link href="./css/dlstyle.css" rel="stylesheet" type="text/css">
<script src="./AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
<script src="./AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
<script src="js/common.js"></script>
</head>
<body>
<div class="login-boxtitle">
<a href="home/demo.html"><img alt="" src="./images/logobig.png" /></a>
</div>
<div class="res-banner">
<div class="res-main">
<div class="login-banner-bg"><span></span><img src="./images/big.jpg" /></div>
<div id="registerDiv" class="login-box">
<div class="am-tabs" id="doc-my-tabs">
<ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
<li class="am-active"><a href="">邮箱注册</a></li>
<li><a href="">手机号注册</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-active">
<form method="post">
<div class="user-email">
<label for="email"><i class="am-icon-envelope-o"></i></label>
<input type="email" name="" id="email" placeholder="请输入邮箱账号">
</div>
<div class="user-pass">
<label for="password"><i class="am-icon-lock"></i></label>
<input type="password" name="" id="password" placeholder="设置密码">
</div>
<div class="user-pass">
<label for="passwordRepeat"><i class="am-icon-lock"></i></label>
<input type="password" name="" id="passwordRepeat" placeholder="确认密码">
</div>
</form>
<div class="login-links">
<label for="reader-me">
<input id="reader-me" type="checkbox"> 点击表示您同意商城《服务协议》
</label>
</div>
<div class="am-cf">
<input type="submit" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
</div>
</div>
<div class="am-tab-panel">
<form method="post" v-model="userPhoneForm">
<div class="user-phone">
<label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
<input type="tel" v-model="userPhoneForm.phone" name="" id="phone" placeholder="请输入手机号">
</div>
<div class="verification">
<label for="code"><i class="am-icon-code-fork"></i></label>
<input type="text" v-model="userPhoneForm.code"name="" id="code" placeholder="请输入验证码">
<!--<a class="btn" href="javascript:void(0);" @click="sendMobileCode" id="sendMobileCode">-->
<!--<span id="dyMobileButton">获取</span></a>-->
<button id="sendMobileCodeBtn" type='button' v-on:click="sendMobileCode">获取</button>
</div>
<div class="user-pass">
<label for="password"><i class="am-icon-lock"></i></label>
<input type="password" v-model="userPhoneForm.password" name="" id="password" placeholder="设置密码">
</div>
<div class="user-pass">
<label for="passwordRepeat"><i class="am-icon-lock"></i></label>
<input type="password" v-model="userPhoneForm.passwordRepeat" name="" id="passwordRepeat" placeholder="确认密码">
</div>
</form>
<div class="login-links">
<label for="reader-me">
<input id="reader-me" type="checkbox"> 点击表示您同意商城《服务协议》
</label>
</div>
<div class="am-cf">
<input type="submit" name="" @click="phoneRegister" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
</div>
<hr>
</div>
<script>
$(function() {
$('#doc-my-tabs').tabs();
})
</script>
</div>
</div>
</div>
<!--引入vue和axios-->
<script src="./plugins/vue/dist/vue.min.js"></script>
<script src="./plugins/axios/dist/axios.js"></script>
<script src="./js/common.js"></script>
<!--vue的js写法-->
<script type="text/javascript">
//创建vue是需要给他传递一个对象
new Vue({
el:"#registerDiv", //id在hmtl模板中要对应
data:{ //数据模型
userPhoneForm:{
phone:'',
code:'',
password:'',
passwordRepeat:''
}
},
methods:{//注册的方法
phoneRegister(){
//校验
if(!this.userPhoneForm.phone){
alert("请输入手机号码！");
return;
}
if(!this.userPhoneForm.code){
alert("请输入验证码！");
return;
}
if(!this.userPhoneForm.password){
alert("请输入密码！");
return;
}
if(!this.userPhoneForm.passwordRepeat){
alert("请输入再次输入密码！");
return;
}
if(!this.userPhoneForm.password===this.userPhoneForm.passwordRepeat){
alert("密码不一致！")
return;
}
//提交注册
this.$http.post("/user/phoneRegister",this.userPhoneForm)
.then(result=>{
if(result.data.success){
//提示注册成功，跳转登录页面
alert("注册成功");
location.href = "/login.html"
}
else{
alert("注册失败:"+result.data.message);
}
})
},
//发送手机验证码的方法
sendMobileCode(e){
if(!this.userPhoneForm.phone){
alert("请输入手机号码！");
return;
}
if (!/^1[34578]\d{9}$/.test(this.userPhoneForm.phone)) {
alert("请输入正确的手机号码！");
return;
}
//2 灰化按钮 不能点击它
$("#sendMobileCodeBtn").attr("disabled",true);
//3 发送请求，根据请求做事
this.$http.post("/Verifycode/sendCode",{"phone":this.userPhoneForm.phone})
.then(result=>{
//3.1 倒计时处理
if(result.data.success){
alert("手机验证码已经发送到您的手机，请在1分钟内使用");
let time = 60;
var timer = window.setInterval(function () {
time--;
$("#sendMobileCodeBtn").html(time+"s");
//倒计时结束,停止定时任务
if(time<=0){
//结束定时任务
window.clearInterval(timer);//清除定时器
$("#sendMobileCodeBtn").attr("disabled",false);
$("#sendMobileCodeBtn").html("重发");
}
},1000)//执行的时间间隔
//倒计时结束以后,按钮改为重发
}else{
alert("网络繁忙,请稍后再试!");
//3.2 如果失败解除灰化
$("#sendMobileCodeBtn").attr("disabled",false);
$("#sendMobileCodeBtn").html("重发");
}
})
}
},
mounted(){
}
})
</script>
</div>
</body>
</html>
发送验证码controller接口：
package com.baidu.pethome.user.controller;
import com.baidu.pethome.common.util.AjaxResult;
import com.baidu.pethome.user.service.IVerifycodeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.Map;
//发送验证码及接口
@RestController
@RequestMapping("/Verifycode")
public class VerifycodeController {
@Autowired
private IVerifycodeService verifycodeService;
@RequestMapping(value = "/sendCode",method = RequestMethod.POST)
public AjaxResult phoneRegisterCode(@RequestBody Map<Object,String> map){
verifycodeService.phoneRegisterCode(map);
return AjaxResult.me();
}
}
service接口：
package com.baidu.pethome.user.service;
import com.baidu.pethome.common.util.AjaxResult;
import java.util.Map;
public interface IVerifycodeService {
/**
* 发送短信验证码
* @param map
* @return
*/
AjaxResult phoneRegisterCode(Map<Object, String> map);
/**
* 通过手机号获取注册验证码
* @param phone 手机号
* @return 验证码
*/
String getRegisterCodeByPhone(String phone);
}
验证码发送实现类接口：
@Service
public class VerifycodeServiceImpl implements IVerifycodeService {
@Override
public AjaxResult phoneRegisterCode(Map<Object, String> map) {
// 获取手机号并完成校验 是否为空
String phone = map.get("phone");
if (StringUtils.isBlank(phone)) {
return AjaxResult.me().setSuccess(false).setMessage("手机号不能为空！");
}
//判断是否过了60秒的重发时间
String redisForkey = "SMS_REG_CODE:" +phone;//组装redis存储的key
String redisCode = RedisUtils.INSTANCE.get(redisForkey);//从redis获取验证码
String code = null;
if(StringUtils.isNotBlank(redisCode)){//如果不为空(redis存储过,发送过验证码)
//没有过重发时间就直接返回
if((System.currentTimeMillis()-Long.valueOf(redisCode.split(":")[1]))<=60*1000){
return AjaxResult.me().setSuccess(false).setMessage("验证码正在发送,请稍后");
}
//放到redis里面,过了重发时间,继续使用原来的验证码
code=redisCode.split(":")[0];//过了重发时间,将上一次的验证码再发一次
}
if(code==null) {
code = StrUtils.getRandomString(4);//没有发送过验证码
}
RedisUtils.INSTANCE.set(redisForkey,code+":"+System.currentTimeMillis(),60 );
String sms = "你的验证码为"+code+"请在1分钟之内使用";
//发短信
SmsSendUtil.sendSms(phone,sms);
System.out.println(sms);
return AjaxResult.me();
}
/**
* 通过手机号获取注册验证码
* @param phone 手机号
* @return 验证码
*/
@Override
public String getRegisterCodeByPhone(String phone) {
//组装读取key
String key = "SMS_REG_CODE:" +phone;
String s = RedisUtils.INSTANCE.get(key);
if(s!=null){
return s.split(":")[0];// s 9527:16322
}
//没有验证码
return null;
}
提交注册contrller接口：
dto参数封装：
package com.baidu.pethome.user.dto;
public class UserDto {
private String phone;
private String code;
private String password;
private String passwordRepeat;
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getPasswordRepeat() {
return passwordRepeat;
}
public void setPasswordRepeat(String passwordRepeat) {
this.passwordRepeat = passwordRepeat;
}
@Override
public String toString() {
return "UserDto{" +
"phone='" + phone + '\'' +
", code='" + code + '\'' +
", password='" + password + '\'' +
", passwordRepeat='" + passwordRepeat + '\'' +
'}';
}
}
//手机注册接口
@RequestMapping(value = "/phoneRegister",method = RequestMethod.POST)
public AjaxResult phoneRegister(@RequestBody UserDto userDto){
System.out.println(userDto);
userService.phoneRegister(userDto);
return AjaxResult.me();
}
注册实现类：
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {
@Autowired
private IVerifycodeService verifycodeService;
@Autowired
private UserMapper userMapper;
@Autowired
private IWxuserService wxUserService;
//手机注册逻辑
@Override
public AjaxResult phoneRegister(UserDto userDto) {
User user = initUser(userDto);
//开始验证
if(user.getPhone()==null){
throw new GlobalException("手机号不能为空！");
}
//验证密码
if(!userDto.getPassword().equals(userDto.getPasswordRepeat())){
throw new GlobalException("两次输入的密码不一致！");
}
//验证验证码是否正确
String regCode = verifycodeService.getRegisterCodeByPhone(userDto.getPhone());
if(regCode== null||!regCode.equals(userDto.getCode())){
throw new GlobalException("验证码不正确！");
}
userMapper.insert(user);
return AjaxResult.me();
}
//手机注册私有方法user初始化
private User initUser(UserDto userDto){
User user = new User();
user.setPhone(userDto.getPhone());
user.setCreatetime(new Date());
user.setState(1);
String salt = StrUtils.getComplexRandomString(32);//获取盐值字符串 MD5加密 随机生成
String pwd = MD5Utils.encrypByMd5(userDto.getPassword()+salt );//userDto.getPassword()原声密码
user.setPassword(pwd);
user.setSalt(salt);
return user;
}
手机号登陆接口：
//手机号登陆
@RequestMapping(value = "/login",method = RequestMethod.POST)
public AjaxResult login(@RequestBody User user){
return userService.login(user);
}
登陆实现类：
//手机号登陆逻辑
@Override
public AjaxResult login(User user) {
//1.非空判断
String username = user.getUsername();
String pwd = user.getPassword();
if(StringUtils.isBlank(username)||StringUtils.isBlank(pwd)){
return AjaxResult.me().setSuccess(false).setMessage("用户名或密码不能为空");
}
//2.获取用户名 去数据库查询
User loginUser = userMapper.login(username);
//3.查看用户是否存在
if(loginUser==null){
return AjaxResult.me().setSuccess(false).setMessage("用户未注册");
}
if(loginUser.getState()!=1){
return AjaxResult.me().setSuccess(false).setMessage("用户账户异常");
}
//4.密码匹配
String sucPwd = MD5Utils.encrypByMd5(user.getPassword() + loginUser.getSalt());
if(!loginUser.getPassword().equals(sucPwd)){
return AjaxResult.me().setSuccess(false).setMessage("密码错误");
}
//5.生成令牌 令牌(key) 用户(value) 存储到redis里面
String token = UUID.randomUUID().toString();//生成令牌
RedisUtils.INSTANCE.set(token, JSONObject.toJSONString(loginUser) ,30*60 );//fastjson 对象转json json转对象
//6.把令牌和用户返回给前端
Map<String,Object> resultMap = new HashMap<>();
resultMap.put("uToken",token );
resultMap.put("user",loginUser );
return AjaxResult.me().setResultObj(resultMap);//给前台响应令牌与数据
}
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
