django5博客项目实战-用bootstrap5实现登录和注册页面

最新推荐文章于 2024-10-08 17:02:35 发布
最新推荐文章于 2024-10-08 17:02:35 发布
阅读量348 收藏 3
点赞数 1
文章标签： python django 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013342594/article/details/142737225
版权

新建一个认证的app

python manage.py startapp myauth

在templates文件夹中创建login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <link rel="stylesheet" href="{% static 'bootstrap5/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap5/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap5/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
</head>
<body>
<header class="p-3 text-bg-light border-bottom mb-3">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                <img src="{% static 'image/logo.png' %}" alt="" height="40">
            </a>

            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                <li><a href="#" class="nav-link px-2 text-secondary">首页</a></li>
                <li><a href="#" class="nav-link px-2 text-secondary">发布博客</a></li>
            </ul>

            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                <input type="search" class="form-control" placeholder="搜索..." aria-label="Search">
            </form>

            <div class="text-end">
                <button type="button" class="btn btn-outline-primary me-2">登录</button>
                <button type="button" class="btn btn-primary">注册</button>
            </div>
        </div>
    </div>
</header>
<main class="container bg-white p-3 rounded">
    <div class="m-auto" style="max-width: 330px;">
        <h1>登录</h1>
        <form class="mt-3">
            <div class="mb-3">
                <label class="form-label">邮箱</label>
                <input type="email" name="email" placeholder="请输入邮箱" class='form-control'>
            </div>
            <div class="mb-3">
                <label class="form-label">密码</label>
                <input type="password" name="password" placeholder="请输入密码" class='form-control'>
            </div>
            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" name='remember' value="1" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                    记住我
                </label>
            </div>
            <div class='mb-3'>
                <button class='btn btn-primary w-100'>登录</button>
            </div>
        </form>
    </div>
</main>
</body>
</html>

在templates文件夹中创建register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <link rel="stylesheet" href="{% static 'bootstrap5/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap5/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap5/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
</head>
<body>
<header class="p-3 text-bg-light border-bottom mb-3">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                <img src="{% static 'image/logo.png' %}" alt="" height="40">
            </a>

            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                <li><a href="#" class="nav-link px-2 text-secondary">首页</a></li>
                <li><a href="#" class="nav-link px-2 text-secondary">发布博客</a></li>
            </ul>

            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                <input type="search" class="form-control" placeholder="搜索..." aria-label="Search">
            </form>

            <div class="text-end">
                <button type="button" class="btn btn-outline-primary me-2">登录</button>
                <button type="button" class="btn btn-primary">注册</button>
            </div>
        </div>
    </div>
</header>
<main class="container bg-white p-3 rounded">
    <div class="m-auto" style="max-width: 330px;">
        <h1>请注册</h1>
        <form class="mt-3">
            <div class="mb-3">
                <label class="form-label">用户名</label>
                <input type="text" name="username" placeholder="请输入用户名" class='form-control'>
            </div>
            <div class="mb-3">
                <label class="form-label">邮箱</label>
                <input type="email" name="email" placeholder="请输入邮箱" class='form-control'>
            </div>
            <div class="mb-3">
                <label class="form-label">验证码</label>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="验证码" aria-label="Recipient's username"
                           aria-describedby="button-addon2">
                    <button class="btn btn-outline-secondary" type="button">获取验证码</button>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">密码</label>
                <input type="password" name="password" placeholder="请输入密码" class='form-control'>
            </div>
            <div class='mb-3'>
                <button class='btn btn-primary w-100'>注册</button>
            </div>
        </form>
    </div>
</main>
</body>
</html>

在myauth views.py里面创建登录和注册的视图函数

from django.shortcuts import render

def login(request):
    return render(request,'login.html')

def register(request):
    return render(request,'register.html')

在myauth里面创建urls.py

from django.urls import path
from . import views

app_name = 'myauth'

urlpatterns = [
    path('login',views.login,name='login'),
    path('register',views.register,name='register'),
]

在主urls.py中导入认证的urls

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('blog.urls')),
    path('auth/',include('myauth.urls'))
]

测试访问

http://127.0.0.1:8000/auth/login

http://127.0.0.1:8000/auth/register

