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

将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. 设计模式之Template Method

    1.设计模式的使用场景 模板方法模式(Template Method) 解释一下模板方法模式,就是指:一个抽象类中,有一个主方法,再定义1…n个方法,可以是抽象的,也可以是实际的方法,定义一个类,继承 ...

  2. Djang简介

    一:MVC简介 MVC的全拼为Model-View-Controller,最早由TrygveReenskaug在1978年提出,是施乐帕罗奥多研究中心(Xerox PARC)在20世纪80年代为程序语 ...

  3. vscode 右键打开

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\VSCode] @="Open with Code" ...

  4. 自动化测试环境搭建（appium+selenium+python）

    一.需要安装的软件(根据你所需要的版本安装即可,不一定必须按照小编的版本来) JDK:1.8.0_171 Python:3.7.1 node.js:10.13.0 android-sdk_r24.4. ...

  5. Web SQL与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  6. C#原子操作(Interlocked.Decrement和Interlocked.Increment)

    一.概念 在多线程环境中,不会被线程调度机制打断的操作:这种操作一旦开始,就一直运行到结束,中间不会有任何 context switch (切换到另一个线程). 二.类 System.Threadin ...

  7. HTML5——5 HTML5 SVG

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. net core 3 使用 autofac

    参考官方:https://docs.autofac.org/en/latest/integration/aspnetcore.html#startup-class 有一些变动,现在暂时还没用net c ...

  9. nextUntil([exp|ele][,fil]) 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

    nextUntil([exp|ele][,fil]) 概述 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止. 如果提供的jQuery代表了一组DOM元素,.nextUntil()方法也能让 ...

  10. PHP mysqli_ping() 函数

    定义和用法 mysqli_ping() 函数进行一个服务器连接,如果连接已断开则尝试重新连接. <?php // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con= ...