- 廢話不多說(shuō)，開始動(dòng)手叭
最終效果
- 要寫的內(nèi)容：
用戶進(jìn)行登錄注冊(cè)的前端界面：login.html和register.html
數(shù)據(jù)庫(kù)進(jìn)行賬號(hào)密碼判斷的后臺(tái)CGI腳本：login.py和register.py
（實(shí)戰(zhàn)二先不鏈接數(shù)據(jù)庫(kù)蛤，從假數(shù)據(jù)開始寫，先掌握邏輯~） -
最終效果，其實(shí)就是兩個(gè)很簡(jiǎn)單的登錄注冊(cè)頁(yè)面啦：
image.png
image.png
- 開始前的小小提示：html文件是放在Documents文件夾里的蛤，cgi文件是放在CGI-Executables文件夾，不要搞混了
第一步：編寫前端登錄界面 login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>登錄</title>
<style>
* {
box-sizing: border-box;
}
.form {
width: 300px;
margin: 100px auto;
border: #eee 1px solid;
padding: 30px;
}
.form label {
display: block;
margin: 10px 0;
font-size: 14px;
}
.form input {
display: block;
width: 100%;
margin-bottom: 20px;
font-size: 10px;
border: 1px solid #ccc;
padding: 5px 0;
height: 35px;
}
form h1 {
margin: 0;
text-align: center;
border-bottom: #eee 1px solid;
margin-bottom: 20px;
padding: 10px 0;
font-size: 22px;
}
.btn-login {
margin: 0;
padding: 0;
font-size: 12px;
margin-top: 10px;
background-color: #3f89ec;
color: #fff;
}
.no-account {
text-decoration: none;
position: absolute;
color: #2e82ff;
left: 55%;
font-size: 12px;
}
</style>
</head>
<body>
<form action="http://localhost/cgi-bin/login.py" method="post" class="form">
<h1>登錄</h1>
<div>
<label for="">用戶名：</label>
<input type="text" name="uname" placeholder=" 手機(jī)/郵箱/用戶名"/>
</div>
<div>
<label for="">密碼：</label>
<input type="password" name="upass" placeholder=" 密碼"/>
</div>
<input class="btn-login" style="border: 0px solid #ccc;" type="submit" value="登錄">
<a class="no-account" href="register.html">立刻注冊(cè)</a>
</form>
</body>
</html>
第二步：編寫前端注冊(cè)界面 register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>注冊(cè)</title>
<style>
* {
box-sizing: border-box;
}
.form {
width: 300px;
margin: 100px auto;
border: #eee 1px solid;
padding: 30px;
}
.form label {
display: block;
margin: 10px 0;
font-size: 14px;
}
.form input {
display: block;
width: 100%;
margin-bottom: 20px;
font-size: 10px;
border: 1px solid #ccc;
padding: 5px 0;
height: 35px;
}
form h1 {
margin: 0;
text-align: center;
border-bottom: #eee 1px solid;
margin-bottom: 20px;
padding: 10px 0;
font-size: 22px;
}
.btn-login {
margin: 0;
padding: 0;
font-size: 12px;
margin-top: 10px;
background-color: #3f89ec;
color: #fff;
}
.no-account {
text-decoration: none;
position: absolute;
color: #2e82ff;
left: 55%;
font-size: 12px;
}
</style>
</head>
<body>
<form action="http://localhost/cgi-bin/register.py" method="post" class="form">
<h1>注冊(cè)</h1>
<div>
<label for="">用戶名：</label>
<input type="text" name="rname" placeholder=" 手機(jī)/郵箱/用戶名"/>
</div>
<div>
<label for="">密碼：</label>
<input type="password" name="rpass" placeholder=" 密碼"/>
</div>
<input class="btn-login" style="border: 0px solid #ccc;" type="submit" value="注冊(cè)">
<a class="no-account" href="login.html">已有賬號(hào)</a>
</form>
</body>
</html>
第三步：編寫判斷用戶登錄的后臺(tái)CGI腳本 login.py
#!/usr/bin/python
# -*- coding: UTF-8 -*-
# CGI處理模塊
import cgi
# 創(chuàng)建 FieldStorage 的實(shí)例化
form = cgi.FieldStorage()
# 暫定后臺(tái)用戶名和密碼
backuname = "111"
backpass = "222"
uname = form.getvalue("uname")
upass = form.getvalue("upass")
print("Content-type:text/html")
print('')
print('<html>')
print('<head>')
print('<meta charset="utf-8">')
if uname != backuname or upass != backpass:
print('<meta http-equiv="Refresh" content="1;url=/login.html">')
print('<title>登錄</title>')
print('</head>')
print('<body>')
print('<h>用戶名或密碼錯(cuò)誤！正在跳轉(zhuǎn)至重新登錄界面...</h>')
else:
print('<title>登錄</title>')
print('</head>')
print('<body>')
print('<h>登錄成功！<h>')
print('</body>')
print('</html>')
第四步：編寫判斷用戶注冊(cè)的后臺(tái)CGI腳本 register.py
#!/usr/bin/python
# -*- coding: UTF-8 -*-
# CGI處理模塊
import cgi
# 創(chuàng)建 FieldStorage 的實(shí)例化
form = cgi.FieldStorage()
# 存放新賬號(hào)密碼
rname = form.getvalue("rname")
rpass = form.getvalue("rpass")
# 設(shè)置假數(shù)據(jù)：已存在用戶
fname = '111'
fpass = '222'
print("Content-type:text/html")
print('')
print('<html>')
print('<head>')
print('<meta charset="utf-8">')
if rname == None or rpass == None or rname == fname:
print('<meta http-equiv="Refresh" content="1;url=/register.html">')
print('<title>注冊(cè)</title>')
print('</head>')
print('<body>')
if rname == None or rpass == None :
print('<h>用戶名或密碼不得為空！正在跳轉(zhuǎn)至重新注冊(cè)頁(yè)面...<h>')
else:
print('<h>此賬號(hào)已存在！正在跳轉(zhuǎn)至重新注冊(cè)頁(yè)面...<h>')
else:
print('<meta http-equiv="Refresh" content="1;url=/login.html">')
print('<title>注冊(cè)</title>')
print('</head>')
print('<body>')
print('<h>注冊(cè)成功！正在跳轉(zhuǎn)至登錄頁(yè)面...</h>')
print('</body>')
print('</html>')
十分爽快地結(jié)束！
- 運(yùn)行看看叭
