15-----BBS论坛

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 %}
View Code
复制代码

（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;
}
View Code
复制代码

（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 %}
复制代码

 

posted @   王竹笙  阅读(289)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App
点击右上角即可分享
微信分享提示
SQL AI 助手