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

将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. Django Setting文件配置和简单的创建数据库字段

    Django Settings文件配置 静态文件配置 STATIC_URL = '/static/' # 静态文件配置 STATICFILES_DIRS = [ os.path.join(BASE_D ...

  2. miguowangluozhan

    加紧备战 美国欲将全球拖入网络战争 人民日报 06-1405:01 去年,美国国防部发布的网络空间战略强调了“前沿防御(Defense forward)”理念.这被外界解读为美国军方将在他国而非美国本 ...

  3. ACM-ICPC 2019南昌网络赛I题 Yukino With Subinterval

    ACM-ICPC 2019南昌网络赛I题 Yukino With Subinterval 题目大意:给一个长度为n,值域为[1, n]的序列{a},要求支持m次操作: 单点修改 1 pos val 询 ...

  4. bug-- java.lang.RuntimeException: Type “Klass*"

      使用jinfo查看jvm进程id为27523的信息   [java@xftest0 ~]$ jinfo 27523 Attaching to process ID 27523, please wa ...

  5. ABP 集成 nswag 到 VUE 项目， 自动生成操作类代码

    记录日期: 2019-9-22 23:12:39 原文链接:https://www.cnblogs.com/Qbit/p/11569906.html 集成记录: npm install nswag - ...

  6. 修改 SQL SERVER 2008 編輯前200筆 資料表問題？ 转载自：http://www.dotblogs.com.tw/easy1201/archive/2008/12/04/6179.aspx

    小弟前幾天 下載安裝了 SQL SERVER 2008 感覺系統效能還不錯 但是要編輯 資料表卻出現 很苦惱 但經過一番波折 終於了解如何改善 先執行SQL Server Management Stu ...

  7. python的内置函数（一）

    1.数学计算函数 abs(x) 求绝对值1.参数可以是整型,也可以是复数2.若参数是复数,则返回复数的模 complex([real[, imag]]) 创建一个复数 divmod(a, b) 分别取 ...

  8. Visual Studio 查看宏展开

    使用Visual Studio 开发c++项目,中遇到项目中宏定义套宏定义,难以阅读源代码的时候. 可在 项目-->右键-->配置属性-->c/c++ -->预处理器 --&g ...

  9. P5057 [CQOI2006]简单题 前缀异或差分/树状数组

    好思路,好思路... 思路:前缀异或差分 提交:1次 题解:区间修改,单点查询,树状数组,如思路$qwq$ #include<cstdio> #include<iostream> ...

  10. 收藏一个RMQ模板

    int a[1100]; int dp[maxn][20]; void rmq_init(){ for(int i=0;i<n;i++) dp[i][0]=a[i]; for(int j=1;( ...