2. 程式人生 > 實用技巧 >登入及註冊頁面

登入及註冊頁面

阿新 • • 發佈：2020-12-12

前提：基於element-ui環境

模態登入元件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 

135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
 
<template>
    <div class="login">
        <div class="box">
            <i class="el-icon-close" @click="close_login"></i>
            <div class="content">
                <div class="nav">
                    <span :class="{active: login_method === 'is_pwd'}"
                          @click="change_login_method('is_pwd')">密碼登入</span>
                    <span :class="{active: login_method === 'is_sms'}"
                          @click="change_login_method('is_sms')">簡訊登入</span>
                </div>

                <el-form v-if="login_method === 'is_pwd'">
                    <el-input
                            placeholder="使用者名稱/手機號/郵箱"
                            prefix-icon="el-icon-user"
                            v-model="username"
                            clearable>
                    </el-input>
                    <el-input
                            placeholder="密碼"
                            prefix-icon="el-icon-key"
                            v-model="password"
                            clearable
                            show-password>
                    </el-input>
                    <el-button type="primary" @click="login">登入</el-button>
                </el-form>

                <el-form v-if="login_method === 'is_sms'">
                    <el-input
                            placeholder="手機號"
                            prefix-icon="el-icon-phone-outline"
                            v-model="mobile"
                            clearable
                            @blur="check_mobile">
                    </el-input>
                    <el-input
                            placeholder="驗證碼"
                            prefix-icon="el-icon-chat-line-round"
                            v-model="sms"
                            clearable>
                        <template slot="append">
                            <span class="sms" @click="send_sms">{{ sms_interval }}</span>
                        </template>
                    </el-input>
                    <el-button type="primary">登入</el-button>
                </el-form>

                <div class="foot">
                    <span @click="go_register">立即註冊</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username: '',
                password: '',
                mobile: '',
                sms: '',
                login_method: 'is_pwd',
                sms_interval: '獲取驗證碼',
                is_send: false,
            }
        },
        methods: {
            close_login() {
                this.$emit('close')
            },
            go_register() {
                this.$emit('go')
            },
            change_login_method(method) {
                this.login_method = method;
            },
            check_mobile() {
                if (!this.mobile) return;
                if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
                    this.$message({
                        message: '手機號有誤',
                        type: 'warning',
                        duration: 1000,
                        onClose: () => {
                            this.mobile = '';
                        }
                    });
                    return false;
                }
                this.is_send = true;
            },
            send_sms() {

                if (!this.is_send) return;
                this.is_send = false;
                let sms_interval_time = 60;
                this.sms_interval = "傳送中...";
                let timer = setInterval(() => {
                    if (sms_interval_time <= 1) {
                        clearInterval(timer);
                        this.sms_interval = "獲取驗證碼";
                        this.is_send = true; // 重新回覆點擊發送功能的條件
                    } else {
                        sms_interval_time -= 1;
                        this.sms_interval = `${sms_interval_time}秒後再發`;
                    }
                }, 1000);
            },

            login() {
                if (!(this.username && this.password)) {
                    this.$message({
                        message: '請填好賬號密碼',
                        type: 'warning',
                        duration: 1500
                    });
                    return false  // 直接結束邏輯
                }

                this.$axios({
                    url: this.$settings.base_url + '/user/login/',
                    method: 'post',
                    data: {
                        username: this.username,
                        password: this.password,
                    }
                }).then(response => {
                    let username = response.data.data.username;
                    let token = response.data.data.token;
                    let user_id = response.data.data.id;
                    this.$cookies.set('username', username, '7d');
                    this.$cookies.set('token', token, '7d');
                    this.$cookies.set('user_id', user_id, '7d');
                    this.$emit('close')
                    // this.$emit('success', response.data);
                }).catch(error => {
                    console.log(error.response.data)
                    // console.log(error.response.data)
                })
            }
        }
    }
</script>

