django搭建一个个人博客（Python全栈开发日记）第三天：登录注册_django搭建博客笔记--登录注册功能实现-CSDN博客

本文链接：https://blog.csdn.net/qq_62775581/article/details/138357486

1.将index.html进行模块化

<!DOCTYPE html>
{% load my_tag %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %}
           <title>首页</title>
    {% endblock %}

    <link rel="stylesheet" href="../static/my/css/reset.css">
    <link rel="stylesheet" href="../static/my/css/base.css">
    {% block  css %}
            <link rel="stylesheet" href="../static/my/css/index.css">
    {% endblock %}
    <link rel="stylesheet" href="../static/elementui/theme-chalk/index.css">
    <link rel="stylesheet" href="../static/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="app">
    <nav class="flex">
        <div class="left">
            <a href="/">首页</a>
            <a href="#">其他</a>
            <a href="#">其他</a>
            <a href="#">其他</a>
            <a href="#">其他</a>
            <a href="#">其他</a>
        </div>
        <div class="right">
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
    </nav>
{% block header %}
{% banner %}
{% endblock %}
{% block main %}
<main class="flex">
        {% block content %}
    <div class="main flex">


    <div class="left">
        <div class="card">
            <div class="title">
                精选文章
            </div>
            <div class="body">
                内容
            </div>
        </div>
    </div>
    <div class="right">
        <div class="card">


            <div class="title">
                独家广告
            </div>
            <div class="body">
                内容
            </div>
        </div>
        <div class="card">


            <div class="title">
                标签云
            </div>
            <div class="body">
                内容
            </div>
        </div>
    </div>
    </div>
        {% endblock %}
</main>
{% endblock %}
<footer class="flex">
    <div class="left center">
        <p>建站日期：2024-04-29</p>
    </div>
    <div class="right center">
        <p>联系我吧</p>
    </div>

</footer>
</div>
{% block all_js %}
    <script src="../static/jquery/jquery-3.5.1.min.js"></script>
    <script src="../static/vue/vue.js"></script>
    <script src="../static/elementui/index.js"></script>
    <script src="../static/axios/axios.min.js"></script>
    <script>
    var vue = new Vue({
        el:'#app',
        data:{}
    })
    </script>
<script>
function init_banner() {
    let banner = $('#banner')
    let img_list = banner.children()
    let len = img_list.length
    // 先判断个数，超过1个以上才设置定时器
    // 为了精简写法，将这个banner轮播抽离为一个函数
    if (len <= 1) return
    // img是超过1个以上的

    // 设置一个index
    let index = 0;
    // 获取轮播时间，如果没有就默认6秒  注意时间转换
    let time = Number(banner.attr('banner_time')) || 6
    // 开启定时器
    setInterval(() => {
        // 先++
        index++
        // 判读阈值
        if (index >= len) {
            index = 0
        }
        console.log(index)
        // 先全部隐藏
        img_list.css({opacity: 0})
        // 对应的出现  这个时候要用js的写法了
        img_list[index].style.opacity = 1

    }, time * 1000)

}
// 执行这个方法
init_banner()
{% block js %}

{% endblock %}

</script>
{% endblock %}
</body>
</html>

2.登录界面

{% extends 'index.html' %}

{% block title %}
    <title>用户登录</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="../static/my/css/login.css">
{% endblock %}

{% block header %}

{% endblock %}
{% block content %}
    <div class="login_form">
        <h2 class="title">用户登录</h2>
        <label for="login_name">请输入用户名</label>
        <div class="row">
                <el-input id="login_name" placeholder="请输入用户名"></el-input>
        </div>
            <label for="login_pwd">请输入密码</label>
        <div class="row">
                <el-input id="login_pwd" placeholder="请输入密码"></el-input>
        </div>
        <label for="login_code">请输入验证码</label>
        <div class="row code">
                <el-input id="login_code" placeholder="请输入验证码"></el-input>
                <div class="code_img">

                </div>
        </div>
        <div class="row pwd_info">
            <el-checkbox>记住密码</el-checkbox>
            <a href="javascript:void (0);">忘记密码</a>
        </div>
        <div class="row">
              <el-button type="primary">登录</el-button>
        </div>



    </div>
{% endblock %}

