注册页面

2022-11-16 18:03:17 +08:00
parent 7e8c5da593
commit 71adc2622e
4 changed files with 185 additions and 7 deletions
--- a/code/web/car_dealer/vue/注册/signup.html
+++ b/code/web/car_dealer/vue/注册/signup.html
@@ -0,0 +1,100 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-16 10:50:27
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-16 15:07:29
+ * @FilePath: \car_dealer\vue\注册\signup.html
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>注册</title>
+        <link rel="stylesheet" href="../../css/root.css" />
+        <link rel="stylesheet" href="../../css/normalize.css" />
+        <link rel="stylesheet" href="../../css/app.css" />
+        <link rel="stylesheet" href="css/main.css" />
+    </head>
+    <body>
+        <div class="content">
+            <div id="app">
+                <h5>加入我们，一起创造美好世界</h5>
+                <h1>创建你的账号</h1>
+                <div>
+                    <h6>用户名 *</h6>
+                    <input
+                        type="text"
+                        v-model.lazy.trim="signupInfo.username"
+                    />
+                </div>
+                <div>
+                    <h6>邮箱地址</h6>
+                    <input type="text" v-model.lazy.trim="signupInfo.email" />
+                </div>
+                <div>
+                    <h6>密码*</h6>
+                    <input
+                        type="text"
+                        v-model.lazy.trim="signupInfo.password"
+                    />
+                    <h6>请确认密码长度需要大于6位</h6>
+                </div>
+                <div>
+                    <h6>偏好设置</h6>
+                    <div class="pianhao">
+                        <input
+                            type="checkbox"
+                            id="sendUpdateMail"
+                            v-model="signupInfo.sendUpdateMail"
+                        />
+                        <label for="sendUpdateMail">&nbsp;接收更新邮件</label>
+                    </div>
+                </div>
+                <button type="button" @click="doSignup()">创建账号</button>
+            </div>
+        </div>
+    </body>
+    <script src="../../js/axios/1.1.3/axios.js"></script>
+    <script src="../../js/vue/vue.global.js"></script>
+    <script>
+        const app = {
+            data() {
+                return {
+                    signupInfo: {
+                        username: "",
+                        email: "",
+                        password: "",
+                        sendUpdateMail: false,
+                    },
+                };
+            },
+            methods: {
+                doSignup() {
+                    let json = "";
+
+                    if (
+                        this.signupInfo.username.length != 0 &&
+                        this.signupInfo.password.length != 0
+                    ) {
+                        try {
+                            json = JSON.stringify(this.signupInfo);
+                        } catch (exception) {
+                            console.log(exception.message);
+                        }
+                    } else {
+                    }
+
+                    console.log(json);
+                },
+            },
+        };
+
+        const vm = Vue.createApp(app);
+        vm.mount("#app");
+    </script>
+</html>