SpringBoot构建电商基础秒杀项目总结
Posted hequnwang10
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SpringBoot构建电商基础秒杀项目总结相关的知识，希望对你有一定的参考价值。
用户注册功能实现
用户注册接口
一、问题详解
在实现里接口注册的时候遇到了一些问题，所以先在开头部分讲解这些bug如何解决！
1、首先是允许跨域请求问题
前端getotp.html和register.html中需要加入下面代码：
//允许跨域请求
xhrFields:{withCredentials:true},
后端的UserController加上注解时**@CrossOrigin(allowCredentials = “true”,allowedHeaders="")** 运行出错,解决方案是将getotp.html和register.html在webstrom中运行，此时会有端口号，将改为**@CrossOrigin(origins = “http://localhost:63342”,allowCredentials = “true”,allowedHeaders="")**
2、连接数据库设置
首先查看数据库版本，我这里对应的是5.版本的数据库；
application.properties
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/miaosha?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone =Asia/Shanghai
二、注册界面代码
getotp.html
<html>
<head>
<meta charset="UTF-8">
<link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/global/plugins/css/component.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<title>Title</title>
</head>
<body class="login">
<div class="content">
<h3 class="form-title">获取otp信息</h3>
<div class="form-group">
<label class="control-label">手机号</label>
<div>
<input class="form-control" type="text" placeholder="手机号" name="telphone" id="telphone"/>
</div>
</div>
<div class="form-actions">
<button class="btn blue" id="getotp" type="submit">
获取otp短信
</button>
</div>
</div>
</body>
<script>
jQuery(document).ready(function () {
//绑定otp的click事件用于向后端发送获取手机验证码的请求
$("#getotp").on("click",function () {
var telphone=$("#telphone").val();
if (telphone==null || telphone=="") {
alert("手机号不能为空");
return false;
}
//映射到后端@RequestMapping(value = "/getotp", method = {RequestMethod.POST}, consumes = {CONTENT_TYPE_FORMED})
$.ajax({
type:"POST",
contentType:"application/x-www-form-urlencoded",
url:"http://localhost:8090/user/getotp",
data:{
"telphone":$("#telphone").val(),
},
//允许跨域请求
xhrFields:{withCredentials:true},
success:function (data) {
if (data.status=="success") {
alert("otp已经发送到了您的手机，请注意查收");
window.location.href="file:///E:/spring/register.html";
}else {
alert("otp发送失败，原因为" + data.data.errMsg);
}
},
error:function (data) {
alert("otp发送失败，原因为"+data.responseText);
}
});
});
});
</script>
</html>
register.html
<html>
<head>
<meta charset="UTF-8">
<link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/global/plugins/css/component.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<title>Title</title>
</head>
<body class="login">
<div class="content">
<h3 class="form-title">用户注册</h3>
<div class="form-group">
<label class="control-label">手机号</label>
<div>
<input class="form-control" type="text" placeholder="手机号" name="telphone" id="telphone"/>
</div>
</div>
<div class="form-group">
<label class="control-label">验证码</label>
<div>
<input class="form-control" type="text" placeholder="验证码" name="otpCode" id="otpCode"/>
</div>
</div>
<div class="form-group">
<label class="control-label">用户昵称</label>
<div>
<input class="form-control" type="text" placeholder="用户昵称" name="name" id="name"/>
</div>
</div>
<div class="form-group">
<label class="control-label">性别</label>
<div>
<input class="form-control" type="text" placeholder="性别" name="gender" id="gender"/>
</div>
</div>
<div class="form-group">
<label class="control-label">年龄</label>
<div>
<input class="form-control" type="text" placeholder="年龄" name="age" id="age"/>
</div>
</div>
<div class="form-group">
<label class="control-label">密码</label>
<div>
<input class="form-control" type="password" placeholder="密码" name="password" id="password"/>
</div>
</div>
<div class="form-actions">
<button class="btn blue" id="register" type="submit">
提交注册
</button>
</div>
</div>
</body>
<script>
jQuery(document).ready(function () {
//绑定otp的click事件用于向后端发送获取手机验证码的请求
$("#register").on("click",function () {
var telphone=$("#telphone").val();
var otpCode=$("#otpCode").val();
var password=$("#password").val();
var age=$("#age").val();
var gender=$("#gender").val();
var name=$("#name").val();
if (telphone==null || telphone=="") {
alert("手机号不能为空");
return false;
}
if (otpCode==null || otpCode=="") {
alert("验证码不能为空");
return false;
}
if (name==null || name=="") {
alert("用户名不能为空");
return false;
}
if (gender==null || gender=="") {
alert("性别不能为空");
return false;
}
if (age==null || age=="") {
alert("年龄不能为空");
return false;
}
if (password==null || password=="") {
alert("密码不能为空");
return false;
}
//映射到后端@RequestMapping(value = "/register", method = {RequestMethod.POST}, consumes = {CONTENT_TYPE_FORMED})
$.ajax({
type:"POST",
contentType:"application/x-www-form-urlencoded",
url:"http://localhost:8090/user/register",
data:{
"telphone":telphone,
"otpCode":otpCode,
"password":password,
"age":age,
"gender":gender,
"name":name
},
//允许跨域请求
xhrFields:{withCredentials:true},
success:function (data) {
if (data.status=="success") {
alert("注册成功");
}else {
alert("注册失败，原因为" + data.data.errMsg);
}
},
error:function (data) {
alert("注册失败，原因为"+data.responseText);
}
});
return false;
});
});
</script>
</html>
三、代码实现
1、UserService接口修改
public interface UserService {
//通过用户Id获取用户对象的方法；
UserModel getUserById(Integer id);
void register(UserModel userModel) throws BusinessException;
}
2、UserServiceImpl.java修改
@Override
@Transactional//声明事务
public void register(UserModel userModel) throws BusinessException {
//校验
if (userModel == null) {
throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR);
}
if (StringUtils.isEmpty(userModel.getName())
|| userModel.getGender() == null
|| userModel.getAge() == null
|| StringUtils.isEmpty(userModel.getTelphone())) {
throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR);
}
//实现model->dataobject方法
UserDO userDO = convertFromModel(userModel);
//insertSelective相对于insert方法，不会覆盖掉数据库的默认值
userDOMapper.insertSelective(userDO);
userModel.setId(userDO.getId());
UserPasswordDO userPasswordDO = convertPasswordFromModel(userModel);
userPasswordDOMapper.insertSelective(userPasswordDO);
return;
}
private UserPasswordDO convertPasswordFromModel(UserModel userModel) {
if (userModel == null) {
return null;
}
UserPasswordDO userPasswordDO = new UserPasswordDO()SpringBoot构建电商基础秒杀项目总结