在上一篇博客中，我们讲解了注册页面的实现。在此基础上会跳转到登录页面，今天给大家带来的是使用 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 文件中连接数据库、创建对应的数据库。连接数据库，数据库的创建代码在上篇博客中已讲解。
本篇博客到这里就结束了，感谢各位的观看。
