将登录和注册需要的共性标签抽离出来做父模板

将css改名为base

base模板

{% from 'common/_macros.html' import static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <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>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.11.0/js/md5.min.js"></script>
    <script src="{{ static('common/param.js') }}"></script>
    <script src="{{ static("common/ajax.js") }}"></script>
    <link rel="stylesheet" href="{{ static("common/sweetalert/sweetalert.css") }}">
    <script src="{{ static("common/sweetalert/sweetalert.min.js") }}"></script>
    <script src="{{ static("common/sweetalert/xtalert.js") }}"></script>
    <link href="{{ static('front/css/front_signbase.css') }}" rel="stylesheet">
    {% block head %}{% endblock %}
</head>
<body>
<div class="outer-box">
    <div class="logo-box">
        <a href="/"><img src="{{ static('common/images/logo.png') }}" alt=""></a>
    </div>
    <h2 class="page-title">{% block h2_block %}{% endblock %}</h2>
    <div class="sign-box">
        {% block signbox %}{% endblock %}
    </div>
    <span style="display: none" id="referrer-span">{{ referrer }}</span>
</div>
</body>
</html>

注册页

{% extends 'front/front_sign_base.html' %}
{% from 'common/_macros.html' import static %}

{% block title %}
    注册
{% endblock %}

{% block head %}
    <script src="{{ static('front/js/front_singup.js') }}"></script>
{% endblock %}

{% block h2_block %}
    账号注册
{% endblock %}

{% block signbox %}
    <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-info">发送验证码</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 captcha-addon"><img id="captcha-img" class="captcha-img" src="{{ url_for('common.graph_captcha') }}" alt=""></span>
            </div>
        </div>
        <div class="form-group">
            <button id="submit-btn" class="btn btn-warning btn-block">立即注册</button>
        </div>
{% endblock %}

访问，没问题

登录页

{% extends 'front/front_sign_base.html' %}
{% from 'common/_macros.html' import static %}

{% block title %}
    登录
{% endblock %}

{% block head %}
    <script src="{{ static('front/js/front_singup.js') }}"></script>
{% endblock %}

{% block h2_block %}
    账号登录
{% endblock %}

{% block signbox %}
    <div class="form-group">
        <input type="text" class="form-control" name="telephone" placeholder="手机号码">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" name="password" placeholder="密码">
    </div>
    <div class="checkbox">
        <label><input type="checkbox" name="remember" value="1">记住我</label>
    </div>
    <div class="form-group">
        <button id="submit-btn" class="btn btn-warning btn-block">立即登录</button>
    </div>
    <div class="form-group">
        <a href="{{ url_for('front.signup') }}">点击注册</a>
        <a href="#" style="float: right">找回密码</a>
    </div>
{% endblock %}

视图

class SigninView(views.MethodView):
    def get(self):
        return render_template('front/front_signin.html')

    def post(self):
        pass

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

一百二十二：CMS系统之页面抽离和登录页面的更多相关文章

  1. 一百二十：CMS系统之注册功能前后端逻辑

    给提交按钮加一个id,方便写js js //发送ajax请求注册请求$(function () { $('#submit-btn').click(function (event) { event.pr ...

  2. 一百三十：CMS系统之七牛js和python的SDK使用示例

    1.安装: pip install qiniu 2.编写获取uptoken的接口 @app.route('/uptoken/')def uptoken(): access_key = '' secre ...

  3. Bootstrap <基础二十二>超大屏幕（Jumbotron）

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  4. WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇]

    原文:WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇] 在[上篇]中,我们分别站在消息交换和编程的角度介绍了SOAP Fault和FaultException异常.在服务执行过 ...

  5. VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池

    VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池 在上一节我们创建了完整克隆的自动专有桌面池,在创建过程比较缓慢,这次我们将学习创建Vi ...

  6. 备忘录模式 Memento 快照模式 标记Token模式 行为型 设计模式（二十二）

    备忘录模式 Memento   沿着脚印,走过你来时的路,回到原点.     苦海翻起爱恨   在世间难逃避命运   相亲竟不可接近   或我应该相信是缘份   一首<一生所爱>触动了多少 ...

  7. JAVA基础知识总结：一到二十二全部总结

    >一: 一.软件开发的常识 1.什么是软件? 一系列按照特定顺序组织起来的计算机数据或者指令 常见的软件: 系统软件:Windows\Mac OS \Linux 应用软件:QQ,一系列的播放器( ...

  8. 微信小程序把玩（二十二）action-sheet组件

    原文:微信小程序把玩(二十二)action-sheet组件 action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-s ...

  9. Alink漫谈(二十二) ：源码分析之聚类评估

    Alink漫谈(二十二) :源码分析之聚类评估 目录 Alink漫谈(二十二) :源码分析之聚类评估 0x00 摘要 0x01 背景概念 1.1 什么是聚类 1.2 聚类分析的方法 1.3 聚类评估 ...

随机推荐

  1. Linux--磁盘检查简单介绍

    系统莫名其妙的掉电或磁盘发生问题非常可能导致文件系统的错乱,文件系统若发生错乱,可以使用fsck(file system check)命令进行检查. 使用权限:root用户 选项和参数: -a:检测到 ...

  2. 用union 和 struct 位域操作

    很久没有用C 语言中的 union 和 struct 位域操作了. 最近用了一下(当然,我承认是从stackoverflow 上抄的) 需求是这样的,已知一个 LPARAM 整数 3866625 ,求 ...

  3. flyio 的请求封装

    1.安装flyio.js npm install flyio --save-dev 2.在util创建一个fly.js用于封装 import Vue from 'vue' var Fly=requir ...

  4. mysql 主从复制不一致，不停库不锁表恢复主从同步

    注意: 进行此操作时,确认在之前已经开启了MySQL的bin-log日志,如果没有则无法实现 为了安全考虑,我们授权一个用户进行数据备份: [root@7con ] mysql -uroot -p m ...

  5. THUWC2020 游记

    不知道标题该叫什么,那就叫游记吧.反正是来玩的. CSP-S 排到我省三十几名,也不知怎么就过了 THU 的初审. Day0 到了宾馆.和 cy 划了一晚上. 发现自己不会做这次月考数学题,丢人啊丢人 ...

  6. 第二章 Python数据导入

    数据导入 数据存储的两个地方: 文件 CSV.Excel.TXT(学习层面) 数据库(公司实战层面) Mysql.Access.SQL Server 导入CSV文件 CSV文件第一行是列名,第二行到最 ...

  7. 安装mongodb-window10版

    第一.下载mongodb 官方地址:https://www.mongodb.com/ 第二步mongodb安装 运行mongodb-win32-x86_64-2008plus-ssl-v3.4-lat ...

  8. 关于kafka定期清理日志后再消费报错kafka.common.OffsetOutOfRangeException的解决

    环境: kafka  0.10 spark  2.1.0 zookeeper  3.4.5-cdh5.14.0 公司阿里云测试机,十月一放假前,没有在继续消费,假期过后回来再使用spark strea ...

  9. 丰桥运单打印windows/linux环境安装(原)

    Linux ①linux下安装jdk1.8,执行命令:yum -y install java ②创建文件夹sf-service将csim_waybill_print_service_V1.0.3.ja ...

  10. java.util.Date和java.sql.Date的区别和相互转化 （转）

    java.util.Date和java.sql.Date的区别及应用   java.util.Date 就是在除了SQL语句的情况下面使用 java.sql.Date 是针对SQL语句使用的,它只包含 ...