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 %}

BBS论坛（十五）的更多相关文章

  1. BBS论坛（五）

    5.1.cms后台修改密码功能完成 (1)新建app/forms.py # app/forms.py from wtforms import Form class BaseForm(Form): de ...

  2. centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装，只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节课

    centos  lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress  安装phpmyadmin  定时备份mysql两种方法  第二十五节 ...

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

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

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

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

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

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

  6. PS：改装店收的是友情价，包安装十五个毛主席。

    糟糠之妻下堂,娇俏公主上位--更换宝马三系座椅作业 - 切诺基 Jeep家族 越野e族论坛 越野/SUV/旅行/赛事/改装/互动中心         PS:改装店收的是友情价,包安装十五个毛主席.

  7. centos shell脚本编程1 正则 shell脚本结构 read命令 date命令的用法 shell中的逻辑判断 if 判断文件、目录属性 shell数组简单用法 $( ) 和${ } 和$(( )) 与 sh -n sh -x sh -v 第三十五节课

    centos   shell脚本编程1 正则  shell脚本结构  read命令  date命令的用法  shell中的逻辑判断  if 判断文件.目录属性  shell数组简单用法 $( ) 和$ ...

  8. centos Linux系统日常管理2 tcpdump,tshark,selinux,strings命令, iptables ,crontab,TCP,UDP,ICMP,FTP网络知识 第十五节课

    centos  Linux系统日常管理2  tcpdump,tshark,selinux,strings命令, iptables ,crontab,TCP,UDP,ICMP,FTP网络知识 第十五节课 ...

  9. 开源BBS论坛软件推荐

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

  10. BBS论坛 home主页与个人站点主页

    五.Home主页与个人站点主页 home首页代码: # views.py视图函数部分代码def home(request): # 将数据库中的所有文章展示到主页 article_list = mode ...

随机推荐

  1. Django----博客文章数据返回

    步骤1:新建视图函数 from django.shortcuts import render from django.http import HttpResponse; from blog.model ...

  2. Android进阶：七、Retrofit2.0原理解析之最简流程【上】

    retrofit 已经流行很久了,它是Square开源的一款优秀的网络框架,这个框架对okhttp进行了封装,让我们使用okhttp做网路请求更加简单.但是光学会使用只是让我们多了一个技能,学习其源码 ...

  3. 2019年5月1日起安卓应用应基于API 26开发，那么API等级是啥？

    2019年5月1日起安卓应用应基于API 26开发,那么API等级是啥? 转 https://www.ithome.com/html/android/372234.htm   据泰尔终端实验室公众微信 ...

  4. vue 调用摄像头拍照以及获取相片本地路径(实测有效)

    在学习这个的时候有一点前提:这是针对手机功能的,所以最重要的是要用手机进行实时调试 包含图片的增加和删除功能 <template> <div> <!--照片区域--> ...

  5. setParameter不支持传统的按位置查询方式

    setParameter不支持传统的按位置查询方式 String hql = "from Customer as c where c.cust_id = ?"; List<C ...

  6. BZOJ.4137.[FJOI2015]火星商店问题(线段树分治 可持久化Trie)

    BZOJ 洛谷 一直觉得自己非常zz呢.现在看来是真的=-= 注意题意描述有点问题,可以看BZOJ/洛谷讨论. 每个询问有两个限制区间,一是时间限制\([t-d+1,t]\),二是物品限制\([L,R ...

  7. linux-centos基本使用（一）

    1. 基本配置 1.常用软件安装 yum install -y bash-completion vim lrzsz wget expect net-tools nc nmap tree dos2uni ...

  8. Python列表，字典和字符串操作

    列表: 列表:list, 也叫数组,表现[].特点:有角标,元素可以重复,有序的元素 例子:stus = ['王志华','乔美玲','乔美玲','王文文','feixiang']#中括号,这就是一个l ...

  9. android BLE Peripheral 模拟 ibeacon 发出ble 广播

    Android对外模模式(peripheral)的支持: 从Android 5.0+开始才支持. api level >= 21 所以5.0 之前设备,是不能向外发送广播的. Android中心 ...

  10. docker之使用System.Drawing生成图片缺少Gdiplus.dll错误

    1.在docker 上找到并运行需要System.Drawing的镜像 然后退出执行另一语句 docker run -it container01 进入镜像以方便安装gdiplus docker ex ...