繁华c
关注
17--Django-项目实战-博客开发-登录功能和首页页面搭建
摘 月
11-25 442
1、步骤 1.获取用户输入的用户名、密码、验证码 2.验证参数，先写错误的逻辑 3.保存用户信息 4.登录成功跳转首页views.py 2、验证码实现 前提：安装pillow库 路由配置：urls.py 二、登录页面搭建 步骤： 1.通过ajax和layer组件实现登录页面，登录成功跳转首页 2.验证码img标签src属性需要指定路由地址 三、首页功能实现 1、获取所有用户的文章 views.py 2、修改密码功能 步骤： 1.获取用户输入的原密码、新密码、确认密码 2.验证原密码是否正确，确认密码是否和新
Django——用户注册登录页面以及验证权限&bootstrap使用
cccxxxqq的博客
11-16 1491
首先我们拿一下bootstrap cdn <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 在templates中新建register.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
django5博客项目实战-用bootstrap5实现发布博客页面
u013342594的博客
10-07 409
创建pub_blog.js(static文件夹里面创建js文件夹)更改下博客详情页面路由以免有冲突。创建pub_blog.html。上面的代码中引入了富文本编辑器。创建发布博客的视图函数。引入富文本编辑器参考。
django5博客项目实战-用bootstrap5实现博客详情页面
u013342594的博客
10-06 271
创建一个blog_detail.html。
django5博客项目实战-用bootstrap5实现导航条
u013342594的博客
10-05 453
打开项目新建一个app blogsettings.py注册app根目录中创建templates文件夹并在setting.py中设置下templates参数。
用前端框架Bootstrap和Django实现用户注册页面
昊虹AI笔记
10-31 2840
用前端框架Bootstrap和Django实现用户注册页面
一周学会Django5 Python Web开发-Django5模型数据修改
java1234的博客
04-21 571
Django5模型数据修改
期末实训：Django+bootstrap实现登录注册和数据的增删查改
qq_59020329的博客
06-20 1728
目录一.登录注册界面的前后端逻辑（只上传了重要的代码部分）1.注册页面的验证（1）效果图（2）注册页面的前后端逻辑2.登录页面的验证（1）效果图（2）登录页面的前后端逻辑 二.主页页面1.主页页面响应式展示（1）效果图（2）页面的卡片数据渲染2.跳转添加页面和退出登录（1）效果图 （2）导航栏选项跳转三.添加卡片壁纸信息1.页面实现壁纸的添加（1）效果图（2） 添加壁纸的前后端逻辑四.编辑和删除壁纸1.更改壁纸信息（1）效果图 （2）更新页面的前后端逻辑（3）提交表单时的逻辑2.删除壁纸信息（1）效果图 （
使用Django搭建博客第二天笔记--登录注册功能实现
qq_45723275的博客
03-30 338
一、数据表结构设计 项目应用account的模型MyUser是项目中的核心数据，它与每个项目应用的模型都存在数据关联。模型MyUser继承内置模型User，在内置模型User的基础上添加新的字段，用于完善用户信息。打开项目应用account的models.py定义模型MyUser，代码如下： class MyUser(AbstractUser): name = models.CharField(verbose_name="姓名",max_length=50,default='匿名用户') i
python3.7+django+bootstrap+sqlite3 恒达科技官网实战web开发例子
11-02
在本实践项目中，"python3.7+django+bootstrap+sqlite3 恒达科技官网实战web开发例子"，我们将深入探讨如何使用这些技术构建一个功能完备的网站。Python 3.7 是一个强大而易读的编程语言，特别适合Web开发；Django是...
django项目实战一个音乐网站的实现（侧边音乐播放器）
04-17
在本项目中，我们利用Django这一强大的Python Web框架，构建了一个实际的音乐网站，它具有侧边栏的隐藏式音乐播放器功能，同时具备分页和批量处理能力，以及吸引人的界面导航设计。这个项目不需要数据库，可以直接...
python中zip()与zip(*)的用法解析
m0_51579041的博客
10-08 120
zip()与zip(*)的用法解析
Python3 解释器
Java_fenxiang的博客
10-05 538
Linux/Unix的系统上，一般默认的 python 版本为 2.x，我们可以将 python3.x 安装在/usr/local/python3目录中。安装完成后，我们可以将路径/usr/local/python3/bin添加到您的 Linux/Unix 操作系统的环境变量中，这样您就可以通过 shell 终端输...
（笔记）第三期书生·浦语大模型实战营（十一卷王场）--书生入门岛通关第2关Python 基础知识
haidizym的博客
10-02 541
学员闯关手册：https://aicarrier.feishu.cn/wiki/ZcgkwqteZi9s4ZkYr0Gcayg1n1g?课程视频：https://www.bilibili.com/video/BV1mS421X7h4/课程文档：https://github.com/InternLM/Tutorial/tree/camp3/docs/L0/Python。
Python | Leetcode Python题解之第448题找到所有数组中消失的数字
Mopes__的博客
10-01 454
Python | Leetcode Python题解之第448题找到所有数组中消失的数字
Python编写的贪吃蛇小游戏
WwLK123的博客
10-03 575
Python编写贪吃蛇小游戏。
pytorch版本和cuda版本不匹配问题
分享计算机视觉，C++，网络摄像头研发，音视频开发，嵌入式等知识。
10-06 401
发现cuda11.8支持pytorch2.0.0。
micropython中断处理程序设计-临界区
最新发布
sjh2100的博客
10-08 209
代码的临界区的示例是访问多个变量，这些变量受ISR影响。若中断在对单个变量的访问间发生，则其值将会不一致。这是一种叫作”竞态条件”的问题的实例：ISR和主程序循环争相修改变量。如上所述，若在主代码中修改了Python内置类型的实例或在ISR中访问实例，则应多加注意。执行更改的代码应被视为临界区，以确保ISR运行时实例处于有效状态。这样的IRQ对IRQ（例如，堆可能被锁定）中运行的代码进行了限制，并预定一个稍后会回调的函数能够接触这些限制。在实时系统中，这可能会导致极少的、难以预测的故障。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值