3.登录界面的样式


nav {
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  position: relative;

  a {
    color: #333333;
  }
}

main {
  margin-top: inherit;
  min-height: 627px;
  align-items: center;
  justify-content: center;
}

.login_form {
  width: 600px;
  min-height: 400px;
  background-color: white;
  border-radius: 5px;
  padding: 40px 80px;

  .title {
    margin-bottom: 20px;
    text-align: center;
    font-size: 32px;
    color: #409eff;
  }

  > label {
    margin-bottom: 5px;
    display: inline-block;
    color: #555555;
    font-size: 14px;
    cursor: pointer;
  }

  .row {
    margin-bottom: 10px;
  }

  .code {
    display: flex;
    justify-content: space-between;

    .el-input {
      width: 52%;
    }

    .code_img, > img {
      width: 200px;
      height: 40px;
      border-radius: 5px;
      cursor: pointer;
      background-color: #145eaa;
      border: 1px solid #f0eeee;
      overflow: hidden;

      &::before {
        content: '获取验证码';
        color: white;
        height: 100%;
        font-size: 14px;
        justify-content: center;
        align-items: center;
        display: flex;
        letter-spacing: 4px;
      }
    }
  }


  input {
    text-indent: inherit;
  }

  .pwd_info {
    display: flex;
    justify-content: space-between;
    width: 100%;


    > a {
      font-size: 14px;
      color: #555555;
    }
  }

  .login_btn {
    width: 100%;
  }
}v

4.注册界面

{% extends 'login.html' %}

{% block title %}
    <title>用户注册</title>
{% endblock %}
{% block sing_title %}
    <h2 class="title" style="color: #FC5531">用户注册 </h2>
{% endblock %}
{% block sing %}
                <label for="login_pwd">请输入确认密码</label>
        <div class="row">
                <el-input id="login_pwd" placeholder="请输入确认密码"></el-input>
        </div>
{% endblock %}

        {% block sign_btn %}
            <div class="row">
              <el-button type="danger">登录</el-button>
            </div>
        {% endblock %}

5.图片验证码

1>进行库安装

pip install pillow

2> 编写生成图片验证码的函数

import os
import random
import string
from io import BytesIO
from PIL import Image,ImageDraw, ImageFont
# 随机颜色
def random_color():
    return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
def random_code():
    # 生成一个  200px*40px  背景色是白色 的图片
    width=200
    height=40
    img = Image.new('RGB', (200, 40), color=(255, 255, 255))
    # 生成一个和图片同大小的画布
    draw = ImageDraw.Draw(img)
    # 需要定义文本的字体， 字体大小
    font_path = os.path.join(os.path.dirname(__file__), 'font','HanChengQingFengYue.ttf')
    font = ImageFont.truetype(font=font_path, size=32)
    # 所有的数字+字母
    str_all = string.digits + string.ascii_letters
    valid_code = ''
    # 开始的坐标， 文字内容， 文字颜色，字体
    for i in range(4):
        random_char = random.choice(str_all)
        draw.text((i * 40 + 20, 10), random_char, (0, 0, 0), font=font)
        valid_code += random_char
    # 随机噪点
    for i in range(50):
        # 点的坐标和点的填充颜色
        x, y = random.randint(0, width), random.randint(0, height)
        draw.point((x, y), fill=random_color())
        # 随机圆弧
        draw.arc((x, y, x + 4, y + 4), 0, 90, fill=random_color())

    # 随机噪线
    for i in range(10):
        x1, y1 = random.randint(0, width), random.randint(0, height)
        x2, y2 = random.randint(0, width), random.randint(0, height)
        draw.line((x1, y1, x2, y2), fill=random_color())
    # 保存图片  默认是当前路径
    # 创建一个内存句柄
    f = BytesIO()
    # 将图片保存到内存句柄中
    img.save(f, "PNG")
    # 读取内存句柄
    data = f.getvalue()
    return (data, valid_code)  # 返回图片的数据，验证码数值

if __name__=="__main__":
    data,vaild_code=random_code()
    print(vaild_code)

并为其配置好路由，令其可以生成在前端，如：