SpringBoot+Mybatis完成商品秒杀项目之用户模块开发（四）

1.用户模型管理——Metronic模板简介

采用前后端分离的思想，建立一个html文件夹，引入static文件夹

前端文件保存在本地的哪个盘下都可以，因为是通过ajax来异步获取接口

2.用户模型管理——getotp页面实现

1.getotp.html：

    
    
    


    

        
获取otp信息
        

            手机号
            

                
            
        
        

            
                获取otp短信
            
        
    

2.指定controller的method

@RequestMapping(value = "/getotp", method = {RequestMethod.POST}, consumes = {CONTENT_TYPE_FORMED})

3.用户模型管理——otp验证码获取

public class UserController extends BaseController{

    @Autowired
    private UserService userService;

    @Autowired
    private HttpServletRequest httpServletRequest;

    //用户获取otp短信接口
    @RequestMapping("/getotp")
    @ResponseBody
    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验证码通过短信通道发送给用户，省略
        System.out.println("telphone=" + telphone + "&otpCode=" + otpCode);

        return CommonReturnType.create(null);
    }

测试，在控制台打印数据 。。。。
3.提示发送失败，使用chrome调试，发现报错为

No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域请求错误，只需要在UserController类上加一个注解@CrossOrigin即可

@CrossOrigin(origins = {"*"}, allowCredentials = "true")

在.getotp.html中添加 xhrFields:{withCredentials:true},

4. 用户模型管理——getotp页面美化

1.引入样式表

2.使用样式

    

        
获取otp信息
        

            手机号
            

                
            
        
        

            
                获取otp短信
            
        
    

测试：