index.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>用户登录</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. height: 100vh;
  14. background-color: #f0f0f0;
  15. margin: 0;
  16. }
  17. .login-container {
  18. background-color: white;
  19. padding: 30px;
  20. border-radius: 10px;
  21. box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  22. text-align: center;
  23. width: 350px;
  24. }
  25. .login-container h1 {
  26. margin-bottom: 20px;
  27. font-size: 24px;
  28. }
  29. .login-container input[type="text"], .login-container input[type="password"] {
  30. width: 100%;
  31. padding-top: 15px;
  32. padding-bottom: 15px;
  33. margin-bottom: 20px;
  34. border: 1px solid #ccc;
  35. border-radius: 5px;
  36. }
  37. .login-container button {
  38. width: 100%;
  39. padding: 15px;
  40. background-color: #007BFF;
  41. border: none;
  42. border-radius: 5px;
  43. color: white;
  44. font-size: 16px;
  45. cursor: pointer;
  46. }
  47. .login-container button:hover {
  48. background-color: #0056b3;
  49. }
  50. .error-message {
  51. color: red;
  52. margin-top: 10px;
  53. }
  54. </style>
  55. <script src="/js/jquery-3.4.1.min.js"></script>
  56. <script>
  57. var token = ""
  58. function login() {
  59. const username = $('#username').val();
  60. const password = $('#password').val();
  61. if (!username || !password) {
  62. alert('请输入用户名和密码');
  63. return;
  64. }
  65. $.ajax({
  66. url: '/api/user.lua?action=login',
  67. type: 'POST',
  68. contentType: 'application/json',
  69. data: JSON.stringify({ username: username, password: password }),
  70. success: function(response) {
  71. if (response.code === 200) {
  72. token = response.data.token;
  73. fetchUserInfo();
  74. } else {
  75. $('#errorMessage').text(response.msg || '登录失败,请重试');
  76. }
  77. }
  78. });
  79. }
  80. function fetchUserInfo() {
  81. $.ajax({
  82. url: '/api/user.lua?action=getinfo',
  83. type: 'GET',
  84. headers:{
  85. "token":token
  86. },
  87. success: function(response) {
  88. if (response.code === 200) {
  89. const userInfo = response.data;
  90. alert(`用户信息:\n登录时间: ${userInfo.login_time}`);
  91. } else {
  92. alert('获取用户信息失败,请重试');
  93. }
  94. },
  95. error: function() {
  96. alert('获取用户信息失败,请重试');
  97. }
  98. });
  99. }
  100. </script>
  101. </head>
  102. <body>
  103. <div class="login-container">
  104. <h1>用户登录</h1>
  105. <input type="text" id="username" placeholder="请输入用户名">
  106. <input type="password" id="password" placeholder="请输入密码">
  107. <button onclick="login()">确认</button>
  108. <div id="errorMessage" class="error-message"></div>
  109. </div>
  110. </body>
  111. </html>