注册功能的实现（详细）

1.验证用户名是否存在，利用onblur事件进行异步验证

<div class="col-sm-5">
      <input type="text" class="form-control" required placeholder="小写字母集开头" th:onblur="|checkUser(this)|">
</div>
<div id="msg" class="col-sm-3" style="padding-top: 10px; display: none">
<label class="alert-danger" id="tip">用户名不合法</label>
</div>
<script th:inline=javascript>
    var contextPath = [[${#request.getContextPath()}]];
</script>


<sccript type="text/javascript">
//验证用户名是否存在
function checkUser(obj){
    $.ajax({
        url: contextPath+ "/user/checkUserName",
        data: {"username":obj.value},
        method: post,
        success:function(data){
         $("#msg").css("display","block");
        if(data == 102){//用户存在
      $("#tip").html("用户名已经存在");
    $("#tip").removeClass("alert-success");
    $("#tip").addClass("alert-danger");  
}else{
    
   $("#tip").html("用户名可以注册");
    $("#tip").removeClass("alert-danger");
    $("#tip").addClass("alert-success");  
}

        

};
})}
</script>

2.创建userController控制器

@Controller
@RequestMapping("/user")
public class UserController{
@Autowired
private UserService userService;
@ResponseBody
@RequestMapping("/checkUserName")
public String checkUserName(String username){
    return userService.checkUser(username);
}}

3.创建UserMapper

@Repository
public interface UserMapper extends BaseMapper<User>{}

4.创建UserService

@Service
public class userService extends ServiceImpl<UserMapper, User> {
    @Autowired
    private UserMapper userMapper;
    //验证用户存在性
    public String checkUser(String username){
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username",username);
        User user = userMapper.selectOne(queryWrapper);
        if (user == null){
            return "101";//用户不存在
        }else {
            return "102";//用户存在
        }
    }
}

5.表单提交后台

<div class="modal-footer">
    <input type="button" class="btn btn-primary" value="注册" th:onclick="|register()|">
</div>


<script>
function register(){
//表单中的所有数据序列化
var datas=$("#form").serialize();
 $.ajax({
        url: contextPath+ "/user/register",
        data: datas,
        method: post,
        success:function(data){
  
        if(data =="success"){
        alert("注册成功");
        $("#resister").modal('hide');//隐藏注册页面
}
}
}}
</script>

6.提交的controller

@ResponseBody
@RequestMapping("register")
public String register(User user){
userService.saveOrUpdate(user);
return "success";
}