Home Explore Help
Sign In
tianyunperfect
/
web-base--
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge remote-tracking branch 'origin/master'

tianyun 2 years ago
parent
e380850898 9c1c15857d
commit
c503332c45
2 changed files with 70 additions and 17 deletions
Split View Show Diff Stats
  1. 19 8
      simple-demo/js/util.js
  2. 51 9
      tmp/test.html

+ 19 - 8
simple-demo/js/util.js
View File 

@@ -59,7 +59,7 @@ axios.interceptors.response.use(function (response) {
 
  * @type {{async: (function(*, *, *, *): Promise<unknown>), xhr_send: request.xhr_send, sync: (function(*, *, *, *): any)}}
 
  */
 
 const requestUtil = {
 
-    xhr_send: function (xhr, method, headers, data) {
 
+    xhr_send(xhr, method, headers, data) {
 
         if (headers) {
 
             for (const key in headers) {
 
                 xhr.setRequestHeader(key, headers[key]);
 
@@ -67,8 +67,8 @@ const requestUtil = {
 
         }
 
 
         if (method.match(/^(POST|PUT)$/i)) {
 
-            if (!headers || headers.indexOf("Content-Type") <= 0) {
 
-                xhr.setRequestHeader('Content-Type', 'application/json');
 
+            if (!headers || !headers.hasOwnProperty("Content-Type")) {
 
+                xhr.setRequestHeader("Content-Type", "application/json");
 
             }
 
             xhr.send(JSON.stringify(data));
 
         } else {
 
@@ -81,7 +81,7 @@ const requestUtil = {
 
      *     .then(data => console.log(data))
 
      *     .catch(error => console.error(error));
 
      */
 
-    async: function (url, method, data, headers) {
 
+    async(url, method, data = {}, headers = {}) {
 
         return new Promise((resolve, reject) => {
 
             const xhr = new XMLHttpRequest();
 
             xhr.open(method, url, true);
 
@@ -92,17 +92,28 @@ const requestUtil = {
 
             xhr.onerror = () => reject(xhr.statusText);
 
         });
 
     },
 
+    /**
 
+     * 拼接 url
 
+     */
 
+    buildUrl(url, params) {
 
+        const urlObj = new URL(url);
 
+        // @ts-ignore
 
+        for (const key in params) {
 
+            urlObj.searchParams.set(key, params[key]);
 
+        }
 
+        return urlObj.toString();
 
+    },
 
 
     /**
 
      * 同步请求 let a = request.sync("https://httpbin.tianyunperfect.cn/ip","GET",null,null)
 
      */
 
-    sync: function (url, method, data, headers) {
 
+    sync(url, method, data = {}, headers = {}) {
 
         const xhr = new XMLHttpRequest();
 
         xhr.open(method, url, false);
 
         this.xhr_send(xhr, method, headers, data);
 
         return JSON.parse(xhr.responseText);
 
-    }
 
-}
 
+    },
 
+};
 
 
 
 /**
 
@@ -347,4 +358,4 @@ const copyUtil = {
 
             console.error('复制失败', err);
 
         }
 
     }
 
-}
 
+}

+ 51 - 9
tmp/test.html
View File 

@@ -1,18 +1,60 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html>
 
 <head>
 
     <meta charset="UTF-8">
 
-    <title>Title</title>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Login and Registration</title>
 
+    <link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css">
 
     <style>
 
+        html, body {
 
+            height: 100%;
 
+        }
 
+        body {
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+        }
 
+        .container {
 
+            width: 100%;
 
+            max-width: 400px;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
-<iframe src="https://news.cnblogs.com/" height="300px" width="300px">
 
-</iframe>
 
-<script type="module">
 
-
 
+<div class="container">
 
+    <h1 class="text-center my-5">Login and Registration</h1>
 
+    <form id="auth-form">
 
+        <div class="mb-3">
 
+            <label for="email" class="form-label">Email address</label>
 
+            <input type="email" class="form-control" id="email">
 
+        </div>
 
+        <div class="mb-3">
 
+            <label for="password" class="form-label">Password</label>
 
+            <input type="password" class="form-control" id="password">
 
+        </div>
 
+        <div class="mb-3 form-check">
 
+            <input type="checkbox" class="form-check-input" id="register-checkbox">
 
+            <label class="form-check-label" for="register-checkbox">Register</label>
 
+        </div>
 
+        <button type="submit" class="btn btn-primary">Submit</button>
 
+    </form>
 
+</div>
 
+<script src="//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
+<script>
 
+    const form = document.getElementById('auth-form');
 
+    const registerCheckbox = document.getElementById('register-checkbox');
 
+    form.addEventListener('submit', async (e) => {
 
+        e.preventDefault();
 
+        const email = document.getElementById('email').value;
 
+        const password = document.getElementById('password').value;
 
+        const url = registerCheckbox.checked ? '/register' : '/login';
 
+        try {
 
+            const response = await axios.post(url, { email, password });
 
+            console.log(response);
 
+        } catch (error) {
 
+            console.error(error);
 
+        }
 
+    });
 
 </script>
 
-
 
 </body>
 
-</html>
 
+</html>