前端

2023-09-18 11:21:50 +08:00
parent 8038f02f30
commit 85e41f3ef9
31 changed files with 1802 additions and 30 deletions
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="author" content="flykhan" />
+    <meta name="keywords" content="c c++ 物联网" />
+    <title>登录界面</title>
+  </head>
+
+  <body>
+    <form onsubmit="return login(this);">
+      <div>
+        <label>用户名</label>
+        <input name="name" />
+      </div>
+      <div>
+        <label>口&nbsp;&nbsp;&nbsp;令</label>
+        <input name="pwd" type="password" />
+      </div>
+      <div>
+        <button>登录</button>
+      </div>
+    </form>
+
+    <script>
+      function login(form) {
+        // 创建了 js 对象，只包含属性的对象即为 json 对象
+        let login_data = {
+          // 对象的属性和属性值定义
+          name: form.name.value.trim(),
+          pwd: form.pwd.value.trim(),
+        };
+
+        fetch("/cgi-bin/login.cgi", {
+          method: "POST", // 请求方法
+          // 将 login_data 对象转为 JSON 字符串
+          body: JSON.stringify(login_data), // 请求体
+          headers: {
+            "Content-Type": "application/json", // 请求头
+          },
+        })
+          .then((resp) => resp.json())
+          .then((data) => {
+            console.log(data);
+            // 判断是否登录成功，成功是打开 css3.html 页面
+            if (data.code == 0) {
+              // 浏览器存储登录成功后的用户信息
+              localStorage.setItem("login_user", JSON.stringify(data.data));
+              open("index.html", "_self");
+            } else {
+              // 如果失败，则弹出对话框，显示登录失败消息
+              alert(data.msg);
+            }
+          });
+
+        return false;
+      }
+    </script>
+  </body>
+</html>