flask系列---注册和登录功能实现（1）—— 页面设计和获取POST数据（八）

在导航条中，右侧有登录和注册两个链接，储存用户数据的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;
}

flask系列---注册和登录功能实现（1）—— 页面设计和获取POST数据（八）

猜你喜欢