4-request对象

人のエゴで造られた 虚にだけはなりたくはなくて / 2024-02-28 / 原文

前端提交数据

必备知识点

前端form表单中action属性,不写默认是当前路由地址

前端form表单中的method属性,不写默认是GET请求

前端页面

templates\register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        fieldset {
            width: 300px;
        }
        legend {
            text-align: center;
        }
    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>请输入用户名以及密码</legend>
        <label for="username">账号:</label>
        <input id="username" name="username" type="text" placeholder="在此处输入用户名">
        <br>
        <label for="password">密码:</label>
        <input id="password" name="password" type="password">
        <br>
        <input type="submit" value="提交">
        </fieldset>
</form>
</body>
</html>

image-20240227190705535

后端页面

# views.py
from django.shortcuts import render

def register(request):
    return render(request, 'register.html')
# views.py
from django.contrib import admin
from django.urls import path
from app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('register/', views.register, name='register'),  # name='register' 表示别名
]

get提交

当form表单不填写method,直接提交时get方法,没有错误,后台可以拿到数据

post提交

当form表单提交方式为method=post时,报错如下

image-20240227191526564

解决方案,注释掉下面这个配置

# 将settings.py文件中的配置注释掉,在后面的学习中我们会逐步的解决掉这个问题
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 将这个配置先注释掉
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

后端获取数据

request的属性以及方法

request.method

获取发起请求的请求方式 
	一般是GET或者POST 基于表单的method方法
get请求携带的数据是由大小限制的
post请求携带的请求参数没有限制

request.POST

获取用户输入的请求数据,但不包含文件
返回的是:大写字符串

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        fieldset {
            width: 300px;
        }

        legend {
            text-align: center;
        }
    </style>
</head>
<body>
<form action="" method="post">
    <fieldset>
        <legend>请输入用户名以及密码</legend>
        <label for="username">账号:</label>
        <input id="username" name="username" type="text" placeholder="在此处输入用户名">
        <br>
        <label for="password">密码:</label>
        <input id="password" name="password" type="password">
        <br>
        爱好:
        <input name="hobby" id="kill" type="checkbox" value="kill">
        <label for="kill">抢人头</label>
        <input name="hobby" id="fish" type="checkbox" value="fish">
        <label for="fish">摸鱼</label>
        <input name="hobby" id="cut-class" type="checkbox" value="cut-class">
        <label for="cut-class">逃课</label>
        <br>
        <input id="hobby" type="submit" value="提交">
    </fieldset>
</form>
</body>
</html>

image-20240227192823852

后端页面

# register
def register(request):
    print('request.POST', request.POST)
    print('request.GET', request.GET)
    return render(request, 'register.html')

# 当以get方式提交的时候
# request.POST <QueryDict: {}>
# request.GET <QueryDict: {'username': ['小满'], 'password': ['123'], 'hobby': ['kill', 'fish', 'cut-class']}>

# 当以post方式提交的时候
# request.POST <QueryDict: {'username': ['小满'], 'password': ['123'], 'hobby': ['kill', 'fish', 'cut-class']}>
# request.GET <QueryDict: {}>

获取值

def register(request):
    query_dict = request.POST if request.POST else request.GET  # 三元运算符 哪一个有值从哪一个里面去取
    username = query_dict.get('username')  # 获取单个值
    password = query_dict.get('password')  # 获取单个值
    hobby = query_dict.getlist('hobby')    # 获取多个值,一般是用于接收form表单的多选框数据

    print(username, password, hobby)  # 小满 123 ['抢人头', '摸鱼', '逃课']
    return render(request, 'register.html')

优化后的写法,可以这样但不建议

def register(request):
    query_dict = request.POST if request.POST else request.GET
    username, password, hobby = query_dict.values()  # 修改了这里

    print(username, password, hobby)  # 小满 11223344 逃课
    return render(request, 'register.html')

验证值

注册成功之后,跳转到登录页面

后端

# views.py
from django.shortcuts import redirect, HttpResponse, render


def login(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    if username == "小满" and password == '123':
        print(username, password)
        return render(request, 'login.html', {'username': username})
    else:
        return HttpResponse('对不起,账号或者密码错误~')


def register(request):
    if request.method == 'POST':
        response = login(request)
        if response.status_code == 200:
            return response

    return render(request, 'register.html')
# urls.py
from django.contrib import admin
from django.urls import path
from app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', views.login),
    path('register/', views.register, name='register'),  # name='register' 表示别名

前端

<!-- register.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        fieldset {
            width: 300px;
        }

        legend {
            text-align: center;
        }
    </style>
</head>
<body>
<form action="" method="post">
    <fieldset>
        <legend>请输入用户名以及密码</legend>
        <label for="username">账号:</label>
        <input id="username" name="username" type="text" placeholder="在此处输入用户名">
        <br>
        <label for="password">密码:</label>
        <input id="password" name="password" type="password">
        <br>
        爱好:
        <input name="hobby" id="kill" type="checkbox" value="抢人头">
        <label for="kill">抢人头</label>
        <input name="hobby" id="fish" type="checkbox" value="摸鱼">
        <label for="fish">摸鱼</label>
        <input name="hobby" id="cut-class" type="checkbox" value="逃课">
        <label for="cut-class">逃课</label>
        <br>
        <input id="hobby" type="submit" value="提交">
    </fieldset>
</form>
</body>
</html>
<!-- login.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎进入主界面</title>
</head>
<body>
    <p>{{ username}},恭喜您登录成功!</p>
</body>
</html>

测试阶段

正确的用户名以及密码为:小满123

当我输入了错误的用户名或者密码时

对不起,账号或者密码错误~

当我输入了正确的用户名和密码

小满,恭喜您登录成功!