• 简洁版用户登录系统

    前端页面：

    用户登录首页：

    1. <!doctype html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport"
    7.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    9.     <title>用户登录首页</title>
    10. </head>
    11.  
    12. <body>
    13.     登录人: <span id="loginUser"></span>
    14.  
    15.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    16.     <script>
    17.         
    18.     </script>
    19. </body>
    20.  
    21. </html>

    登录页面：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <title>登录页面</title>
    7. </head>
    8.  
    9. <body>
    10.   <h1>用户登录</h1>
    11.   用户名：<input name="userName" type="text" id="userName"><br>
    12.   密码：<input name="password" type="password" id="password"><br>
    13.   <input type="button" value="登录" onclick="login()">
    14.   
    15.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    16.   <script>
    17.     function login() {
    18.     
    19.     }
    20.  
    21.   </script>
    22. </body>
    23.  
    24. </html>

    后端代码：

    1.  
    2. @RestController
    3. @RequestMapping("/user")
    4. public class UserController {
    5.  
    6.     @RequestMapping("/login")
    7.     public boolean login(String userName, String password , HttpSession session){
    8.  
    9.         if (userName==null || userName.length()==0 || password==null || password.length()==0){
    10.             return false;
    11.         }
    12.         if ("admin".equals(userName) && "admin".equals(password)){
    13.             //设置session
    14.             session.setAttribute("username","admin");
    15.             return true;
    16.         }
    17.         return false;
    18.  
    19.     }
    20.  
    21.     @RequestMapping("/getUserInfo")
    22.     public String getUserInfo(HttpServletRequest request){
    23.         //从session获取登录用户
    24.         HttpSession session = request.getSession(false);
    25.         String userName=null;
    26.         if (session !=null){
    27.             userName = (String)session.getAttribute("username");
    28.         }
    29.         return "当前登录用户:"+userName;
    30.     }
    31. }
    32.  
    33.

    前端代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>登录页面</title>
    7. </head>
    8.  
    9. <body>
    10. <h1>用户登录</h1>
    11. 用户名：<input name="userName" type="text" id="userName"><br>
    12. 密码：<input name="password" type="password" id="password"><br>
    13. <input type="button" value="登录" onclick="login()">
    14.  
    15. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    16. <script>
    17.     function login() {
    18.       console.log("登录")
    19.       $.ajax({
    20.         url:"user/login",
    21.         type:"post",
    22.         data:{
    23.           "userName":$("#userName").val(),
    24.           "password":$("#password").val()
    25.         },
    26.  
    27.         success:function(result){
    28.           if(result){
    29.             location.href="/index.html";
    30.             //location.assign();
    31.           }else{
    32.             alert("密码错误！");
    33.           }
    34.         }
    35.       });
    36.     }
    37.  
    38.   </script>
    39. </body>
    40.  
    41. </html>
    1.  
    2. <!doctype html>
    3. <html lang="en">
    4.  
    5. <head>
    6.     <meta charset="UTF-8">
    7.     <meta name="viewport"
    8.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    10.     <title>用户登录首页</title>
    11. </head>
    12.  
    13. <body>
    14. 登录人: <span id="loginUser"></span>
    15.  
    16. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    17. <script>
    18.     //页面加载时，就去调用后端请求
    19.     $.ajax({
    20.         url:"/user/getUserInfo",
    21.         type:"get",
    22.         success:function(username){
    23.             $("#loginUser").text(username);
    24.         }
    25.     });
    26.  
    27. </script>
    28. </body>
    29.  
    30. </html>

    成果展示：

    简洁版用户登录

  • 相关阅读:
    动态规划模型：0-1背包问题
    java中，通过替换word模板中的关键字后输出一个新文档
    Docker 安装及常用命令
    C#实现线性查找算法
    springboot微服务学习（一）MyBatis-plus梳理
    生成元 rust解法
    firewalld防火墙基础
    Java教程：只会懒汉式和饿汉式，那你还不算真的懂单例模式
    WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
    java ssh校园拼餐系统
  • 原文地址：https://blog.csdn.net/weixin_64308540/article/details/136372798