- 废话不多说，开始动手叭
最终效果
- 要写的内容：
用户进行登录注册的前端界面：login.html和register.html
数据库进行账号密码判断的后台CGI脚本：login.py和register.py
（实战二先不链接数据库蛤，从假数据开始写，先掌握逻辑~） -
最终效果，其实就是两个很简单的登录注册页面啦：
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=" 手机/邮箱/用户名"/>
</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">立刻注册</a>
</form>
</body>
</html>
第二步：编写前端注册界面 register.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/register.py" method="post" class="form">
<h1>注册</h1>
<div>
<label for="">用户名：</label>
<input type="text" name="rname" placeholder=" 手机/邮箱/用户名"/>
</div>
<div>
<label for="">密码：</label>
<input type="password" name="rpass" placeholder=" 密码"/>
</div>
<input class="btn-login" style="border: 0px solid #ccc;" type="submit" value="注册">
<a class="no-account" href="login.html">已有账号</a>
</form>
</body>
</html>
第三步：编写判断用户登录的后台CGI脚本 login.py
#!/usr/bin/python
# -*- coding: UTF-8 -*-
# CGI处理模块
import cgi
# 创建 FieldStorage 的实例化
form = cgi.FieldStorage()
# 暂定后台用户名和密码
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>用户名或密码错误！正在跳转至重新登录界面...</h>')
else:
print('<title>登录</title>')
print('</head>')
print('<body>')
print('<h>登录成功！<h>')
print('</body>')
print('</html>')
第四步：编写判断用户注册的后台CGI脚本 register.py
#!/usr/bin/python
# -*- coding: UTF-8 -*-
# CGI处理模块
import cgi
# 创建 FieldStorage 的实例化
form = cgi.FieldStorage()
# 存放新账号密码
rname = form.getvalue("rname")
rpass = form.getvalue("rpass")
# 设置假数据：已存在用户
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>注册</title>')
print('</head>')
print('<body>')
if rname == None or rpass == None :
print('<h>用户名或密码不得为空！正在跳转至重新注册页面...<h>')
else:
print('<h>此账号已存在！正在跳转至重新注册页面...<h>')
else:
print('<meta http-equiv="Refresh" content="1;url=/login.html">')
print('<title>注册</title>')
print('</head>')
print('<body>')
print('<h>注册成功！正在跳转至登录页面...</h>')
print('</body>')
print('</html>')
十分爽快地结束！
- 运行看看叭
