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

将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. .NET SignalR中长连接与HUB连接的使用方式以及区别

    1 using Microsoft.AspNet.SignalR; 2 using System; 3 using System.Collections.Generic; 4 using System ...

  2. linux-2.6.38 input子系统（简析）

    一.输入子系统简介 引入输入子系统这种机制可以对不同的输入设备进行管理.各种输入设备如:鼠标.键盘.触摸屏等有一套相同的处理机制,输入子系统将其共性提取出来, 对于驱动开发人员只用实现其差异即可,实现 ...

  3. CentOS7 字体安装卸载

    CentOS7 默认安装有 Fonts 程序, 所以能直接双击打开字体文件, 并且可以直接点击上图的 Install 按钮安装字体.采用这种安装方法,字体会被安装在 ~/.local/share/fo ...

  4. python 中的GIL （全局解释器锁）详解

    1.GIL是什么? GIL全称Global Interpreter Lock,即全局解释器锁. 作用就是,限制多线程同时执行,保证同一时间内只有一个线程在执行. GIL并不是Python的特性,它是在 ...

  5. JDK的收费问题

    关于JDK是否收费,我也有过疑问,查了一些资料,就在这里做一个简要的说明. 首先要明白JDK的发布模型.两年多以前,2017年9月21日,伴随着JDK9的发布,JDK就开启了新的发布模式(如下图所示) ...

  6. 用cmd 如何输入命令，进入文件夹

    用cmd 如何输入命令 进入文件夹 盘符: 例如想进入D盘 d: cd 进入到当前盘某个目录.cd \ 进入当前盘根目录cd \windows 进入到当前盘Windows目录cd.. 退出到上一级目录 ...

  7. Zabbix Web 中文字体显示问题

  8. C# 数组（5） 持续更新

    同一类型和不同类型的多个对象 使用同一类型的多个对象,使用集合和数组. 使用不同类型的多个对象,使用Tuple(元组). 初始化数组 ]; myArray 存放在栈中,而 myArray 的内容 放在 ...

  9. NodeList类数组对象: HTMLCollection , NamedNodeMap，两套API（childNodes , children）

    快捷键:leishuzuduixiang(类数组对象)  bianlijiedian(遍历节点)  jiedian(节点)  htmlcollection , namednodemap , nodel ...

  10. toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

    toggle([speed],[easing],[fn]) 概述 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为 ...