展示效果图
运行下面的后端代码,接着在浏览器输入你的网络ip:535/
(主页网址),因为给主页网址加了限制,没有登录,所以直接跳转到登录页面
接着输入限定的用户名admin1
和密码admin1
,如果输入错误,如下图
输入正确则跳转到主页
如果要退出登录,则点击退出登录
,跳转到登录页面
代码
主要的后端代码
from flask import Flask, request, session, render_template, redirect, flash
app = Flask(__name__)
# 配置 SELECT_KEY
app.config['SECRET_KEY'] = '3c2d9d261a464e4e8814c5a39aa72f1c'
@app.route('/')
def index():
if request.method == 'GET':
# 判断是否已经在登录状态上:判断session中是否有uname的值
if 'uname' in session:
# 已经登录了,直接去往首页
return """
<p>欢迎来到首页</p>
<a href='/logout'>退出登录</a>"""
else:
# 没有登录,继续向下判断cookie
if 'uname' in request.cookies:
# 曾经记住过密码,取出值保存进session
uname = request.cookies.get('uname')
session['uname'] = uname
return """
<p>欢迎来到首页</p>
<a href='/logout'>退出登录</a>"""
else:
# 之前没有登录过,去往登录页
return redirect('/login')
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'GET':
# 判断是否已经在登录状态上:判断session中是否有uname的值
if 'uname' in session:
# 已经登录了,直接去往首页
return redirect('/')
else:
# 没有登录,继续向下判断cookie
if 'uname' in request.cookies:
# 曾经记住过密码,取出值保存进session
uname = request.cookies.get('uname')
session['uname'] = uname
return redirect('/')
else:
# 之前没有登录过,去往登录页
return render_template('ll.html')
else:
# 先处理登录,登录成功继续则保存进session,否则回到登录页
uname = request.form.get('uname')
upwd = request.form.get('upwd')
# 本文默认正确的账号密码为:admin
if uname == 'admin1' and upwd == 'admin1':
# 声明重定向到首页的对象
resp = redirect('/')
# 登录成功:先将数据保存进session
session['uname'] = uname
# 判断是否要记住密码
if 'isSaved' in request.form:
# 需要记住密码,将信息保存进cookie
resp.set_cookie('uname', uname, 60 * 60 * 24 * 30)
return resp
else:
# 登录失败
flash("该用户名和密码不存在")
return redirect('/login')
@app.route('/logout', methods=['GET', 'POST'])
def logout():
resp = redirect('/')
resp.delete_cookie('uname')
session.pop('uname', None)
return resp
if __name__ == '__main__':
app.run(host='0.0.0.0', port=535, threaded=True)
其中前端页面代码ll.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div#all {
width: 100%;
height: 100%;
position: fixed;
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 100% 100%;
font-size: 30px;
/*background-image: url(/static/img/7.jpg);*/
margin: 0;
padding: 0;
/*filter: blur(5px);*/
z-index: -1;
}
input.info{
width: 320px;
height: 45px;
margin: 0px 8px;
border: 0;
text-indent: 10px; /*里面隐形的字体首行缩进*/
margin: 10px auto;
border-bottom-color: #666666;
border-bottom-style: solid;
border-bottom-width: 3px;
}
input.bu{
width: 320px;
height: 45px;
margin: 0px 8px;
border: 0;
margin: 10px auto;
background-color: #04B4AE;
color: #f9f9f9;
font-size: 1.5em;
font-weight: bold;
}
</style>
<body>
<div id="all">
</div>
<div id="title" style="color: white;font-size: 2em;font-weight: bolder;position: absolute;top: 20%;left: 60%">
审核系统
</div>
<div id="pic" style="width: 30%;height: 35%;top: 30%;left: 60%;position: absolute;">
{% if get_flashed_messages() %}
{%for message in get_flashed_messages() %}
<p style="color: darkred">{{message}}</p>
{% endfor %}
{% endif %}
<form action="/login" method="post">
<input type="text" name="uname" class="info" placeholder="输入用户名">
<input type="password" name="upwd" class="info" placeholder="输入密码">
<p style="color: #666666;font-size: 0.8em;">记住密码:<input type="checkbox" name="isSaved"></p>
<input type="submit" class="bu" value="登录">
</form>
</div>
</body>
</html>