ajax+springboot+mybits實現登入註冊功能
阿新 • • 發佈:2018-12-15
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>