判断添加用户名的唯一性

判断添加用户名的唯一性，促使用户名不一样，可以根据用户名进行登录操作

一、编写dao

//  根据用户名查询用户对象（唯一对象）
@Select("select * from sys_user where username=#{username}")
SysUser findByUsername(String username);
二、编写service及实现类
（1）service

boolean findByUsername(String username);

（2）实现类

//判段存储用户名的唯一性,查到数据库已存在用户名返回false，不存在返回true
@Override
public boolean findByUsername(String username) {
    SysUser byUsername = sysUserDao.findByUsername(username);
    return byUsername==null;
}
三、编写controller

//判断添加用户，用户名存在的唯一性
@RequestMapping("/isUniqueUsername")
//转换json数据  @ResponseBody
@ResponseBody
public String isUniqueUsername(String username){
    boolean byUsername = sysUserService.findByUsername(username);
    //吧byUsername转成字符串
    return String.valueOf(byUsername);
}
四、编写web页面相关内容
（1）输入用户名的input标签添加onchange="isUniqueUsername(this)"事件，鼠标离开进行比较用户名，用ajax书写比较

<input type="text" class="form-control" name="username" id="username"
   onchange="isUniqueUsername(this)" placeholder="用户名称" value="">
（2）给保存按钮添加id="saveBtn"根据判断用户名唯一性返回值进行启用和禁用按钮

<button type="submit" class="btn bg-maroon" id="saveBtn">保存</button>
（3）编写ajax获取输入框输入的用户名，进行数据库用户名对比，判断用户名的唯一性

<script type="text/javascript">
   //判断用户名的唯一性
   function isUniqueUsername(a) {
      //获取页面输入框输入的用户名
      var username=$("#username").val();
      //请求controller判断用户名的唯一性
      $.ajax({
         //url路径
         url:"${pageContext.request.contextPath}/sysUser/isUniqueUsername",
         //data请求数据
         data:{"username":username},
         //dataType json
         type:"post",
         //回调函数
         success:function (data) {
            //回调函数 data 返回流
            if(data=="false"){
               //如果返回false不可使用
               //提示用户已存在 ----设置文本框改成红色  宽度为1  样式实线
               $("#username").attr("style","border:red 1px solid");
               // 保存按钮禁用
               $("#saveBtn").prop("disabled",true);
            }else {
               //如果返回的是true    则设置保存按钮可用  恢复原来的样式  文本框还原
               $("#username").attr("style","");
               $("#saveBtn").prop("disabled",false);
            }
         }
           });
   }
</script>