<style scoped>
    .login {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .box {
        width: 400px;
        height: 420px;
        background-color: white;
        border-radius: 10px;
        position: relative;
        top: calc(50vh - 210px);
        left: calc(50vw - 200px);
    }

    .el-icon-close {
        position: absolute;
        font-weight: bold;
        font-size: 20px;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .el-icon-close:hover {
        color: darkred;
    }

    .content {
        position: absolute;
        top: 40px;
        width: 280px;
        left: 60px;
    }

    .nav {
        font-size: 20px;
        height: 38px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span {
        margin: 0 20px 0 35px;
        color: darkgrey;
        user-select: none;
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span.active {
        color: black;
        border-bottom: 3px solid black;
        padding-bottom: 9px;
    }

    .el-input, .el-button {
        margin-top: 40px;
    }

    .el-button {
        width: 100%;
        font-size: 18px;
    }

    .foot > span {
        float: right;
        margin-top: 20px;
        color: orange;
        cursor: pointer;
    }

    .sms {
        color: orange;
        cursor: pointer;
        display: inline-block;
        width: 70px;
        text-align: center;
        user-select: none;
    }
</style>

模態註冊元件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 

139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
 
<template>
    <div class="register">
        <div class="box">
            <i class="el-icon-close" @click="close_register"></i>
            <div class="content">
                <div class="nav">
                    <span class="active">新使用者註冊</span>
                </div>
                <el-form>
                    <el-input
                            placeholder="手機號"
                            prefix-icon="el-icon-phone-outline"
                            v-model="mobile"
                            clearable
                            @blur="check_mobile">
                    </el-input>
                    <el-input
                            placeholder="密碼"
                            prefix-icon="el-icon-key"
                            v-model="password"
                            clearable
                            show-password>
                    </el-input>
                    <el-input
                            placeholder="驗證碼"
                            prefix-icon="el-icon-chat-line-round"
                            v-model="sms"
                            clearable>
                        <template slot="append">
                            <span class="sms" @click="send_sms">{{ sms_interval }}</span>
                        </template>
                    </el-input>
                    <el-button type="primary">註冊</el-button>
                </el-form>
                <div class="foot">
                    <span @click="go_login">立即登入</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Register",
        data() {
            return {
                mobile: '',
                password: '',
                sms: '',
                sms_interval: '獲取驗證碼',
                is_send: false,
            }
        },
        methods: {
            close_register() {
                this.$emit('close', false)
            },
            go_login() {
                this.$emit('go')
            },
            check_mobile() {
                if (!this.mobile) return;
                if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
                    this.$message({
                        message: '手機號有誤',
                        type: 'warning',
                        duration: 1000,
                        onClose: () => {
                            this.mobile = '';
                        }
                    });
                    return false;
                }
                this.is_send = true;
            },
            send_sms() {
                if (!this.is_send) return;
                this.is_send = false;
                let sms_interval_time = 60;
                this.sms_interval = "傳送中...";
                let timer = setInterval(() => {
                    if (sms_interval_time <= 1) {
                        clearInterval(timer);
                        this.sms_interval = "獲取驗證碼";
                        this.is_send = true; // 重新回覆點擊發送功能的條件
                    } else {
                        sms_interval_time -= 1;
                        this.sms_interval = `${sms_interval_time}秒後再發`;
                    }
                }, 1000);
            }
        }
    }
</script>

<style scoped>
    .register {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .box {
        width: 400px;
        height: 480px;
        background-color: white;
        border-radius: 10px;
        position: relative;
        top: calc(50vh - 240px);
        left: calc(50vw - 200px);
    }

    .el-icon-close {
        position: absolute;
        font-weight: bold;
        font-size: 20px;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .el-icon-close:hover {
        color: darkred;
    }

    .content {
        position: absolute;
        top: 40px;
        width: 280px;
        left: 60px;
    }

    .nav {
        font-size: 20px;
        height: 38px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span {
        margin-left: 90px;
        color: darkgrey;
        user-select: none;
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 2px solid darkgrey;
    }

    .nav > span.active {
        color: black;
        border-bottom: 3px solid black;
        padding-bottom: 9px;
    }

    .el-input, .el-button {
        margin-top: 40px;
    }

    .el-button {
        width: 100%;
        font-size: 18px;
    }

    .foot > span {
        float: right;
        margin-top: 20px;
        color: orange;
        cursor: pointer;
    }

    .sms {
        color: orange;
        cursor: pointer;
        display: inline-block;
        width: 70px;
        text-align: center;
        user-select: none;
    }
</style>

導航條：結合實際情況完成樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<template>
    <div class="nav">
        <span @click="put_login">登入</span>
        <span @click="put_register">註冊</span>
        <Login v-if="is_login" @close="close_login" @go="put_register" />
        <Register v-if="is_register" @close="close_register" @go="put_login" />
    </div>
</template>

<script>
    import Login from "./Login";
    import Register from "./Register";
    export default {
        name: "Nav",
        data() {
            return {
                is_login: false,
                is_register: false,
            }
        },
        methods: {
            put_login() {
                this.is_login = true;
                this.is_register = false;
            },
            put_register() {
                this.is_login = false;
                this.is_register = true;
            },
            close_login() {
                this.is_login = false;
            },
            close_register() {
                this.is_register = false;
            }
        },
        components: {
            Login,
            Register
        }
    }
</script>

<style scoped>

</style>

登入業務分析

多方式登入

1
2
3
4
5
6
 
"""
1）前臺提供賬號密碼，賬號可能是 使用者名稱、手機號、郵箱等

介面：
後臺只需要提供一個多方式登入介面即可 - 多方式登入介面
"""
驗證碼登入

1
2
3
4
5
6
7
8
 
"""
1）前臺提供手機號和驗證碼完成登入

介面：
前臺填完手機號，往後臺傳送校驗手機號的請求，如果存在繼續，不存在提示註冊 - 手機號存在與否介面
前臺點擊發送驗證碼，將手機再次傳送給後臺，後臺將手機號通知給第三方，傳送簡訊 - 手機驗證碼介面
前臺點選登入提交手機號與驗證碼，完成驗證碼登入 - 驗證碼登入介面
"""

註冊業務分析

驗證碼註冊

1
2
3
4
5
6
7
8
 
"""
1）前臺提供手機號、驗證碼、密碼完成註冊

介面：
前臺填完手機號，往後臺傳送校驗手機號的請求，如果不存在繼續，存在提示登入 - 手機號存在與否介面
前臺點擊發送驗證碼，將手機再次傳送給後臺，後臺將手機號通知給第三方，傳送簡訊 - 手機驗證碼介面
前臺點選註冊提交手機號、驗證碼及密碼，完成驗證碼註冊 - 驗證碼註冊介面
"""

彙總

1
2
3
4
5
6
7
 
"""
多方式登入介面
手機號存在與否介面
手機驗證碼介面
驗證碼登入介面
驗證碼註冊介面
"""

相關推薦

登入及註冊頁面

前提：基於element-ui環境 模態登入元件 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838

py mysql結合面向物件，實現類似超市導購機器的功能【2.使用者登入及註冊功能】

py mysql結合面向物件，實現類似超市導購機器的功能（自我總結） 步驟2： 編寫主類 ，將登入和註冊兩個功能分寫到兩個.py檔案中，再根據選擇型別呼叫方法：from 類 import 方法

HTML-表單標籤form及註冊頁面原始碼

表單標籤 <form></form> 用來盛放給使用者輸入資訊的標籤的空間 應用：一般的登入頁面就是用表單標籤做的屬性:action:提交後跳轉的連結頁面(攜帶使用者輸入的資訊作為引數)

jsp+dao+bean+servlet(MVC模式)實現簡單使用者登入和註冊頁面

功能介紹 本專案通過使用jsp和servlet實現簡單的使用者登入。主要邏輯為： 如果使用者不存在，則首先進行註冊（註冊資訊同步到資料庫中）。

vue框架前後端分離專案之登入註冊頁面及多方式登入、手機號驗證碼介面等相關內容-121

1 登入註冊前端頁面 1.1 Login.vue <template><div class=\"login\"><div class=\"box\"><i class=\"el-icon-close\" @click=\"close_login\"></i><div class=\"content\"><

JS+HTML5本地儲存Localstorage實現註冊登入及驗證功能示例

本文例項講述了JS+HTML5本地儲存Localstorage實現註冊登入及驗證功能。分享給大家供大家參考，具體如下：

luffy-登入註冊頁面

使用elementui元件 模態登入元件 <template> <div class=\"login\"> <div class=\"box\">

書籍管理系統登入註冊頁面

1.頁面展示 1.1 登入註冊頁面 1.2 書籍展示頁面 1.3 書籍編輯頁面 1.4 書籍新增頁面

IDEA簡單實現登入註冊頁面

application.yml spring: datasource: username: root password: 123456 url: jdbc:mysql://localhost:3306/bd1906?serverTimezone=GMT%2B8

登入註冊頁面

前提：基於element-ui環境 模態登入元件 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838

Node登入註冊頁面介面的開發----學習筆記（四）

技術標籤：Node 結合之前所學，開發登入註冊介面 完整的登入註冊頁面的開發 html頁面 login.html

實現登入註冊頁面跳轉

首頁： 程式啟動時，進入首頁，在首頁可以選擇的操作是： 1：註冊 2：登入 1、註冊：當容器中存在使用者輸入的使用者名稱時，或者使用者名稱的長度不再6-15之間時，註冊失敗

JavaScript實現簡易登入註冊頁面

本文例項為大家分享了實現簡易登入註冊頁面的具體程式碼，供大家參考，具體http://www.cppcns.com內容如下

SpringSecurity動態載入使用者角色許可權實現登入及鑑權功能

很多人覺得Spring Security實現登入驗證很難，我最開始學習的時候也這樣覺得。因為我好久都沒看懂我該怎麼樣將自己寫的用於接收使用者名稱密碼的Controller與Spring Security結合使用，這是一個先入為主的誤區。後來

Python3 Tkinkter + SQLite實現登入和註冊介面

本文例項為大家分享了Python3 Tkinkter + SQLite 實現登入和註冊介面，供大家參考，具體內容如下

Laravel5.1 框架登入和註冊實現方法詳解

本文例項講述了Laravel5.1 框架登入和註冊實現方法。分享給大家供大家參考，具體如下：

Python +Selenium解決圖片驗證碼登入或註冊問題(推薦)

1. 解決思路 首先要獲得這張驗證碼的圖片，但是該圖片一般都是用的js寫的，不能夠通過url進行下載。

Jupyter Notebook遠端登入及密碼設定操作

操作所涉及的檔案都在當前使用者下面的隱藏檔案： 1. 開啟Anaconda Prompt（如果之前生成過Config配置檔案則不需要第一步）

vue利用全域性導航守衛作登入後跳轉到未登入前指定頁面的例項程式碼

有這樣一個場景：如果你在登入之前輸入了http://localhost:8080/oauth2-mgm-app/#/userManage，想進入userManage頁面，但是由於沒有登入，系統是不會讓你進入這個頁面，之後會被定向到login頁面。但是在登入之後，認

Django使用者登入與註冊系統的實現示例

1.1.建立專案和app django-admin startproject mysite_login python manage.py startapp login 1.2.設定時區和語言