项目7-音乐播放器5+注册账号

前端之登录注册页面案例_前端登录页面-CSDN博客

1.前端代码 

MAPPER

 @Insert("insert into user(username,password) values (#{username},#{password}) ")
    Integer insertUserInfo(String username,String password);

Service

 public Result insertUserInfo(String username, String oldpassword,String newpassword){
        if(!StringUtils.hasLength(username)||!StringUtils.hasLength(oldpassword)
        ||!StringUtils.hasLength(oldpassword)){
            return Result.fail(Constant.RESULT_CODE_NO_CHOICE,"用户或账号名为空");
        }else if(userMapper.queryUserByNameMessage(username)!=null){
            return Result.fail(Constant.RESULT_CODE_FAIL_SQL,"请重新命名，该用户名已存在");
        }else if(!oldpassword.equals(newpassword)){
            return Result.fail(Constant.RESULT_CODE_NOTMP3_DELETEFAIL,"两次输入的密码不一样");
        }
        String encodepassword=bCryptPasswordEncoder.encode(oldpassword);
        if(userMapper.insertUserInfo(username,encodepassword)<1){
            return Result.fail(Constant.RESULT_CODE_FAIL,"数据库插入信息错误");
        }else{
            return Result.success(true);
        }
    }

Controller

@RequestMapping("/register")
    public Result InsertUserInfo(String username,String oldpassword,String newpassword){

        return userService.insertUserInfo(username,oldpassword,newpassword);
    }

2.拦截器路径修改

3.后端接口测试 

laying=123

马正阳=567

张艺兴=107

 测试成功！！！

数据库也成功传入！！！

现在看存入的密码是否可以登录 

成功！！！

4.前端代码 

<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/md5.min.js"></script>
  <script type="text/javascript"></script>
  <script language="javascript" src="js/jquery-3.1.1.min.js"></script>
    <script>
    var checkbox=document.getElementsByClassName('checkbox');
    function register(){
      if(checkbox[0].checked==true){
        $.ajax({
          type: "get",
          url: "/user/register",
          data:{
            username: $("#username").val(),
            oldpassword: $("#pwd").val(),
            newpassword: $("#c_pwd").val()
          },
          success: function(result){
            if(result!=null&&result.status==200){
              alert("注册成功！");
              location.href="login.html"
            }else if(result!=null&&result.status==-5){
              alert("两次输入的密码不一样,请重新输入");
            }else if(result!=null&&result.status==-10){
              alert("用户或账号名为空");
            }else if(result!=null&&result.status==-6){
              alert("请重新命名，该用户名已存在");
            }else if(result!=null&&result.status==-1){
              alert("数据库插入信息错误");
            }
          },
          error: function(error){
            alert("前端页面出错")
          }
        });
      }
      else{
        alert("请先阅读并同意《用户注册协议》！")
      }
    }
  </script>

5.测试前端

1.

2. 

3. 

4. 5.

成功！！！