BBS论坛（十五）

15.1.登录界面完成

（1）front/signbase.html

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{% block title %}{% endblock %}</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>

    <script src="{{ static('common/zlajax.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/zlalert.js") }}"></script>

    <script src="{{ static('common/zlparam.js') }}"></script>

    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

     <link rel="stylesheet" href="{{ static('front/css/front_signbase.css') }}">

    {% block head %}

    {% endblock %}

</head>

<body>

    <div class="outer-box">

        <div class="logo-box">

            <a href="/">

                <img src="{{ static('common/images/logo.jpg') }}" 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="return-to-span">{{ return_to }}</span>

    </div>

</body>

</html>

（2）front/signup

{% extends 'front/signbase.html' %}

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

{% block title %}

    仙剑论坛注册

{% endblock %}

{% block head %}

    <script src="{{ static('front/js/front_signup.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-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 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 %}

（3）front/css/front_signbase.css

把之前signup中的css放到公共的地方，登录页面也需要

body {

    background: #f3f3f3;

}

.outer-box {

    width: 854px;

    background: #fff;

    margin: 0 auto;

    overflow: hidden;

}

.logo-box {

    text-align: center;

    padding-top: 40px;

}

.logo-box img {

    width: 60px;

    height: 60px;

}

.page-title {

    text-align: center;

}

.sign-box {

    width: 300px;

    margin: 0 auto;

    padding-top: 50px;

}

.captcha-addon {

    padding:;

    overflow: hidden;

}

.captcha-img {

    width: 94px;

    height: 32px;

    cursor: pointer;

}

（4）front/signin.html

{% extends 'front/signbase.html' %}

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

{% block title %}

仙剑论坛登录

{% endblock %}

{% block head %}

    <style>

    .resetpwd-link{

        float:right;

    }

    </style>

{% endblock %}

{% block h2_block %}

仙剑论坛账号登录

{% endblock %}

{% block signbox %}

    <div class="form-group">

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

    </div>

    <div class="form-group">

            <input class="form-control" type="password" 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') }}" class="signup-link">没有账号?立即注册</a>

        <a href="#" class="resetpwd-link">忘记密码?</a>

    </div>

{% endblock %}
15.1.登录界面完成


15-----BBS论坛的更多相关文章

  1. Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点

    开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...

  2. python 学习笔记二十 django项目bbs论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  3. Python之路,Day17 - 分分钟做个BBS论坛

    Python之路,Day17 - 分分钟做个BBS论坛   本节内容: 项目:开发一个简单的BBS论坛 需求: 整体参考"抽屉新热榜" + "虎嗅网" 实现不同 ...

  4. Django小项目简单BBS论坛

    开发一个简单的BBS论坛 项目需求: 1 整体参考"抽屉新热榜" + "虎嗅网" 2 实现不同论坛版块 3 帖子列表展示 4 帖子评论数.点赞数展示 5 在线用 ...

  5. python第一百三十天 ---简单的BBS论坛

    简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...

  6. Python开发一个简单的BBS论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  7. bbs论坛浏览器兼容性问题

    一直都是在chrome上进行调试,今天终于把bbs论坛这个项目搭建完了,进入IE.Firefox看了看 吓哭了!!! 火狐 Edge chrome 特别是加了<!DOCTYPE html> ...

  8. 开源BBS论坛软件推荐

    七款开源BBS论坛软件推荐(1) 本文介绍了七个开源的BBS论坛软件(在英文界一般叫做Forum).可能国内的朋友们比较熟悉Discuz!和PHPwind,但其实我们的选择还是很多的,而且下面介绍的这 ...

  9. LNMP环境搭建BBS论坛及伪静态

    我们在mysql备份 LNMP环境中的数据库迁移为独立的服务器的基础上搭建BBS论坛:  [root@bqh-117 ~]# mysql -uroot -p123456 Welcome to the ...

  10. Django项目 BBS论坛

    BBS论坛 一.项目表分析 二.自定义form组件 三.注册功能 四.BBS论坛 登录功能

随机推荐

  1. Python 网络爬虫 006 (编程) 解决下载（或叫：爬取）到的网页乱码问题

    解决下载(或叫:爬取)到的网页乱码问题 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 Python 的集成开发环境:PyCharm 20 ...

  2. 线程池的原理以及实现线程池的类ExecutorService中方法的使用

    1.线程池:线程池就是就像一个容器,而这个容器就是用来存放线程的,且有固定的容量. 如果没有线程池,当需要一个线程来执行任务时就需要创建一个线程,我们设创建线程的时间为t1,执行线程的时间为t2,销毁 ...

  3. Luogu 2467 [SDOI2010]地精部落

    挺有意思的题. 优质题解: https://www.luogu.org/blog/user55639/solution-p2467 题意为求长度为n,取值为$[1, n]$的波动序列的个数. 首先需要 ...

  4. Mat的迭代器使用

    如果你熟悉 C++的 STL 库,那一定了解迭代器(iterator)的使用.迭代器可以方便地遍历所有元素.Mat 也增加了迭代器的支持,以便于矩阵元素的遍历.下面的例程功能跟上一节的例程类似,但是由 ...

  5. Oracle 系统表大全

    数据字典dict总是属于Oracle用户sys的. 1.用户: select username from dba_users; 改口令 alter user spgroup identified by ...

  6. Boot Option Menu

    SATA HDD:TOSHIBA MQ02ABF100    1000G SATA HDD:SAMSUNG MZVLW512HMJP-000L2   => Invalid Partition T ...

  7. 原型模式与serializable

    写原型模式时课件上有一个实现模式是利用可串行化接口实现,然后就发现那个代码(如下),串行化接口里面没有函数,这种接口被曾为标记接口,implements这个接口后就可以对其进行各种流操作了,其实就是O ...

  8. 百度地图 JS API开发Demo01

    百度地图DEMO     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  9. Spark大数据处理 之 从WordCount看Spark大数据处理的核心机制（2）

    在上一篇文章中,我们讲了Spark大数据处理的可扩展性和负载均衡,今天要讲的是更为重点的容错处理,这涉及到Spark的应用场景和RDD的设计来源. Spark的应用场景 Spark主要针对两种场景: ...

  10. P3321 [SDOI2015]序列统计 FFT+快速幂+原根

    \(\color{#0066ff}{ 题目描述 }\) 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S.小C用这 ...