• 【JavaWeb】登录页面记住密码,账号或密码错误

     ✨✨个人主页:沫洺的主页

    📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                               📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

                               📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏     

    💖💖如果文章对你有所帮助请留下三连✨✨

    🌈登录页面优化

    🎨代码优化

    使用Java Web 三层架构模式（Web+Service +Dao/Mapper）优化代码框架

    具体优化:

    • 📌遵循三层架构的分层思想模式,目的是为了“高内聚低耦合”
    • 📌Web表现层主要是指与用户交互的界面。用于接收用户输入的数据和显示处理后用户需要的数据
    • 📌Service业务逻辑层是通过数据访问层拿到存在数据库里的原始数据，然后再对数据进行逻辑上的处理，比如说验证。
    • 📌Dao数据访问层的代码都是对数据库数据的“增删改查”，将存储在数据库中的数据提交给业务层，同时将业务层处理的数据保存到数据库。
    • 📌util包: 对MyBatis获取工厂进行工具封装到util包下,方便开发,提高代码复用性
    • 📌对前端代码进行调整, 通过jsp对el表达式进行展示,与Web层结合实现具体功能

    🎨Web层

    🔎LoginServlet

    1. package com.moming.web;
    2.  
    3. import com.moming.pojo.User;
    4. import com.moming.service.UserService;
    5.  
    6. import javax.servlet.*;
    7. import javax.servlet.http.*;
    8. import javax.servlet.annotation.*;
    9. import java.io.IOException;
    10. import java.net.URLEncoder;
    11.  
    12. @WebServlet("/loginServlet")
    13. public class LoginServlet extends HttpServlet {
    14.     UserService userService= new UserService();
    15.     @Override
    16.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    17.         request.setCharacterEncoding("utf-8");
    18.         //1.接收用户信息
    19.         String username = request.getParameter("username");
    20.         String password = request.getParameter("password");
    21.         //获取复选框数据
    22.         String remeber = request.getParameter("remeber");
    23.         //调用service层获取结果
    24.         User user = userService.login(username, password);
    25.         response.setContentType("text/html;charset=utf-8");
    26.         if(user!=null){
    27.             //判断用户是否勾选记住密码
    28.             //创建cookie对象
    29.             //Cookie c_username = new Cookie("username", username);
    30.             //URLEncoder.encode(username,"utf-8")解决账号是中文乱码
    31.             Cookie c_username = new Cookie("username", URLEncoder.encode(username,"utf-8"));
    32.             Cookie c_password = new Cookie("password", password);
    33.             //访问此路径下的都带cookie
    34.             c_username.setPath("/moming");
    35.             c_password.setPath("/moming");
    36.             if("1".equals(remeber)){
    37.                 //设置cookie存活时间一天
    38.                 c_username.setMaxAge(60*60*24);
    39.                 c_password.setMaxAge(60*60*24);
    40.             }else {
    41.                 //销毁cookie
    42.                 c_username.setMaxAge(0);
    43.                 c_password.setMaxAge(0);
    44.             }
    45.             //发送cookie
    46.             response.addCookie(c_username);
    47.             response.addCookie(c_password);
    48.             //将登录成功的user对象存储到session中
    49.             HttpSession session = request.getSession();
    50.             session.setAttribute("user",user);
    51.             //存在,登录成功,跳转Servlet
    52.             String contextPath = request.getContextPath();
    53.             //重定向
    54.             response.sendRedirect(contextPath+"/successServlet");
    55.         }else {
    56.             //不存在,登录失败,跳转的登录页面
    57.             request.setAttribute("msg", "用户名或密码错误");
    58.             //转发
    59.             request.getRequestDispatcher("/login.jsp").forward(request,response);
    60.         }
    61.     }
    62.     @Override
    63.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    64.         doGet(request, response);
    65.     }
    66. }

    🔎SuccessServlet

    1. package com.moming.web;
    2.  
    3. import com.moming.pojo.User;
    4.  
    5. import javax.servlet.*;
    6. import javax.servlet.http.*;
    7. import javax.servlet.annotation.*;
    8. import java.io.IOException;
    9.  
    10. @WebServlet("/successServlet")
    11. public class SuccessServlet extends HttpServlet {
    12.     @Override
    13.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    14.         HttpSession session = request.getSession();
    15.         //获取session数据
    16.         User user =(User) session.getAttribute("user");
    17.         request.setAttribute("msg", "登录成功,欢迎"+user.getUsername());
    18.         request.getRequestDispatcher("/success.jsp").forward(request,response);
    19.     }
    20.  
    21.     @Override
    22.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    23.         doGet(request, response);
    24.     }
    25. }

    🎨Service层

    🔎UserService

    1. package com.moming.service;
    2.  
    3. import com.moming.mapper.UserMapper;
    4. import com.moming.pojo.User;
    5. import com.moming.util.SqlSessionFactoryUtils;
    6. import org.apache.ibatis.session.SqlSession;
    7. import org.apache.ibatis.session.SqlSessionFactory;
    8.  
    9. public class UserService {
    10.     //通过工具类获取工厂对象
    11.     SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();
    12.     public User login(String username,String password){
    13.         //获取sqlSession
    14.         SqlSession sqlSession = sqlSessionFactory.openSession();
    15.         //获取mapper
    16.         UserMapper mapper = sqlSession.getMapper(UserMapper.class);
    17.         //调用dao层
    18.         User user = mapper.selectUser(username, password);
    19.         sqlSession.close();
    20.         return user;
    21.     }
    22. }

    🎨util工具包

    🔎SqlSessionFactoryUtils

    1. package com.moming.util;
    2.  
    3. import org.apache.ibatis.io.Resources;
    4. import org.apache.ibatis.session.SqlSessionFactory;
    5. import org.apache.ibatis.session.SqlSessionFactoryBuilder;
    6.  
    7. import java.io.IOException;
    8. import java.io.InputStream;
    9.  
    10. public class SqlSessionFactoryUtils {
    11.     //构造方法私有
    12.     private SqlSessionFactoryUtils() {
    13.     }
    14.  
    15.     private static SqlSessionFactory sqlSessionFactory;
    16.  
    17.     static {
    18.         try {
    19.             //1.加载mybatis的核心配置文件,获取SqlSessionFactory
    20.             //定义配置文件的路径
    21.             String resource = "mybatis-config.xml";
    22.             //资源加载返回字节输入流
    23.             InputStream inputStream = Resources.getResourceAsStream(resource);
    24.             //获取工厂
    25.             sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
    26.         } catch (IOException e) {
    27.             e.printStackTrace();
    28.         }
    29.     }
    30.  
    31.     public static SqlSessionFactory getSqlSessionFactory() {
    32.         return sqlSessionFactory;
    33.     }
    34. }

    🎨前端代码

    🔎login.css

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4. }
    5.  
    6. html {
    7.     height: 100%;
    8.     width: 100%;
    9.     overflow: hidden;
    10.     margin: 0;
    11.     padding: 0;
    12.     background: url(../imgs/img.png) no-repeat 0px 0px;
    13.     background-repeat: no-repeat;
    14.     background-size: 100% 100%;
    15.     -moz-background-size: 100% 100%;
    16. }
    17.  
    18. body {
    19.     display: flex;
    20.     align-items: center;
    21.     justify-content: center;
    22.     height: 100%;
    23. }
    24.  
    25. #loginDiv {
    26.     width: 37%;
    27.     display: flex;
    28.     justify-content: center;
    29.     align-items: center;
    30.     height: 300px;
    31.     background-color: rgba(255, 255, 255, 0.27);
    32.     box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    33.     border-radius: 5px;
    34. }
    35.  
    36. p {
    37.     margin-top: 20px;
    38.     margin-left: 20px;
    39. }
    40.  
    41. #username{
    42.     margin-left: 15px;
    43.     border-radius: 5px;
    44.     border-style: hidden;
    45.     height: 30px;
    46.     width: 140px;
    47.     outline: none;
    48.     padding-left: 10px;
    49. }
    50. #password{
    51.     margin-left: 15px;
    52.     border-radius: 5px;
    53.     border-style: hidden;
    54.     height: 30px;
    55.     width: 140px;
    56.     outline: none;
    57.     padding-left: 10px;
    58. }
    59. #remeber{
    60.     margin-left: 15px;
    61.     border-radius: 5px;
    62.     border-style: hidden;
    63.     height: 15px;
    64.     width: 40px;
    65.     outline: none;
    66.     padding-left: 10px;
    67. }
    68. #username{
    69.     width: 200px;
    70. }
    71. #password{
    72.     width: 202px;
    73. }
    74. .button {
    75.     border-color: cornsilk;
    76.     background-color: #5a88c8;
    77.     color: aliceblue;
    78.     border-style: hidden;
    79.     border-radius: 5px;
    80.     width: 100px;
    81.     height: 31px;
    82.     font-size: 16px;
    83. }
    84.  
    85. #subDiv {
    86.     text-align: center;
    87.     margin-top: 30px;
    88. }
    89. #loginMsg{
    90.     text-align: center;
    91.     color: black;
    92. }
    93. #errorMsg{
    94.     text-align: center;
    95.     color:red;
    96. }

    🔎login.jsp

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. html>
    3. <html lang="en">
    4.  
    5. <head>
    6.     <meta charset="UTF-8">
    7.     <title>登录title>
    8.     <link href="css/login.css" rel="stylesheet">
    9. head>
    10.  
    11. <body>
    12. <div id="loginDiv">
    13.     <form action="/moming/loginServlet" method="post" id="form">
    14.         <h1 id="loginMsg">登录页面h1>
    15.         <div id="errorMsg">${msg}div>
    16.         <p>账号:<input id="username" name="username"  type="text">p>
    17.         <p>密码:<input id="password" name="password" value="${cookie.password.value}" type="password">p>
    18.         <p>记住密码:<input id="remeber" name="remeber" value="1" ${cookie.username.value!=null?'checked':''} type="checkbox">p>
    19.         <div id="subDiv">
    20.             <input type="submit" class="button" value="登录">
    21.             <a href="register.html">没有账号？点击注册a>
    22.         div>
    23.     form>
    24. div>
    25. <script>
    26.     let v = decodeURI('${cookie.username.value}');
    27.     document.getElementById("username").value=v;
    28. script>
    29. body>
    30. html>

    🔎success.jsp

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. <head>
    4.     <title>Titletitle>
    5. head>
    6. <body>
    7. <h1>${msg}h1>
    8. body>
    9. html>

    💦总结说明

    对于登录页面的优化有一个注意点就是将原来的login.html改为了login.jsp页面,目的是为了支持el表达式,通过优化代码了解JavaWeb三层架构模式,同时了解Cookie和Session的区别与使用方式,实现记住密码和页面数据共享,还有就是重定向和转发的使用,下一步就是对注册页面的优化

  • 相关阅读:
    【计算机网络】B类IP地址
    2023年全球及中国运动休闲服饰发展趋势分析：互联网经营将成为行业趋势[图]
    L1-009 N个数求和分数 20
    Python问题1：ModuleNotFoundError: No module named ‘numpy‘
    初识网络原理
    Vue 的动态菜单表格数据展示以及分页查询实现
    C#根据任意不重复的数组产生一个连续的新数组且最短，其中新数组最大数和者最大数+1不在该任意数组中
    C语言 宏定义使用方式
    掉瓶子小游戏
    linux设备树节点添加新的复位属性之后设备驱动加载异常问题分析
  • 原文地址：https://blog.csdn.net/HeyVIrBbox/article/details/126805519