在上一篇博客中，我們講解了注冊頁面的實現。在此基礎上會跳轉到登錄頁面，今天給大家帶來的是使用 SpringBoot，MyBatis，Html，CSS，JavaScript，前后端交互實現一個登錄功能。
目錄
一、效果
二、源碼
2.1 前端
2.2 后端
一、效果
用戶名和密碼欄輸入空或沒有值時，提示錯誤。
在數據庫中有以下信息，任意挑選一條信息進行登錄操作。
輸入用戶 lisi，123 后登陸成功?
跳轉到個人列表。
二、源碼
2.1 前端
前端登陸頁面 html 代碼，login.html:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陸頁面</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css"><script src="js/jquery.min.js"></script>
</head><body><!-- 導航欄 --><div class="nav"><img src="img/touxiang.png" alt=""><span class="title">隨心日記系統</span><!-- 用來占據中間位置 --><span class="spacer"></span><a href="blog_list.html">主頁</a><a href="blog_edit.html">寫日記</a><a href="login.html">注冊</a><!-- <a href="#">注銷</a> --></div><!-- 版心 --><div class="login-container"><!-- 中間的登陸框 --><div class="login-dialog"><h3>登陸</h3><div class="row"><span>用戶名</span><input type="text" id="username"></div><div class="row"><span>密碼</span><input type="password" id="password"></div><div class="row"><button id="submit" onclick="doLogin()">提交</button></div></div></div><script>// 登錄功能function doLogin() {// 1.非空校驗var username = jQuery("#username");var password = jQuery("#password");if(username.val().trim() == "") {alert("請先輸入用戶名!")username.focus();return false;}if(password.val().trim() == "") {alert("請輸入密碼！")password.focus();return false;}// 2.將數據提交到后端jQuery.ajax({url:"/user/login",type:"GET",data:{"username":username.val(),"password":password.val()},success:function(ret) {//3.將結果展示給用戶if (ret.code == 200 && ret.data == 1 ) {alert("登錄成功!");location.href = "myblog_list.html";} else {alert("登錄失敗!"+ret.msg);}}});}</script>
</body></html>登陸頁面的樣式，login.css
.login-container {width: 100%;height: calc(100% - 50px);display: flex;justify-content: center;align-items: center;
}.login-dialog {width: 400px;height: 400px;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}.login-dialog h3 {padding: 50px 0;text-align: center;
}.login-dialog .row {height: 50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span {display: block;width: 100px;font-weight: 700;
}.login-dialog .row input {width: 200px;height: 40px;line-height: 40px;font-size: 24px;border-radius: 10px;border: none;outline: none;text-indent: 10px;
}.login-dialog button {width: 300px;height: 50px;color: white;background-color: green;border: none;border-radius: 10px;
}.login-dialog button:active {background-color: #666;
}公共樣式（注冊或登錄頁面），common.css:
* {margin: 0;padding: 0;box-sizing: border-box;
}/* 設置整體頁面高度 */
html, body {height: 100%;background-image: url(../img/cat2.png);background-position: center center;background-size: cover;background-repeat: no-repeat;
}/* 上方導航欄 */
.nav {width: 100%;height: 50px;background-color: rgba(51, 51, 51, 0.4);color: #fff;display: flex;justify-content: left;align-items: center;
}/* 導航欄中的圖標 */
.nav img {width: 40px;height: 40px;margin-left: 30px;margin-right: 10px;border-radius: 50%;
}/* 導航欄中的占位器 */
.nav .spacer {width: 70%;
}/* 導航欄中的按鈕 */
.nav a {color: #fff;text-decoration: none;padding: 0 10px;
}/* 頁面內容容器, 版心 */
.container {/* 使用 calc 計算高度 */height: calc(100% - 50px);/* 設置版心寬度 */width: 1000px;/* 水平居中 */margin: 0 auto;/* 使用彈性布局 */display: flex;justify-content: space-between;align-items: center;
}/* 左側部分, 用來放置用戶信息 */
.container-left {height: 100%;width: 200px;
}/* 右側部分, 用來放置正文 */
.container-right {height: 100%;/* 和左側部分中間留出 5px 間隙 */width: 795px;/* 如果內容溢出就自動加上滾動條 */overflow: auto;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}/* 展示用戶信息的卡片 */
.card {background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;padding: 30px;
}/* 用戶頭像 */
.card img {width: 140px;height: 140px;border-radius: 50%;
}/* 用戶名 */
.card h3 {text-align: center;padding: 10px;
}/* 用戶 github 鏈接 */
.card a {display: block;text-align: center;color: #999;text-decoration: none;padding: 10px;
}/* 展示文章數目的面板 */
.card .counter {padding: 5px;display: flex;justify-content: space-around;
}2.2 后端
統一返回格式,ResultAjax 類：
/*** 統一的返回格式*/
@Data
public class ResultAjax {private int code;private String msg;private Object data;// 成功public static ResultAjax success(Object data) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(200);resultAjax.setMsg("");resultAjax.setData(data);return resultAjax;}public static ResultAjax success(int code, String msg, Object data) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(code);resultAjax.setMsg(msg);resultAjax.setData(data);return resultAjax;}// 失敗public static ResultAjax fail(int code, String msg) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(code);resultAjax.setMsg(msg);return resultAjax;}public static ResultAjax fail(int code, String msg, Object data) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(code);resultAjax.setMsg(msg);resultAjax.setData(data);return resultAjax;}
}UserMapper 接口：
@Mapper
public interface UserMapper {//登錄功能@Select("select * from userinfo where username=#{username}")Userinfo getUserinfoByName(@Param("username") String username);
}
UserService 類：
@Service
public class UserService {//注冊接口注入進來@Autowiredprivate UserMapper userMapper;//登錄功能public Userinfo getUserByName(String username) {return userMapper.getUserinfoByName(username);}
}UserControler 類：
@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService; /*** 登錄接口* @param userinfoVO* @return*/@RequestMapping("/login")public ResultAjax login(UserinfoVO userinfoVO, HttpServletRequest request) {// 1.參數校驗if (userinfoVO == null || !StringUtils.hasLength(userinfoVO.getUsername())|| !StringUtils.hasLength(userinfoVO.getPassword())) {// 非法登錄return ResultAjax.fail(-1,"非法登錄!");}// 2.根據用戶名查詢對象，判斷用戶名是否錯誤Userinfo userinfo = userService.getUserByName(userinfoVO.getUsername());if (userinfo == null && userinfo.getId() == 0) {return ResultAjax.fail(-2,"賬號或密碼錯誤!");}// 3.使用對象中的密碼和輸入的密碼進行對比，判斷密碼是否錯誤if (!userinfoVO.getPassword().equals(userinfo.getPassword())) {return ResultAjax.fail(-2,"賬號或密碼錯誤!");}// 4.成功后將對象存儲到 session 中HttpSession session = request.getSession();session.setAttribute(ApplicationVariable.SESSION_USERINFO_KEY,userinfo);// 5.結果返回給用戶return ResultAjax.success(1);}
}上述為整個登錄功能的核心代碼，其中需要注意的是前端需自行映入 jQuery 依賴、在 application.properties 文件中連接數據庫、創建對應的數據庫。連接數據庫，數據庫的創建代碼在上篇博客中已講解。
本篇博客到這里就結束了，感謝各位的觀看。
