（七）手把手带你搭建精美简洁的个人时间管理网站—实现登录与注册的前端代码【源码】

2023/6/5 21:48:04

🌟所属专栏：献给榕榕
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该专栏系为女友准备的，里面会不定时发一些讨好她的技术作品，感兴趣的小伙伴可以关注一下~
👉文章简介：登录注册页面的前端代码实现

👉系列文章

（一）手把手带你搭建精美简洁的个人时间管理网站（初步简略计划）_rchjr的博客-CSDN博客

（二）手把手带你搭建精美简洁的个人时间管理网站—项目准备_rchjr的博客-CSDN博客

（三）手把手带你搭建精美简洁的个人时间管理网站—Git项目管理_rchjr的博客-CSDN博客

（四）手把手带你搭建精美简洁的个人时间管理网站—相关产品调研_rchjr的博客-CSDN博客

（五）手把手带你搭建精美简洁的个人时间管理网站—基于Axure的首页原型设计_rchjr的博客-CSDN博客

（六）手把手带你搭建精美简洁的个人时间管理网站—首页的前端实现【源码】_rchjr的博客-CSDN博客

🔥前言回顾

上篇文章中我们实现了首页前端的实现，这篇文章我们继续完成登录与注册界面的原型设计和前端实现。

同时回顾一下上期完成时的项目文件夹

再看看这期完成预计的项目文件夹

是的，就增加了3个文件，两个前端html文件和一个css文件（因为可以登录与注册的css可以通用）。那么下面就让我们从原型设计开始吧。

🔥原型设计

可以看到在顶部导航栏以及最后的版权部分我们都是沿用的首页的，所以需要设计的就是中间的部分，这里我采用左边一张图片加文字说明，右边登录或者注册的方式。

这里原型具体的设计细节我就不讲了，很简单，就是一张图片，几个标题，几个输入框和一个确定按钮就可以搞定。那么接下来看前端实现。

🔥前端实现

前端代码我们和首页一样，利用jinja2语法继承母版。然后在中间添加我们的登录或注册部分。

可以看到分为两个盒子，一个是左边的show，另一个是右边的login-box。然后里面分别用几个小盒子装我们的标题、logo、输入框等。

下面的是登录的html

{% extends 'base.html' %}

{% block title %}
    登录
{% endblock %}
{% block body %}
    <div class="container">
        <div class="show">
            <div class="title">
                <img src="../static/images/logo.png" alt="">
                <h1>TimeManager</h1>
            </div>
            <p class="intro">
                A time management application <br>
                that helps you record, manage, visualize, <br>
                and statistically analyze
            </p>
        </div>
        <div class="login-box">
            <form action="" class="login-form">
                <h1>
                    登录<br>
                    <span class="small">开启你的时间管理之旅</span>
                </h1>
                <span class="small">账号</span><br>
                <input type="text"><br>
                <span class="small">密码</span><br>
                <input type="password"><br>
                <input class="confirm" type="submit" value="确定">


                <p>没有账号？<a href="#">点击注册</a></p>
            </form>
        </div>
    </div>
{% endblock %}

再看看css部分，可以结合上面的h

tml来看，我就不做过多介绍了，懂的都懂~

/* 中间的通栏 */
.container {
    margin-top: 100px;
    width: 100%;
    height: 750px;
    background-image: linear-gradient(to bottom, #8e8e8e, #4e4e4e);
}

/* 左边展示部分 */
.show {
    margin-left: 100px;
    float: left;
    height: 750px;
    width: 685px;
    background: url('../images/行走的黑白车.jpg') no-repeat rgba(255, 255, 255, 0.2);
    background-size: 685px 750px;

}

.show .title {
    margin: 223px auto auto;
    width: 300px;
    height: 50px;
}

.show .title img {
    float: left;
    height: 50px;
    width: 54px;
}

.show .title h1 {
    position: relative;
    top: 7px;
    left: 10px;
    font: oblique 32px 'Times New Roman';
}

.show .intro {
    text-align: center;
    margin-top: 24px;
    font: 700 oblique 20px 'Times New Roman';
    color: rgb(244, 240, 240);
}

/* 右边登录部分 */
.login-box {
    margin-right: 100px;
    margin-left: 50px;
    float: right;
    height: 750px;
    width: 750px;
}

.login-form {
    margin-top: 124px;
    margin-left: 104px;
    width: 500px;
    height: 440px;
    background: transparent;
}

.login-box .login-form h1 {
    font: 32px '楷体';
    color: #fff;
    margin-bottom: 40px;
}

.login-box .login-form .small {
    font: 24px '楷体';
    color: #fff;
}

.login-box .login-form input {
    margin-bottom: 25px;
    width: 380px;
    height: 35px;
    outline: none;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #fff;
}


.login-box .login-form .confirm {
    width: 140px;
    height: 40px;
    background-color: #525454;
    color: #fff;
    font: 13px "楷体";
    border: none;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

.login-form a {
    color: #fff;
    font-family: "楷体", "Rage Italic";
    text-decoration: underline;
}

注册页面的html如下（css是同一个）

{% extends 'base.html' %}

{% block title %}
    登录
{% endblock %}
{% block body %}
    <div class="container">
        <div class="show">
            <div class="title">
                <img src="../static/images/logo.png" alt="">
                <h1>TimeManager</h1>
            </div>
            <p class="intro">
                A time management application <br>
                that helps you record, manage, visualize, <br>
                and statistically analyze
            </p>
        </div>
        <div class="login-box">
            <form action="" class="login-form">
                <h1>
                    注册<br>
                    <span class="small">开启你的时间管理之旅</span>
                </h1>
                <span class="small">账号</span><br>
                <input type="text"><br>
                <span class="small">密码</span><br>
                <input type="password"><br>
                <span class="small">密码</span><br>
                <input type="password"><br>
                <input class="confirm" type="submit" value="确定">

            </form>
        </div>
    </div>
{% endblock %}

🔥效果展示

下面是效果展示

最后添加到github上（目前用cmd推送有网络问题，选择了本地上传的方式），另外给出本项目的git地址：

GitHub - Messimeimei/TimeManager: A personal website of timemanagingA personal website of timemanaging. Contribute to Messimeimei/TimeManager development by creating an account on GitHub.https://github.com/Messimeimei/TimeManager