秒杀项目基础部分总结-----1

设计用户信息模型数据：
package com.miaoshaproject.service.model;

import javax.validation.constraints.Max;
import javax.validation.constraints.Min;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;

public class UserModel {

private Integer id;
@NotBlank(message = "用户名不能为空")
private String name;
@NotNull(message = "性别不能不填")
private Integer gender;
@NotNull(message = "年龄不能不填")
@Min(value = 0,message = "年龄必须大于0")
@Max(value = 150,message = "年龄不能超过150")
private Integer age;
@NotBlank(message = "手机号不能为空")
private String telephone;
private String registerMode;
private String thirdPartyId;
@NotBlank(message = "密码不能为空")
private String encryptPassword;

…
省略getter和setter方法，省略toString方法
}

在数据库中创建用户表，注意，因为用户模型数据中包括敏感信息用户密码，因此将用户密码作为一个单独的表创建
user_info:

user_password:

1.登陆准备—用手机号获取短信验证码（实际的验证码是模拟的）
前端：
添加两个输入框，一个按钮

    <h3 class="form-title">获取otp信息</h3>
    <div class="form-group">
        <label class="control-label">手机号</label>
        <div>
            <input  class="form-control" type="text" placeholder="手机号" name="telephone" id="telephone">
        </div>
    </div>
    <div class="form-actions">
        <button class="btn blue" id="getotp" type="submit">
            获取otp短信
        </button>
    </div>
</div>

其中样式是用了前端框架???
写一个jquery事件，当户点击获取otp短信时，现在前端校验下手机号是否为null，为空则报错，不为空就通过发送Ajax请求，将前端用户填写了电话号码传递给后台，同时，前端接收后台返回的数据放在data中，前端再根据这些返回的数据进一步确定是跳转到的登陆还是报错。
代码如下：
jQuery(document).ready(function () {
//绑定otp的click时间用于向后端发送获取手机验证码的请求
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲getotp").on("cl…("#telephone").val();
if(telephonenull||telephone""){
alert(“手机号不能为空”);
return false;
}

        $.ajax({
            type:"POST",
            contentType:"application/x-www-form-urlencoded",
            url:"http://localhost:8090/user/getotp",
            data:{
                "telephone":$("#telephone").val(),//传递的参数
            },
            xhrFields:{withCredentials:true},
            success:function (data) {
                if(data.status=="success"){
                    alert("otp已经发送您的手机上,请注意查收");
                    window.location.href="http://localhost:63342/mymiaoshaproject/register.html?_ijt=m0dvunptv1b5d17i1elp3t9ifj";
                }else {
                    alert("otp发送失败,原因为："+data.date.errMsg);
                }
            },
            error:function (data) {
                alert("otp发送失败,原因为："+data.responseTest);
            }
        });
        return false;
    });
});

复习一下前端基础知识：
jQuery 事件 - ready() 方法
实例
在文档加载后激活函数：
$(document).ready(function(){
$(".btn1").click(function(){
$(“p”).slideToggle();
});
});

定义和用法
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档，因此无需选择器。

语法 1
$(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

什么是 AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery ajax() 方法
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法
$.ajax({name:value, name:value, … })
该参数规定 AJAX 请求的一个或多个名称/值对。

下面的表格中列出了可能的名称/值：
名称 值/描述
async 布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr) 发送请求前运行的函数。
cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。

complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在
success 和 error 函数之后）。

contentType 发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
context 为所有 AJAX 相关的回调函数规定 “this” 值。
data 规定要发送到服务器的数据。
dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
dataType 预期的服务器响应的数据类型。
error(xhr,status,error) 如果请求失败要运行的函数。
global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp 在一个 jsonp 中重写回调函数的字符串。
jsonpCallback 在一个 jsonp 中规定回调函数的名称。
password 规定在 HTTP 访问认证请求中使用的密码。
processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset 规定请求的字符集。
success(result,status,xhr) 当请求成功时运行的函数。
timeout 设置本地的请求超时时间（以毫秒计）。
traditional 布尔值，规定是否使用参数序列化的传统样式。
type 规定请求的类型（GET 或 POST）。
url 规定发送请求的 URL。默认是当前页面。
username 规定在 HTTP 访问认证请求中使用的用户名。
xhr 用于创建 XMLHttpRequest 对象的函数。

在后台建立controller包，编写usercontroller类，在其中添加getOtp()方法：

首先在usercontroller类上标注@Controller(“user”)，表明这是一个controller层，spring会自动扫描该组件，创建实例对象，并将其添加到ioc容器中，参数user为容器的id名称。
标注@RequestMapping("/user")，将前端写的url中的请求路径映射到该类上
标注@CrossOrigin(allowCredentials = “true”,allowedHeaders = “*”)，表明这个是跨域请求----后面再具体详解这个知识点

接着在getotp上标注 @RequestMapping(value = “/getotp”,method = {RequestMethod.POST},consumes = {CONTENT_TYPE_FORMED})，指明这个请求的详细路径，这个注解标注在类上，表示该类上下的方法的请求路径都要加上这个注解中的值，标注在方法上，则表示这个方法的的映射路径。

以下是获取otp短信的步骤与细节：
（1）用random类生成一个随机数，将其转换成字符串
（2）将用户的电话号码和验证码以键值对的形式存放在request请求域中
（3）将OTP验证码通过短信通道发送给用户（省略）短信通道流程–直接在后台打印这两个数据

具体实现代码如下：
@Controller(“user”)
@RequestMapping("/user")
@CrossOrigin(allowCredentials = “true”,allowedHeaders = “*”)
public class UserController extends BaseController {
//用户获取otp短息接口
@RequestMapping(value = “/getotp”,method = {RequestMethod.POST},consumes = {CONTENT_TYPE_FORMED})
@ResponseBody
public CommonReturnType getOtp(@RequestParam(name = “telephone”)String telephone){
//需要按照一定的规则生成OTP验证码
Random random=new Random();
int randomint=random.nextInt(99999);
randomint+=10000;
String otpCode=String.valueOf(randomint);
//将OTP验证码同对应用户的手机号关联,使用httpsession的方式绑定他的手机号与OTPCODE
httpServletRequest.getSession().setAttribute(telephone,otpCode);

  //将OTP验证码通过短信通道发送给用户（省略）短信通道流程，第三方短信通道，以httppost的方式将短信模版的内容post给对方手机号上即可
    System.out.println("telephone="+telephone+"& otpCode="+otpCode);
    return CommonReturnType.create(null);
}

}

知识点补充：
request.setAttribute(“num”,value)；有效范围是一个请求范围，不发送请求的界面无法获取到value的值，jsp界面获取使用EL表达式$num；request.getSession().setAttribute("num",value)；有效范围是一个session周期，在session过期之前或者用户关闭页面之前是有效的，jsp界面获取使用EL表达式${num}；

当以上方法执行完成，若返回给前端的数据是正确的，则跳转到登陆流程，若是失败，则将错误信息报告给用户。

具体代码如下：
success:function (data) {
if(data.status==“success”){
alert(“otp已经发送您的手机上,请注意查收”);
window.location.href=“http://localhost:63342/mymiaoshaproject/register.html?_ijt=m0dvunptv1b5d17i1elp3t9ifj”;
}else {
alert(“otp发送失败,原因为：”+data.date.errMsg);
}
},
error:function (data) {
alert(“otp发送失败,原因为：”+data.responseTest);
}
});

文中有用到来自其他博客和网站的代码，未能详细标注出处，如有侵权，联系删除。