在template下创建目录front，该目录用于存放前台页面的所有模板

在front下创建登录模板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册-BBS论坛</title>

    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>

        body{

            background-color: #8CD4F5;

        }

        .page-title {

            text-align: center;

            padding-top: 50px;

        }

        .out-box{

            width: 845px;

            background-color: white;

            margin: 0 auto;

            margin-top: 50px;

        }

        .page-title {

            text-align: center;

            padding-top: 80px;

        }

        .form-box{

            padding-top: 50px;

            padding-bottom: 50px;

            width: 300px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="out-box">

        <h2 class="page-title">注册BBS论坛</h2>

        <div class="form-box">

            <div class="form-group">

                <div class="input-group">

                    <input type="text" class="form-control" name="telephone" placeholder="手机号码">

                    <span class="input-group-btn">

                        <button id="sms-captcha-btn" class="btn btn-default">发送验证码</button>

                    </span>

                </div>

            </div>

            <div class="form-group">

                <input type="text" class="form-control" name="sms_captcha" placeholder="短信验证码">

            </div>

            <div class="form-group">

                <input type="text" class="form-control" name="username" placeholder="用户名">

            </div>

            <div class="form-group">

                <input type="password" class="form-control" name="password1" placeholder="密码">

            </div>

            <div class="form-group">

                <input type="password" class="form-control" name="password2" placeholder="确认密码">

            </div>

            <div class="form-group">

                <div class="input-group">

                    <input type="text" class="form-control" name="graph_captcha" placeholder="图形验证码">

                    <span class="input-group-addon">

                        图形验证码

                    </span>

                </div>

            </div>

            <div class="form-group">

                <button class="btn btn-warning btn-block" id="submit-btn">立即注册</button>

            </div>

        </div>

    </div>

</body>

</html>

front_signup.html

在front中编写视图，编辑front.views.py

from flask import (

    Blueprint,

    views,

    render_template

)

bp = Blueprint('front', __name__)

@bp.route('/')

def index():

    return 'front index'

class SignUpViews(views.MethodView):

    def get(self):

        return render_template('front/front_signup.html')

    def post(self):

        pass

bp.add_url_rule('/signup/', view_func=SignUpViews.as_view('signup'))

访问http://127.0.0.1:5000/signup/

Flask实战第39天：完成前台注册界面的更多相关文章

  1. 一百一十三：CMS系统之前台注册界面

    html {% from 'common/_macros.html' import static %}<!DOCTYPE html><html lang="en" ...

  2. Flask实战第38天：前台模型创建

    安装shortuuid pip install shortuuid 编辑front.models.py from exts import db import shortuuid from werkze ...

  3. Flask实战-留言板-安装虚拟环境、使用包组织代码

    Flask实战 留言板 创建项目目录messageboard,从GreyLi的代码中把Pipfile和Pipfile.lock文件拷贝过来,这两个文件中定义了虚拟环境中需要安装的包的信息和位置,进入m ...

  4. WordPress添加前台注册功能

    一.添加注册表单 1.首先在当前主题的目录下新建一个php文件,命名为reg-page.php,然后将page.php中的所有代码复制到reg-page.php中: 2.删除reg-page.php开 ...

  5. HTML连载56-网易注册界面实战之全部代码

    一.今天完成了网易邮箱注册界面的全部编写,编写一个小小的网页就需要这么多时间来进行设计.测量.排版.编写.测试,才能进行使用,同时编写这个网页复习了几乎前面的所有内容,最后来一个汇总就可以了. < ...

  6. JFinal Web开发学习(五)注册界面和后端验证

    效果: 直接点击注册后 : 后端验证是可靠地,前端js验证是不可靠的.只需要在浏览器删除js验证代码即可突破js验证. 1.注册界面 在WebRoot下新建regist.jsp <%@ page ...

  7. HTML登录注册界面怎么制作？

    在没有学习CSS样式的前提下,是如何做一个简单的注册界面的. 一.表单标签(form) 首先我们先写一个<form></form>的标签,form标签属于表单标签,通常我们的登 ...

  8. iOS开发——UI进阶篇（八）pickerView简单使用,通过storyboard加载控制器，注册界面，通过xib创建控制器，控制器的view创建，导航控制器的基本使用

    一.pickerView简单使用 1.UIPickerViewDataSource 这两个方法必须实现 // 返回有多少列 - (NSInteger)numberOfComponentsInPicke ...

  9. HTML练习----注册界面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 51nod 1363 最小公倍数之和 ——欧拉函数

    给出一个n,求1-n这n个数,同n的最小公倍数的和.例如:n = 6,1,2,3,4,5,6 同6的最小公倍数分别为6,6,6,12,30,6,加在一起 = 66. 由于结果很大,输出Mod 1000 ...

  2. [BZOJ1101&BZOJ2301][POI2007]Zap [HAOI2011]Problem b|莫比乌斯反演

    对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. 我们可以令F[n]=使得n|(x,y)的数对(x,y)个数 这个很容易得到,只需要让x, ...

  3. solaris 服务器配置网络

    1. 修改配置文件 vi /etc/hostname.e1000g1  --e1000g1是硬件(网卡)的名称,不同的服务器名称不同 添加/修改:192.168.50.238              ...

  4. Django 1.10中文文档-第一个应用Part4-表单和通用视图

    本教程接Part3开始.继续网页投票应用程序,并将重点介绍简单的表单处理和精简代码. 一个简单表单 更新一下在上一个教程中编写的投票详细页面的模板polls/detail.html,让它包含一个HTM ...

  5. Intel call指令

    转载:http://blog.ftofficer.com/2010/04/n-forms-of-call-instructions/ 最近有一个需求,给你个地址,看看这个地址前面是不是一个CALL指令 ...

  6. linux中没有dos2UNIX或者UNIX2dos命令怎么解决办法

    linux中没有dos2UNIX或者UNIX2dos命令怎么解决办法 http://blog.csdn.net/w616589292/article/details/38274475 dos2unix ...

  7. iOS 真机调试报错汇总

    1. iphone is busy: processing symbol files 引起原因第一次运行真机, 会处理一些文件, 上面会有一个进度条给予显示 等100%之后再编译 2. xcode c ...

  8. [How to] 真机调试

    1.简介 真机调试介绍. 在xcode7之前需要每年99刀的代价才能活着开发者权限并能够在真机上调试,现在如果单纯的想在真机上调是就不必花这个钱了. 2.步骤 完毕.

  9. 常见的四种Content-Type类型

    application/x-www-form-urlencoded 常见的form提交 multipart/form-data 文件提交 application/json 提交json格式的数据 te ...

  10. 用淘宝镜像cnpm代替npm

    安装淘宝镜像cnpm: $ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 然后就大部分可以用cnpm来代替np ...