一、登录界面
Python123.i0是一个专业的Python编程课程网站,需要登录才能使用其提供的服务。登录界面如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Python123 Login</title>
</head>
<body>
<form action="/login" method="post">
<label>Username:</label>
<input type="text" name="username"><br>
<label>Password:</label>
<input type="password" name="password"><br>
<input type="submit" value="Login">
</form>
</body>
</html>
从代码可以看出,登录界面是一个HTML表单,使用POST方法向指定URL提交用户名和密码。
二、后台验证
下面是Python后台登录验证的代码:
import hashlib
class User:
def __init__(self, username, password):
self.username = username
self.salt = 'python123'
self.password = self.encrypt(password)
def encrypt(self, password):
md5 = hashlib.md5()
pwd = password + self.salt
md5.update(pwd.encode('utf-8'))
return md5.hexdigest()
def authenticate(self, password):
return self.encrypt(password) == self.password
users = {
'admin': User('admin', 'admin'),
'user1': User('user1', '123456')
}
def login(username, password):
user = users.get(username)
if user and user.authenticate(password):
return True
else:
return False
前台通过POST方法提交的用户名和密码会由后台进行验证。在Python的这段代码中,我们创建了一个User类来保存用户名和密码,密码加密用了MD5散列加盐的方式。login()函数接收HTTP请求中提交的用户名和密码,从users字典中查找对应的User,再调用该User实例的authenticate()方法判断密码是否匹配。
三、会话管理
为了更好地管理用户的会话,Python123.i0使用了Flask框架提供的session机制,代码如下:
from flask import Flask, session, redirect, url_for, request, render_template
app = Flask(__name__)
app.secret_key = 'python123'
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
if login(username, password):
session['username'] = username
return redirect(url_for('index'))
else:
return render_template('login.html', message='Invalid username or password!')
else:
return render_template('login.html')
@app.route('/')
def index():
if 'username' in session:
username = session['username']
return 'Hello, ' + username
else:
return redirect(url_for('login'))
代码中,我们使用了Flask的装饰器@app.route()来指定URL对应的视图函数。在/login视图函数中,判断HTTP请求的方法是否为POST,如果是,就获取提交的用户名和密码,将它们传递给已经创建的login()函数进行验证,如果验证通过,就在session中保存该用户的用户名,并且redirect到index()视图函数,否则返回登录界面并展示一个提示信息。在/index视图函数中,我们检查session中是否保存了用户名,如果是,就返回该用户名,否则就redirect到登录界面。
四、安全性
为了保护用户信息的安全,Python123.i0现在已经支持HTTPS,使用了SSL技术加密网站和客户端之间的数据传输,代码如下:
from flask_sslify import SSLify
if __name__ == '__main__':
sslify = SSLify(app)
app.run()
在Python代码中,我们使用了Flask-SSLify扩展来启用SSL。同时,在Nginx等Web服务器中,也需要进行相应的配置才能正常使用HTTPS。
五、外观美化
最后,我们可以对Python123.i0的登录界面进行美化,这里使用了Semantic UI这个前端框架,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Python123 Login</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
</head>
<body>
<div class="ui container">
<div class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal image header">
<img src="https://en.gravatar.com/userimage/216075386/8c9f4102b7ff097c05bc2a5ac20ff9a3.png?size=200" class="image">
<div class="content">
Log-in to your account
</div>
</h2>
<form class="ui large form" action="/login" method="post">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="username" placeholder="Username">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password">
</div>
</div>
<input class="ui fluid large teal submit button" type="submit" value="Login">
</div>
</form>
<div class="ui message">
New to us? <a href="#">Sign Up</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
</body>
</html>
通过HTML和CSS代码,我们可以很容易地实现登录界面的美化。同时,我们可以使用一些效果更加丰富的JavaScript前端框架,例如Vue.js、React等,来实现更加灵活和美观的前端界面。