Django4全栈进阶之路15 项目实战（用户管理）：login.html登录画面设计
要编写登录页面，我们需要完成以下步骤：
template文件夹中创建 login.html 模板文件，输入以下 HTML 代码：
{% extends 'base.html' %}
{% block title %}Login{% endblock %}
{% block content %}
<h2>Login</h2>
<form method="post">
{% csrf_token %}
<div>
<label for="username">Username:</label>
<input type="text" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
{% endblock %}
在上面的模板中，我们使用了 {% extends 'base.html' %} 继承了基础模板 base.html，并覆盖了 block 中的内容来实现登录页面的具体功能。
或者独立创建，因为登录窗口要优先于主页显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Window</title>
<!-- 引入 Bootstrap 和 jQuery -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.min.js"></script>
<style>
/* 将登录窗口置于页面中心位置 */
.login-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
} /* 登录窗口样式 */
.login {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
} .form-group {
margin-bottom: 10px;
} label {
display: block;
margin-bottom: 5px;
} input[type="text"],
input[type="password"] {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
} button {
display: block;
width: 100%;
padding: 5px;
margin-top: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
} button:hover {
background-color: #0069d9;
}
</style>
</head>
<body>
<div class="login-wrapper">
<div class="login">
<h2>登录</h2>
<hr>
{% if error_message %}
<div class="alert alert-danger">{{ error_message }}</div>
{% endif %}
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
</div>
<button type="submit">确认</button>
</form>
</div>
</div>
</body>
</html>
在 views.py 文件中编写登录视图函数 login_view：
def login_view(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return redirect('home')
else:
error_message = 'Invalid username or password'
return render(request, 'login.html', {'error_message': error_message})
else:
return render(request, 'login.html')
在上面的视图函数中，我们首先判断请求的方法是否为 POST，如果是则获取请求中的用户名和密码，并使用 authenticate() 函数进行身份验证。如果身份验证成功，则使用 login() 函数登录用户，并重定向到首页；否则，将错误消息传递给模板，并重新渲染登录页面。
在 urls.py 文件中设置登录页面的 URL，将其映射到 login_view 视图函数：
主路由：
urlpatterns = [
# ... 其他 URL 模式 ...
path('myapp/', include('MyApp.urls')),
]
子路由：
from django.urls import path
from .views import login_view urlpatterns = [
path('login/', login_view, name='login'),
# ... 其他 URL 模式 ...
]
或者
from django.urls import path from . import views urlpatterns = [
path('login/', views.login_view, name='login'),
# ... 其他 URL 模式 ...
]
效果：
Django4全栈进阶之路15 项目实战（用户管理）：login.html登录画面设计的更多相关文章
- web前端全栈学习之路
web前端全栈学习之路 --- 陆续更新中 一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...
- python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...
- 你的Node应用，对接分布式链路跟踪系统了吗？(一） 原创： 金炳 Node全栈进阶 4天前 戳蓝字「Node全栈进阶」关注我们哦
你的Node应用,对接分布式链路跟踪系统了吗?(一) 原创: 金炳 Node全栈进阶 4天前 戳蓝字「Node全栈进阶」关注我们哦
- C#.Net全栈工程师之路-学习路径
C#.Net全栈工程师之路-学习路径 按架构分: C/S架构: B/S架构: Mobile移动开发: 按技术点分: C#编程基础以及OOP面向对象编程: 数据库基础以及高级应用(MYSQL+MSSQL ...
- 战争热诚的python全栈开发之路
从学习python开始,一直是自己摸索,但是时间不等人啊,所以自己为了节省时间,决定报个班系统学习,下面整理的文章都是自己学习后,认为重要的需要弄懂的知识点,做出链接,一方面是为了自己找的话方便,一方 ...
- Python全栈开发之路 【第四篇】：Python基础之函数
本节内容 函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...
- Python全栈开发之路 【第一篇】：Python 介绍
本节内容 一.Python介绍 python的创始人为荷兰人——吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本 ...
- python全栈开发之路
一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...
- Python全栈开发之路 【第七篇】：面向对象编程设计与开发（1）
本节内容 一.编程范式 编程指的是写程序.敲代码,就是指程序员用特定的语法.数据结构和算法编写的代码,目的是来告诉计算机如何执行任务的. 在编程的世界里最常见的两大流派是:面向过程与面向对象.“功夫的 ...
- 全网最全postman接口测试教程和接口项目实战~从入门到精通！！！
Postman实现接口测试内容大纲一览: 一.什么是接口?为什么需要接口? 接口指的是实体或者软件提供给外界的一种服务. 因为接口能使我们的实体或者软件的内部数据能够被外部进行修改.从而使得内 ...
随机推荐
- iframe跨域通信window.postMessage()方法
需求:A页面中要嵌入一个iframe,这个iframe是B页面,此时A页面需要得到B页面的一些信息. window.postMessage() 我们都知道浏览器的同源策略,即对于两个不同页面的脚本,只 ...
- 获取请求结果中json数据的值
import json with open("config.json", "r") as f: your_dict = json.loads( ...
- Python学习笔记--序列+集合+字典
序列 切片:从一个序列中,取出一个子序列 注意: 案例: 实现: 集合 无序性.唯一性 添加新元素: .add 移除元素: .remove 随机取出某个元素: 清空集合: .clear 取两个集合的差 ...
- mybatis-spring注解MapperScan的原理
很多开发者应该都知道,我们只使用@MapperScan这个注解就可以把我们写的Mybatis的Mapper接口加载到Spring的容器中,不需要对每个Mapper接口加@Mapper这个注解了,加快了 ...
- 实现hypothesis在网页标注后同步到本地obsidian
实现hypothesis在网页标注后同步到本地obsidian 遇到的question 2023.3.21日 在更改了自己的模板之后,可以能按照Todo的方式展现所有的标记,但是发现在同一个网页上增加 ...
- SpringBoot——模板引擎及原理
更多内容,前往IT-BLOG 一.模板引擎的思想 模板是为了将显示与数据分离,模板技术多种多样,但其本质都是将模板文件和数据通过模板引擎生成最终的 HTML代码. 二.SpringBoot模板引擎 S ...
- MySQL 索引的种类
我们知道一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,所以查询语句的优化显然是重中之重. 一.平衡多路查 ...
- DOM属性节点加其他节点的操作
节点属性 nodeType 返回值为数值 节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue) 元素节点 ...
- 当后端人员未提供接口，前端人员该怎么测试 --mock
1.回顾 2.线上的mock http://rap2.taobao.org/ https://www.easy-mock.com/ 3.线上接口文档 Swagger https://swagger.i ...
- 柏林噪声算法(Perlin Noise)
概述 引述维基百科的介绍: Perlin噪声(Perlin noise,又称为柏林噪声)指由Ken Perlin发明的自然噪声生成算法,具有在函数上的连续性,并可在多次调用时给出一致的数值. 在电子游 ...