Flask登录注册界面美化
程序员文章站
2022-05-06 21:22:01
...
前后登录注册界面对比
登录和注册界面放在两个不同的路由
登录和注册放在同一个页面且可以动态切换；
准备工作
- 将相关的CSS和JS以及背景放在 static 文件夹下
修改之前的 auth.py 文件内容添加一个新的Route路由 newlogin
@bp.route('/newlogin', methods=('GET', 'POST'))
def newlogin(error=None):
param= request.form
if request.method=='POST':
username = param.get("name") # None
password = param.get("pass")
#print(param.get("regname"),param.get("name"))
newusername = param.get("regname")
newpassword = param.get("regpass")
print(username,password)
print(newusername,newpassword)
if username != None: # login
db = get_db()
error = None
user = db.execute(
'SELECT * FROM user WHERE username = ?', (username,)
).fetchone()
if user is None:
error = 'Incorrect username.'
elif not check_password_hash(user['password'], password):
error = 'Incorrect password.'
print(error)
if error is None:
session.clear()
session['user_id'] = user['id']
return redirect(url_for('index'))
if newusername != None: # register
db = get_db()
error = None
if not newusername:
error = 'Username is required.'
print(error)
elif not newpassword:
error = 'Password is required.'
print(error)
elif db.execute(
'SELECT id FROM user WHERE username = ?', (newusername,)
).fetchone() is not None:
error = 'User {} is already registered.'.format(newusername)
print(error)
if error is None:
db.execute(
'INSERT INTO user (username, password) VALUES (?, ?)',
(newusername, generate_password_hash(newpassword))
)
db.commit()
return redirect(url_for('index'))
return render_template('auth/newlogin.html',error=error)
还要在 templates 文件夹下的 auth 文件夹添加一个新的 newlogin.html 文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Raspiberry Video</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style1.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome-4.7.0/css/font-awesome.min.css') }}">
</head>
<body>
<div class="materialContainer">
<form method="post">
<div class="box">
<div class="title">登录</div>
<div class="input">
<label for="name">用户名</label>
<input type="text" name="name" id="name">
<span class="spin"></span>
</div>
<div class="input">
<label for="pass">密码</label>
<input type="password" name="pass" id="pass">
<span class="spin"></span>
</div>
<div class="button login">
<button>
<span>登录</span>
<i class="fa fa-check"></i>
</button>
</div>
<!-- <a href="javascript:" class="pass-forgot">忘记密码？</a> -->
</div>
</form>
<div class="overbox">
<form method="post">
<div class="material-button alt-2">
<span class="shape"></span>
</div>
<div class="title">注册</div>
<div class="input">
<label for="regname">用户名</label>
<input type="text" name="regname" id="regname">
<span class="spin"></span>
</div>
<div class="input">
<label for="regpass">密码</label>
<input type="password" name="regpass" id="regpass">
<span class="spin"></span>
</div>
<!-- <div class="input">
<label for="reregpass">确认密码</label>
<input type="password" name="reregpass" id="reregpass">
<span class="spin"></span>
</div> -->
<div class="button">
<button>
<span>注册</span>
</button>
</div>
</form>
</div>
<div id="little_tips">{{ error }}</div>
</div>
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
</body>
</html>
其会自动引用对应的CSS和JS完成渲染。
测试后可以正常添加用户，且用户不可重名；
若注册或登录遇到操作异常会在左下角返回相关报错信息，提示输入完整的用户名和密码，并返回登录界面。
总结
通过添加路由实现替换原来的登录界面。