0.前端知識儲備?
Ajax請求中的async:false/true的作用 - front-gl - 博客園 (cnblogs.com)
01.前端頁面展示?
02.后端代碼
2.1?CONTROLLER
@RequestMapping("/login")public Result login(String username, String password, HttpSession httpSession){User user= userMapper.selectByUsername(username);if(!StringUtils.hasLength(username)||!StringUtils.hasLength(password)){return Result.fail(Constant.PASSWORD_OR_NULL,"密碼或賬號為空");}else if(user==null){return Result.fail(Constant.MESSAGE_NULL,"用戶信息為空");}else if(!bCryptPasswordEncoder.matches(password,user.getPassword())){return Result.fail(Constant.PASSWORD_WRONG,"賬號或密碼錯誤");}user.setPassword("");httpSession.setAttribute(Constant.USERINFO_SESSION_KEY,user);return Result.success(user);}2.2 后端測試
成功！！！
03.前端代碼
3.1 login.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登錄界面</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css"></head><body><!-- 導航欄 --><div class="nav">網頁聊天</div><div class="container"><h1>用戶登錄</h1><form><br><label for="username">用戶名</label><br><input type="text" name="username" id="username" class="input"><br><label for="pwd">密碼</label><br><input type="password" name="" id="password" class="input"><button type="submit" class="submit" id="submit" onclick="login()">開始登錄</button><br><a href="client.html" class="left">返回首頁</a><a href="register.html" class="right">注冊賬號</a></form></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript" src="js/login.js"></script></body>
</html>3.2 login.js
function login(){$.ajax({type: "get",url: "/user/login",contentType: "application/json",dataType: "json",async: false,cache: false,// 使用同步操作timeout: 50000, //超時時間：50秒data: {"username": $("#username").val(),"password": $("#password").val()},success: function(result){if(result!=null&&result.status==200){alert("登陸成功！開始進行聊天吧")location.href="client.html"}else if(result!=null&&result.status==-12){alert("密碼或賬號為空")}else if(result!=null&&result.status==-14){alert("用戶信息為空,請進行注冊哦")}else if(result!=null&&result.status==-16){alert("賬號或密碼錯誤")}else{alert("出現內部錯誤，請聯系管理員！")}},error: function () {alert("接口錯誤"); // 返回失敗}});}3.3 login.css
body{background: url("../img/coolgirl.jpg");background-size:100% 100%;background-attachment: fixed;
}
h1{color: #FFF;text-align: center;
}
.container{margin: 100px auto;width: 30%;
}
form{background: #FFF;height: 300px;width: 100%;border-radius: 10px;position: relative;
}
label{color: #000;font-weight: bold;font-size: 20px;margin-left: 40px;
}
input{text-align: left;margin: 10px;
}
.input{width: 80%;height: 35px;margin-left: 40px;
}
.checkbox{margin-left: 30px;
}
a{text-decoration: none;font-weight: bold;
}
.submit{display: inline-block;margin-top: 0;margin-left:160px;background: black;border: none;color: #FFF;height: 35px;width: 100px;text-align: center;font-weight: bold;border-radius: 5px;
}
.submit:active {background-color: #666;
}
.left{margin: 20px;
}
.right{position: absolute;right: 20px;
}3.4 前端測試
但是有一個問題，無法實現跳轉
最后發現是由于前端界面寫的form表單導致的
我們在寫前端時，盡量避免運用form表單
(比亞迪))
![[力扣題解] 130. 被圍繞的區域](http://pic.xiahunao.cn/[力扣題解] 130. 被圍繞的區域)
