Update log_in.html

log_in.html

@@ -31,20 +31,51 @@
     <div style="width: device-width; height: 832px; position: relative; background: linear-gradient(90deg, #E7642A 0%, #E1BCE9 50%, #152DA9 100%)">
         <div style="width: 710px; height: 446px; left: 431px; top: 193px; position: absolute; background: rgba(217, 217, 217, 0.10); box-shadow: -38.53333282470703px 38.53333282470703px 38.53333282470703px rgba(255, 255, 255, 0.10) inset; border: 1px rgba(249, 249, 249, 0.51) solid; backdrop-filter: blur(77.07px)"></div>
         <div style="width: 65px; height: 38px; left: 852px; top: 227px; position: absolute; color: #001AFF; font-size: 32px; font-family: Inter; font-weight: 700; word-wrap: break-word">登录</div>
-        <div class="login-button" style="width: 282px; height: 56px; left: 744px; top: 439px; position: absolute;" onclick="redirectToPage()">
+        <a href="javascript:void(0);" class="sign-up-link" style="width: auto; height: auto; left: 975px; top: 565px; position: absolute;" onclick="redirectToSignUp()">注册新用户</a>
-            <div style="width: 282px; height: 56px; left: 0px; top: 0px; position: absolute; background: linear-gradient(180deg, #152DA9 0%, #E7642A 100%); border-radius: 71px"></div>
+          <form id="login-form">
-            <div style="left: 120px; top: 16px; position: absolute; color: #FAFAF9; font-size: 20px; font-family: Inter; font-weight: 500; word-wrap: break-word">登录</div>
+            <div style="width: 173px; height: 35px; left: 749px; top: 364px; position: absolute">
-          </div>
+                <label for="password">密码:</label>
-          <a href="javascript:void(0);" class="sign-up-link" style="width: auto; height: auto; left: 975px; top: 565px; position: absolute;" onclick="redirectToSignUp()">注册新用户</a>
+                <input type="password" id="password" name="password" required><br><br>
-          <div style="width: 173px; height: 35px; left: 749px; top: 364px; position: absolute">
+            </div>
-          <label for="password">密码:</label>
+            <div style="width: 173px; height: 35px; left: 749px; top: 294px; position: absolute">
-          <input type="password" id="password" name="password">
+                <label for="username">用户名:</label>
-        </div>
+                <input type="text" id="username" name="username" required><br><br>
-        <div style="width: 173px; height: 35px; left: 749px; top: 294px; position: absolute">
+            </div>
-          <label for="username">用户名:</label>
+            <button type="submit" style="width: 282px; height: 56px; left: 744px; top: 439px; position: absolute;" onclick="redirectToPage()">
-          <input type="text" id="username" name="username">
+              <div style="width: 282px; height: 56px; left: 0px; top: 0px; position: absolute; background: linear-gradient(180deg, #152DA9 0%, #E7642A 100%)"></div>
-        </div>
+              <div style="left: 120px; top: 16px; position: absolute; color: #FAFAF9; font-size: 20px; font-family: Inter; font-weight: 500; word-wrap: break-word">登录</div>
+            </button>
+          </form>
         <img style="width: 499px; height: 594px; left: 203px; top: 119px; position: absolute; border-radius: 40px" src="E:\softwareengineer\work2\frontend\assets\d2.png" />
-      </div>
+    </div>
+    <script>
+        document.getElementById('login-form').addEventListener('submit', function(event) {
+            event.preventDefault(); // 阻止表单默认提交行为
+
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            const logindata = {
+                username:username,
+                password:password
+            };
+
+            fetch('/login', {
+                method: 'POST', // 或者 'PUT', 'PATCH' 等
+                headers: {
+                    'Content-Type': 'application/json' // 发送JSON数据
+                },
+                body: JSON.stringify(logindata) // 将JavaScript对象转换为JSON字符串
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                alert('Login successfully!');
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+                alert('Error Logging in');
+            });
+        });
+    </script>
 </body>
 </html>