1、前端代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清风</title>
<link type="text/css" href="css/css.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/restfull.js"></script>
</head>
<body style="background: #FFF;">
<div class="loginLogo">
<div class="logoMid">
<h1 class="logo" style="height: 71px; padding-top: 10px;">
<a href="index.html"><img src="images/loginLogo.jpg"
width="241" height="71" /></a>
</h1>
<div class="loginReg">
还没有会员账号? <a href="login.html">登录</a>
</div>
</div>
</div>
<div class="loginBox">
<!-- <img src="../images/chengnuo.jpg" width="295" height="393" class="chengnuo" /> -->
<!--用户名-->
<div class="regList">
<label>账户名:</label>
<input id="username" name="username" type="text" class="form-control" placeholder="请输入用户名" />
<span style="color: #999;"></span>
</div>
<!--密码-->
<div class="regList">
<label>请设置密码:</label>
<input id="Password" name="password" type="text" class="form-control" placeholder="请输入密码" />
</div>
<!--确认密码-->
<div class="regList">
<label> 请确认密码:</label>
<input id="crmPassword" type="text" class="form-control" placeholder="请再次输入密码" />
</div>
<!--手机号-->
<div class="regList">
<label> 手机号:</label>
<input id="Phone" name="phone" type="text" class="form-control" placeholder="请输入你的手机号" />
</div>
<!-- 验证码-->
<div class="regList">
<label >短信验证码:</label>
<input id="smscode" type="text" placeholder="短信验证码"/>
<a href="javascript:void(0)" onclick="sendCode()">获取短信验证码</a>
</div>
<div class="xieyi">
<input type="checkbox" /> 我已经阅读并同意<a href="#">《17用户注册协议》</a>
</div>
<!--提交按钮-->
<div class="reg">
<!-- <input id="btn-reg" type="button" value="立即注册" /> -->
<!-- <input id="btn-reg" type="button" src="../images/reg.jpg" width="284" height="34" /> -->
<input id="btn-reg" type="button" value="立即注册" />
</div>
<div class="clears"></div>
</div>
<!-- 页面结束-->
<script type="text/javascript">
$("#btn-reg").click(function(){
var username = document.getElementById("username").value;
var password = document.getElementById("Password").value;
var crmPassword = document.getElementById("crmPassword").value;
var phone = document.getElementById("Phone").value;
var code = document.getElementById("smscode").value;
console.log("注册参数1："+ username);
console.log("注册参数2："+ phone);
if(password !=crmPassword ){
alert("密码不一致");
return false;
}
var param = {
username:username,
password:password,
phone:phone,
code:code
}
var url = restapi.url_api_e17+"user/register";
console.log("注册参数："+ JSON.stringify(param));
var requestBody = JSON.stringify(param);// 将JSON对象转换为JSON字符串
$.ajax({
"url":url,
"data":requestBody,
"type":"post",
"contentType":"application/json;charset=UTF-8",
"dataType":"json",
"async" : true,
"success": function(json){
console.log("=====json==="+json)
if(json.status == 200){
alert("注册成功");
window.location.assign("login.html")
}else{
alert(json.message);
}
}
});
});
}
</script>
</body>
</html>
2、后端代码
接收前端传递的数据封装的对象
package com.qing.e17.pojo.bo; import io.swagger.annotations.ApiModel; import io.swagger.annotations.ApiModelProperty; import lombok.Data; import java.io.Serializable; @Data @ApiModel(value = "注册对象") public class RegisterBo implements Serializable { @ApiModelProperty(value = "用户名") private String username; @ApiModelProperty(value = "密码") private String password; @ApiModelProperty(value = "手机号",example = "13699996666" ,required = true) private String phone; @ApiModelProperty(value = "手机验证码",example = "6666") private String code; }
Controller层代码
@ApiOperation("注册")
@PostMapping("/register")
public Result register(@RequestBody RegisterBo registerBo, HttpSession session){
String phone = registerBo.getPhone();
String code = registerBo.getCode();
log.info("电话号码"+phone);
//校验参数
if (StringUtils.isBlank(phone)&&StringUtils.isBlank(code) ){
throw new MyException(ExceptionEnum.USERNAME_PASSWORD_NULL);
}
//根据phone查询用户
User user = userService.findByPhone(phone);
if (user != null){
throw new MyException(ExceptionEnum.USER_NOT);
}
//用户不存在，则注册用户
User saveUser = new User();
saveUser.setUsername(registerBo.getUsername());
String md5Password = MD5Util.MD5(registerBo.getPassword());
saveUser.setPassword(md5Password);
saveUser.setPhone(registerBo.getPhone());
saveUser.setCreatedTime(new Date());
saveUser.setUpdatedTime(new Date());
userService.saveUser(saveUser);
log.info("保存新用户的成功");
return Result.ok(saveUser);
}