(6)Flask项目之会员注册页面

一、添加注册页面的路由

修改app/home/views.py内容，追加注册("/regist/")页面的路由：

 # coding:utf8
 from . import home
 from flask import render_template, redirect, url_for

 @home.route("/")
 def index():
     return render_template("home/index.html")

 @home.route("/login/")
 def login():
     return render_template("home/login.html")

 @home.route("/logout/")
 def logout():
     return redirect(url_for("home.login"))

 @home.route("/regist/")
 def regist():
     return render_template("home/register.html")

二、创建注册页

创建app/templates/home/register.html文件，内容：

 {% extends "home/home.html" %}

 {% block content %}
 <div class="row">
     <div class="col-md-4 col-md-offset-4">
         <div class="panel panel-success">
             <div class="panel-heading">
                 <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;会员注册</h3>
             </div>
             <div class="panel-body">
                 <form role="form">
                     <fieldset>
                         <div class="form-group">
                             <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
                             <input id="input_name" class="form-control input-lg" placeholder="昵称" name="name"
                                    type="text" autofocus>
                         </div>
                         <div class="col-md-12" id="error_name"></div>
                         <div class="form-group">
                             <label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
                             <input id="input_email" class="form-control input-lg" placeholder="邮箱" name="email"
                                    type="email" autofocus>
                         </div>
                         <div class="col-md-12" id="error_email"></div>
                         <div class="form-group">
                             <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
                             <input id="input_phone" class="form-control input-lg" placeholder="手机" name="phone"
                                    type="text" autofocus>
                         </div>
                         <div class="col-md-12" id="error_phone"></div>
                         <div class="form-group">
                             <label for="input_password"><span class="glyphicon glyphicon-lock"></span>&nbsp;密码</label>
                             <input id="input_password" class="form-control input-lg" placeholder="密码" name="password"
                                    type="password" value="">
                         </div>
                         <div class="col-md-12" id="error_password"></div>
                         <div class="form-group">
                             <label for="input_repassword"><span
                                     class="glyphicon glyphicon-lock"></span>&nbsp;确认密码</label>
                             <input id="input_repassword" class="form-control input-lg" placeholder="确认密码"
                                    name="repassword" type="password" value="">
                         </div>
                         <div class="col-md-12" id="error_repassword"></div>
                         <a href="user.html" class="btn btn-lg btn-success btn-block">注册</a>
                     </fieldset>
                 </form>
             </div>
         </div>
     </div>
 </div>
 {% endblock %}

三、修改首页导航链接

修改app/templates/home/home.html页面导航中的注册按钮的URL：

四、运行查看注册页面的效果

运行manage.py，并在浏览器访问http://127.0.0.1:5000/regist/

尝试点击一下导航中的注册按钮，会跳转到注册页。

【结束】