在导航条中,右侧有登录和注册两个链接,储存用户数据的Users
模型也有了,现在我们来实现登录和注册的功能。
先来看注册功能的实现,新建一个视图函数,如下:
@app.route('/register/')
def register():
return render_template('register.html')
在导航条模板base.html
中,为注册添加链接,使用url_for
函数将其href
属性值修改为register.html
,如下:
<li><a href="{{ url_for('register') }}">注册</a></li>
接下来我们要去制作register.html
了,这部分是基础的html/css
知识,控件也是用的Bootstrap框架,最终注册页http://127.0.0.1:5000/register/的效果图如下(结尾贴出代码):
register.html
中的表单控件,我们设置了其方法为POST
,注册按钮的type
为submit
,这样点击提交按钮的时候,浏览器就会以POST
方法去请求当前网址,但我们的视图函数默认只能接受GET
方法,因此我们要为其添加POST
方法,并使用flask
中的request
对象获取表单提交的数据,最终视图函数代码如下:
@app.route('/register/', methods=['GET', 'POST'])
def register():
if request.method == 'GET':
return render_template('register.html')
else:
username = request.form.get('username')
password1 = request.form.get('password1')
password2 = request.form.get('password2')
print(username, password1, password2)
return ' '
request.form.get
方法需要传入表单控件的name
属性的值,这样就能获取到对应的填入到表单中的值了,为了演示,我们在结尾将其打印了出来,结果显示无误,说明后端已经获取到了POST
提交的数据。
登陆页面也是一样的原理,拿register.html
简单修改成login.html
,模仿register
再增加一个login
视图函数,然后访问http://127.0.0.1:5000/login/,效果如下:
结尾贴上register.html
的内容:
{% extends 'base.html' %}
{% block static_files %}
<link rel="stylesheet" href="{{ url_for('static',filename='css/register_login.css.css') }}"/>
{% endblock %}
{% block page_name %}注册{% endblock %}
{% block body_part %}
<h3>注册</h3>
<form class="form" action="" method="POST">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">用户</span>
<input type="text" class="form-control" placeholder="请输入用户名" aria-describedby="sizing-addon1" name="username">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">密码</span>
<input type="password" class="form-control" placeholder="请输入密码" aria-describedby="sizing-addon1" name="password1">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">密码</span>
<input type="password" class="form-control" placeholder="请再次确认密码" aria-describedby="sizing-addon1" name="password2">
</div>
<div class="register-button">
<button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
</div>
</form>
{% endblock %}
代码中引入的register_login.css
是register.html
和login.html
通用的,其内容如下:
h3{
text-align: center;
padding-top: 10px;
}
.form{
width: 400px;
margin: 0 auto;
}
form.form > div{
padding: 8px;
}
此外还对导航条模板做了简单的调整,第一是增加了一个block
,给每个继承它的html
一个放自定义css
文件的地方,第二是在body
中增加了一个div
块,即register.html
和login.html
中间白色的内容区域,最终base.html
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}"/>
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
{% block static_files %}{% endblock %}
<title>{% block page_name %}{% endblock %}-HarpQA</title>
</head>
<body>
<nav><!-- 导航条内容 -->
...省略...
<li><a href="{{ url_for('login') }}">登录</a></li>
<li><a href="{{ url_for('register') }}">注册</a></li>
...省略...
</nav>
<div class="body-container">
{% block body_part %}
{% endblock %}
</div>
</body>
</html>
base.css
也添加了<div class="body-container">
的样式:
.body-container{
width: 600px;
background: white;
margin: 0 auto;
border-radius: 5px;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。