python实现用户登录注册界面_实现前后端登录注册界面
本篇博客講解如何實現前后端的簡單登錄注冊界面，后端代碼由node.js實現，主要闡述登錄注冊時網頁工作原理。感興趣的同學可以參考一下。
注冊界面
功能：
判斷用戶是否輸入郵箱，密碼，驗證密碼(前端判斷)
判斷用戶的郵箱格式是否正確(后端判斷)
判斷輸入的密碼和驗證密碼是否一致(前端判斷)
判斷注冊的郵箱是否唯一(后端判斷)
1.html部分：
注冊
郵箱
密碼
確認密碼
2.js部分(由jquery實現)：
監聽表單的submit事件，將用戶輸入的信息存儲到hash表中，如果用戶輸入不合法則出現錯誤提示信息
$('#RegisterForm').on('submit',(e) => {
e.preventDefault();
let hash = {};
let arg = ['email','password','password_confirm'];
arg.forEach((name) => {
let value = $('#RegisterForm').find(`[name= ${name}]`).val();
hash[name] = value;
})
$('#RegisterForm').find('.error').each((index,span) => {
$(span).text(''); //初始的錯誤提示為空
})
if(hash['email'] === ''){
$('#RegisterForm').find('[name = "email"]').siblings('.error').text('請輸入郵箱');
return
}
if(hash['password'] === ''){
$('#RegisterForm').find('[name = "password"]').siblings('.error').text('請輸入密碼');
return
}
if(hash['password_confirm'] === ''){
$('#RegisterForm').find('[name = "password_confirm"]').siblings('.error').text('請輸入密碼');
return
}
if(hash['password'] !== hash['password_confirm'] ){
$('#RegisterForm').find('[name = "password_confirm"]').siblings('.error').text('密碼不匹配');
return
}
3.ajax發送post請求register頁面:
如果請求成功，打印出返回的信息；
如果請求失敗，判斷一下失敗信息，然后給出錯誤信息提示；
$.post('/register',hash).then((response) =>{console.log(response)},
(request) => {
let {errors} = request.responseJSON;/*等價于----
-------let {errors} = JSON.parse(request.responseText)*/
if(errors.email && errors.email === 'invalid'){
$('#RegisterForm').find('[name = "email"]')
.siblings('.error').text('郵箱輸錯了');
}
})
})
4.服務端代碼：
給register頁面的(發送POST請求)設置路由，
后端代碼將瀏覽器傳來的request中的信息存儲到hash中，判斷是否符合輸入要求，同時判斷郵箱是否唯一，如果不符合，服務器返回400，給出提示；如果符合，返回200，將數據信息存儲到本地數據庫./db/users
else if(path === '/register' && method ==='POST'){
readBody(request).then((body) => {
let strings = body.split('& ');
let hash = {};
strings.forEach((string) => {
let parts = string.split('=');
let key = parts[0];
let value = parts[1];
hash[key] = decodeURIComponent(value) ;//解決url路徑解析不了@符號的問題
})
let {email, password, password_confirm} = hash;
if (email.indexOf('@') === -1) {
response.statusCode = 400;
response.setHeader('Content-Type', 'text/json;charset=utf-8')
response.write(`{"errors":
{"email":"invalid"}
}`);
}
else if (password !== password_confirm) {
response.statusCode = 400;
response.write('password not match');
}
else {
var users = fs.readFileSync('./db/users','utf8')
try{
users = JSON.parse(users)
}
catch(exception) {
users = [];
}
let inUse = false;
for(let i = 0;i
let user = users[i];
if(user.email = email)
{inUse = true}
}
if(inUse){
response.statusCode = 400
response.write('email inUse');
}else{
users.push({ email: email, password: password })
response.statusCode = 200
let usersString = JSON.stringify(users)
fs.writeFileSync('./db/users',usersString);
}
}
response.end()
})
}
function readBody(request){ //用來讀取整段的瀏覽器傳來的formdata,因為瀏覽器是片段上傳的方式
return new Promise((resolve,reject) => {
let body = [];
request.on('data',(chunk) => {
body.push(chunk)
}).on('end',() => {
body = Buffer.concat(body).toString();
resolve(body);
})
})
}
二·登錄界面
功能：
判斷用戶輸入的郵箱，密碼是否為空(前端判斷)
判斷用戶輸入的郵箱是否正確(后端判斷)
判斷輸入的密碼是否正確(后端判斷)
1.html部分：
登錄
郵箱
密碼
2.JS部分：
將用戶填寫的登錄信息存儲到hash表中，如果用戶輸入為空，則給出錯誤信息提示
$('#loginForm').on('submit',(e) => {
e.preventDefault();
let hash = {};
let arg = ['email','password'];
arg.forEach((name) => {
let value = $('#loginForm').find(`[name= ${name}]`).val();
hash[name] = value;
})
$('#loginForm').find('.error').each((index,span) => {
$(span).text('');
})
if(hash['email'] === ''){
$('#loginForm').find('[name = "email"]').siblings('.error').text('請輸入郵箱');
return
}
if(hash['password'] === ''){
$('#loginForm').find('[name = "password"]').siblings('.error').text('請輸入密碼');
return
}
3.ajax發送post請求login頁面：
如果請求成功，跳轉到首頁；如果請求失敗，給出登錄失敗的提示
$.post('/login',hash).then(() =>{window.location.href="/"},
() => {
alert("登錄失敗，請重新登錄")
})
})
4.給login頁面(post請求)設置路由：
讀取本地數據庫./db/users，與瀏覽器傳來的formdata進行比對，如果用戶密碼正確，給瀏覽器設置cookie，將用戶登錄的郵箱名存下來，返回200
else if(path==='/login' && method ==="POST"){
readBody(request).then((body) => {
let strings = body.split('&');
let hash = {};
strings.forEach((string) => {
let parts = string.split('=');
let key = parts[0];
let value = parts[1];
hash[key] = decodeURIComponent(value);
})
let {email, password} = hash;
var users = fs.readFileSync('./db/users','utf8')
try{
users = JSON.parse(users)
}
catch(exception) {
users = [];
}
let found ;
for(let i = 0;i
let user = users[i];
if(user.email === email && user.password === password)
{found = true;
break;}
}
if(found){
/*設置cookie，將用戶的登錄郵箱名存下來*/
response.setHeader('set-cookie',`email= ${email}`);
response.statusCode = 200
}else{
response.statusCode = 401
}
response.end();
})
}
這里講到了給瀏覽器設置cookie，我們就來簡單了解一下什么是cookie。
三·cookie
cookie指某些網站為了辨別用戶身份、進行 session 跟蹤而儲存在用戶本地終端上的數據(通常經過加密)
服務器通過set-cookie后，給瀏覽器傳了一段識別身份的數據；之后瀏覽器給次請求都會附上這份cookie數據，服務器以此來驗明瀏覽器的身份。cookie的時效性一般是兩天左右，可以自行設置。
通俗的來講就是cookie就是一個驗證身份的門票，服務器給瀏覽器發了一張門票，瀏覽器請求數據時需要拿出門票，服務器看到門票后驗證了身份，才會同意請求。
這里值得注意的是cookie的作用域domain，cookie也遵守瀏覽器同源策略，不同域名的cookie的是不一樣的。
四·登錄后跳轉首頁
登錄界面獲取到瀏覽器設置的cookie，再次向服務器請求跳轉到首頁時需要附上這段cookie，服務器讀取后同意跳轉到首頁。
功能：
若登錄成功，跳轉到首頁，在首頁顯示登錄郵箱名
1.html部分(首頁)：
這是首頁
用戶: --email--
2.給首頁設置路由：
讀取cookie值，展示在首頁上，顯示當前登錄的用戶郵箱名
else if(path === '/'){
let string = fs.readFileSync('./index.html', 'utf8')
let cookies = request.headers.cookie.split('; ');/*這里多出一個空格，要注意*/
let hash = {};
for(let i =0 ;i
let parts = cookies[i].split('=');
let key = parts[0];
let value = parts[1];
hash[key] = value;
}
總結
講解完實現過程后，我們來總結一下：
當我們進行登錄注冊時，網頁都做了些什么呢？
1.我們進行注冊時，瀏覽器向服務器發送post請求，同時將注冊信息傳過去；
2.服務器將用戶信息存儲到本地數據庫后，告知瀏覽器注冊成功
3.用戶打開登錄界面，輸入登錄信息，向服務器發送post請求
4.服務器讀取本地數據庫，比對登錄信息是否正確，若錯誤，告知瀏覽器登錄失敗；若正確給瀏覽器設置cookie
5.瀏覽器向服務器發送get請求，訪問首頁，附上cookie
6.服務器讀取cookie，驗證身份后，同意瀏覽器訪問首頁
源碼
附上一個vue版本帶有登錄注冊功能的備忘錄demo
以上是個人觀點，如有錯誤歡迎指出。
總結
以上是生活随笔為你收集整理的python实现用户登录注册界面_实现前后端登录注册界面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jenkins邮箱配置过程（qq + 1
- 下一篇： python中\t \r \s \n \