登录框功能实现

参考文章：https://blog.csdn.net/qq_43711438/article/details/116108081
参考视频：https://www.bilibili.com/video/BV18f4y1D72h?p=2&share_source=copy_web
（ps：目前网上很多文章对小白很不友好，虽然从外网上找了个很成熟的项目搭建成功了，但还是找个简单的视频好好学学，稍安勿躁）

基础模型设置

image.png

分析

  1. 1、创建数据库，设计关键字段
  3. 2、前台页面
  4. 登录页面 login.jsp
  5.     用户登录 JS校验
  6.     登录表单验证
  7.     1、给登录按钮绑定点击事件
  8.     2、获取用户的用户名和密码的值
  9.     3、如果用户名字为空，提示用户（span标签赋值），并且return
  10.     4、如果密码名字为空，提示用户（span标签赋值），并且return
  11.     5、如果都不为空，则手动提交表单
  13. 首页（登录后的页面） index.jsp
  15. 3、后台实现
  16. 登录功能
  17.     1、接收客户端的请求（接收参数：姓名，密码）
  18.     2、参数的非空判断，不要相信前端的判断
  19.         如果参数非空，通过消息模型对象返回数据，返回结果（设置状态，设置提示信息、回显数据）
  20.         将消息模型对象设置到request作用域中，请求转发跳转到登录页面return
  21.     3、通过用户名查询用户对象（通过用户名查询用户）
  22.     4、判断用户名是否为空
  23.         如果为空，通过消息模型对象返回数据，返回结果（设置状态，设置提示信息、回显数据）
  24.             将消息模型对象设置到request作用域中，请求转发跳转到登录页面return
  25.     5、如果用户名存在，则将数据库中查询的用户密码与前台传递的密码作比较
  26.         如果不相等，通过消息模型对象返回数据，返回结果（设置状态，设置提示信息、回显数据）
  27.             将消息模型对象设置到request作用域中，请求转发跳转到登录页面return
  28.         如果相等，表示登录成功
  29.             将用户信息设置到session的作用域中
  30.             请求转发到登录页面（或者重定向到登录页面中）
  34.     controller层（请求转发，响应结果）
  35.         1、接受客户的请求（接收参数：姓名、密码）
  36.         2、调用service层方法，返回消息模型对象
  37.         3、判断消息模型状态码
  38.             如果状态码失败
  39.                 将消息模型设置到request作用域中，然后请求转发挑战到登录界面
  40.             如果状态码成功
  41.                 将消息模型中的用户信息设置到session作用域中，然后重定向跳转到index.jsp
  43.     service层（业务逻辑）
  44.         1、参数的非空判断
  45.             如果参数为空
  46.                 将状态码，提示信息，回显数据设置到消息模型回显对象中，return消息模型对象
  47.         2、调用dao层的查询方法，通过用户名查询用户对象
  48.         3、判断用户对象是否为空
  49.             如果用户对象为空
  50.                 将状态码，提示信息，回显数据设置到消息模型回显对象中，return消息模型对象
  51.         4、判断数据库中查询的用户密码与前台查询的密码做比较
  52.             如果不相等，将状态码，提示信息，回显数据设置到消息模型回显对象中，return消息模型对象
  53.         5、登录成功，成功状态，提示信息，用户对象信息设置消息模型对象，并return
  55.     mapper（dao层）
  56.         定义对应的接口
  60. 分层思想：
  61.     controller层
  62.         接受请求
  63.         （调用service层，返回结果）
  64.         响应结果
  65.     service层
  66.         业务逻辑判断
  67.     mapper（dao）层
  68.         接口类
  69.         mapper.xml，mybatis与数据库相关的操作
  70.     entity（po，model）
  71.         JavaBean实体
  72.     util
  73.         工具类（通用的类/方法）
  74.     test
  75.         测试类/方法

具体代码

目录

login.jsp

  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: 15655
  4.   Date: 2022/2/17
  5.   Time: 15:25
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11.     <title>用户登录</title>
  12. </head>
  13. <body>
  14. <div style="text-align: center">
  15. <form action="/login" method="post" id="loginForm">
  16.     姓名:<input type="text" name="uname" id="uname"> <br>
  17.     密码:<input type="password" name="upwd" id="upwd"> <br>
  18.     <span id="msg" style="font-size: 12px;color:red"></span><br>
  19.     <button type="button" id="loginBtn">登录</button>
  20.     <button type="button">注册</button>
  21. </form>
  22. </div>
  23. </body>
  25. <%--引入jquery的js文件--%>
  26. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
  27. <script type="text/javascript">
  28.     /* 1、给登录按钮绑定点击事件（通过id选择器绑定）
  29.     // 2、获取用户的用户名和密码的值
  30.     // 3、如果用户名字为空，提示用户（span标签赋值），并且return
  31.     // 4、如果密码名字为空，提示用户（span标签赋值），并且return
  32.     // 5、如果都不为空，则手动提交表单*/
  34.     $("#loginBtn").click(function (){
  35.         var uname = $("#uname").val();
  36.         var upwd = $("#upwd").val();
  38.         if(isEmpty(uname) || isEmpty(upwd)){
  39.             $("#msg").html("用户名或密码不能为空！");
  40.             return;
  41.         }
  42.         $("#loginForm").submit();
  43.     });
  45.     function isEmpty(str){
  46.         if (str == null || str.trim() == ""){
  47.             return true;
  48.         }
  49.         else {
  50.             return false;
  51.         }
  52.     }
  53. </script>
  54. </html>