SpringBoot构建电商基础秒杀项目总结
Posted hequnwang10
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SpringBoot构建电商基础秒杀项目总结相关的知识，希望对你有一定的参考价值。
用户模型管理
用户信息管理-otp验证码获取
- otp短信获取
- otp注册用户
- 用户手机登陆
1、新建getotp.html文件
<html>
<head>
<meta charset="UTF-8">
<script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<title>Title</title>
</head>
<body>
<div>
<h3>获取otp信息</h3>
<div>
<label>手机号</label>
<div>
<input type="text" placeholder="手机号" name="telphone" id="telphone"/>
</div>
</div>
<div>
<button 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(),
},
success:function (data) {
if (data.status=="success") {
alert("otp已经发送到了您的手机，请注意查收");
}else {
alert("otp发送失败，原因为" + data.data.errMsg);
}
},
error:function (data) {
alert("otp发送失败，原因为"+data.responseText);
}
});
});
});
</script>
</html>
2、修改UserController.java文件
@Controller("user")
@RequestMapping("/user")
public class UserController extends BaseController{
@Autowired
private UserService userService;
@Autowired
private HttpServletRequest httpServletRequest;
//用户获取otp短信接口
@RequestMapping(value = "/getotp",method = {RequestMethod.POST},consumes = {CONTENT_TYPE_FORMED})
@ResponseBody
@CrossOrigin
public CommonReturnType getOtp(@RequestParam(name = "telphone")String telphone){
//需要按照一定的规则生成OTP验证码
Random random = new Random();
int randomInt = random.nextInt(99999);
randomInt += 10000;
String otpCode = String.valueOf(randomInt);
//将OTP验证码同对应用户的手机号关联，使用httpsession的方式绑定手机号与OTPCDOE
httpServletRequest.getSession().setAttribute(telphone,otpCode);
//将OTP验证码通过短信通道发送给用户，省略
//将OTP验证码通过短信通道发送给用户，省略
System.out.println("telphone=" + telphone + "&otpCode=" + otpCode);
return CommonReturnType.create(null);
}
@RequestMapping("/get")
@ResponseBody
public CommonReturnType getUser(@RequestParam(name = "id")Integer id) throws BusinessException {
//调用service服务获取对应id的用户对象并返回给前端
UserModel userModel = userService.getUserById(id);
UserVO userVO = convertFromModel(userModel);
//若获取的对应用户信息不存在
if (userModel == null) {
// userModel.setEncrptPassword("123");
throw new BusinessException(EmBusinessError.USER_NOT_EXIST);
}
//将核心领域模型用户对象转化为可供UI使用的viewobject
return CommonReturnType.create(userVO);
}
private UserVO convertFromModel(UserModel userModel){
if (userModel==null){
return null;
}
UserVO userVO = new UserVO();
BeanUtils.copyProperties(userModel,userVO);
return userVO;
}
}
3、运行测试
发现测试成功！
4、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(),
},
success:function (data) {
if (data.status=="success") {
alert("otp已经发送到了您的手机，请注意查收");
}else {
alert("otp发送失败，原因为" + data.data.errMsg);
}
},
error:function (data) {
alert("otp发送失败，原因为"+data.responseText);
}
});
});
});
</script>
</html>
以上是关于SpringBoot构建电商基础秒杀项目总结的主要内容，如果未能解决你的问题，请参考以下文章