专栏首页有趣的djangoBBS论坛(十五)

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: 0;
    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 %}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django+Bootstrap+Mysql 搭建个人博客(四)

    zhang_derek
  • Django+xadmin打造在线教育平台(八)

    代码 github下载 十一、用户信息 11.1.个人信息展示  (1)新建‘usercenter-bae.html’当母板 {% load staticfi...

    zhang_derek
  • Django+Bootstrap+Mysql 搭建个人博客 (六)

    zhang_derek
  • BEM 简介

    BEM 是一种前端项目开发的方法学,由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Eleme...

    Joel
  • Jump Start Bootstrap 第3章

    在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件,B...

    Remember_Ray
  • Flask 系列之 Pagination

    首先,在我们的 todolist\forms.py 中添加事务添加对应的表单类 ThingForm,示例代码如下所示:

    py3study
  • Bootstrap基本入门大全

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT的,它简洁灵活,使得 Web 开发更加快捷。 重点的是你要理解这个框架的运行机制,了解了它是怎...

    IMWeb前端团队
  • Bootstrap基本入门大全

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT的,它简洁灵活,使得 Web 开发更加快捷。 重点的是你要理解这个框架的运行机制,了解了它是怎...

    IMWeb前端团队
  • bootstrap bootstrap-modal.js 模态对话框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • Python 技巧篇-字符串灵活处理:字符串过滤、字符串拼接,字符串切片,特殊、超长字符串的处理实例演示

    字符串简单处理的话用字符串切片很容易实现, 形如:a="Hello Python!",a[-7:]="Python!", 规则:大于等于冒号前的小于冒号后的...

    小蓝枣

扫码关注云+社区

领取腾讯云代金券