1. 程式人生 > >ajax+springboot+mybits實現登入註冊功能

ajax+springboot+mybits實現登入註冊功能

html程式碼

  使用者名稱:<input type="text" placeholder="使用者名稱” id="form-username">
  密碼:<input type="password" placeholder="密碼" id="form-password">
						  <button onclick="jump()" class="btn" >登入</button>
                            <button onclick="reg()" class="btn" >註冊</button>

前端ajax程式碼

//  註冊
function reg() {
    var username = document.getElementById("form-username").value;   //獲取到前端輸入的使用者名稱
    var password = document.getElementById("form-password").value;	//獲取到前端輸入的密碼
    var obj = {
        username:username,
        password:password,
    }

    $.ajax({
        "url": "loacalhost:8080/reg",    //reg是註冊介面
        type:'POST',
        dataType:'json',
        contentType:'application/json',
        data:JSON.stringify(obj),
        success: function (result) {
            if (result == 1) {
                alert("註冊成功");
            }else if(result == 2){
                alert("密碼不能為空");
            }else if(result == 3){
                alert("賬號不能為空");
            } else {
                alert("使用者名稱已被註冊");
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log('XMLHttpRequest:');
            console.log(XMLHttpRequest);
            alert('網路異常!嘗試重新整理網頁解決問題')
        }


    });
}


//登入
function jump() {
    var username = document.getElementById("form-username").value;
    var password = document.getElementById("form-password").value;
    var obj = {
        username:username,
        password:password,
    }

    $.ajax({
        "url": "localhost:8080/login",        //login是登入介面
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(obj),
        success: function (result) {
            if (result == 1) {
                alert("登入成功");
            } else{
                layer.alert("賬號或密碼不正確");
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log('XMLHttpRequest:');
            console.log(XMLHttpRequest);
            layer.alert('網路異常!嘗試重新整理網頁解決問題')
        }
    });
}

實體類程式碼UserEntity

public class UserEntity {
    private String username;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

controller程式碼

/**
 * 註冊介面
 * @return
 */
@RequestMapping(value = "/reg",method = RequestMethod.POST, headers = "Accept=application/json")
public int reg(@RequestBody UserEntity userEntity){

    int result = 1;

    List<UserEntity> u = Service.findAllUserName();  //獲取所有使用者名稱

    for (int i=0; i < u.size() ; i++){ //遍歷使用者名稱跟獲取到的使用者名稱比較
        if (u.get(i).getUsername().equals(userEntity.getUsername())){
            result = 0;   //使用者名稱已經被註冊
        }
    }
    if (userEntity.getPassword().equals("")) {
        result = 2;    //密碼不能為空
    }else if (userEntity.getUsername().equals("")) {
        result = 3;    //賬號不能為空
    }
    if (result == 1){
        helloService.insertUserPwd(userEntity);
    }
    return result;
}



/**
 * 登入介面
 * @return
 */
@RequestMapping(value = "/login", method = RequestMethod.POST, headers = "Accept=application/json")
public int login(@RequestBody UserEntity userEntity){
    int result;
    //查詢資料庫中已經存在的使用者名稱密碼
    UserEntity u = Service.FindU(userEntity);

    if(userEntity.getUsername()==""||userEntity.getPassword()==""){
        result = 0;   //返回值為0前端提示使用者名稱或者密碼錯誤
    }else if (u==null){
        result = 0;    //使用者名稱不存在
    } else if(userEntity.getPassword().equals(u.getPassword())){   //資料庫中查詢到的密碼跟前端獲取到的對比
        result = 1;     //相等的話返回值1  登入成功
    }else{
        result = 0;
    }

    return result;

}

Service程式碼

    //通過使用者名稱查詢資料庫中已經存在的使用者名稱密碼
    public UserEntity FindU(UserEntity userEntity){
        return userEntityMapper.FindU(userEntity.getUsername());
    }


    //查詢所有使用者名稱
    public List<UserEntity> findAllUserName() {
        return userEntityMapper.findAllUserName();
    }

    //插入使用者名稱密碼
    public int insertUserPwd(UserEntity userEntity) {
        return userEntityMapper.insertUserPwd(userEntity);
    }

userEntityMapper.java

//通過使用者名稱查詢資料庫中已經存在的使用者名稱密碼
    UserEntity FindU(String username);

    //查詢所有使用者名稱
    List<UserEntity> findAllUserName();

//插入使用者名稱密碼
    int insertUserPwd(UserEntity userEntity);

userEntityMapper.xml

    <!--查詢全部資訊-->
    <select id="findAll" resultType="com.talentservice.talentservice.entity.UserEntity">
        select * from info
    </select>

    <!--查詢所有使用者名稱-->
    <select id="findAllUserName" resultType="com.talentservice.talentservice.entity.UserEntity">
        select username from userinfo
    </select>
    
  <!--插入使用者名稱密碼-->
    <insert id="insertUserPwd" parameterType="com.talentservice.talentservice.entity.UserEntity">
        insert into userinfo (username, password )
        values (#{username,jdbcType=VARCHAR},#{password,jdbcType=VARCHAR})
    </insert>