1. 用户访问 http://127.0.0.1:8000/login/ 可以看到路径为login/。

2. login/路径将对应主项目下urls.py中的login/。

from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path("timer/", views.get_timer),
    path("login/", views.login),
    path("auth", views.auth)
]

可以看到login/路径对应的是app01下的views下的login函数。

3. 找到app01下的views.py文件,如下:

from django.shortcuts import render
import datetime
# Create your views here.

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

可以看到返回的是一个login.html。

4. 找到对应的timer.html,这里我们注意到代码中没有跟路径,说明这个文件在默认路径下,Django的默认路径在setting.py中设置。如下:

import os
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

这里需要先import os,然后在将templates文件夹指定为模板文件的存放位置。

5. 打开templates文件夹找到login.html,内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<form action="/auth/" method="post">
    用户名:<input type="text" name="username">
    密码:<input type="password" name="password">
    <input type="submit">
</form>
</body>
</html>

这里有一个form表单用于携带登陆输入的账号密码输入框,说明:

  • form action="/auth/" method="post"说明当用户点击提交的时候,我们将向/auth路径发起post请求。
  • 在发起post请求的时候,将用input标签中的name作为key,输入的内容作为值组成字典进行传递。
  • 发起的请求输入例子如下:<QueryDict: {'username': ['1'], 'password': ['2']}>

6. 需要注意,默认情况下Django不接受匿名post,所以这里需要关闭这个检测功能,打开setting.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',
]

7. 由于用户点击提交之后需要向/auth发起post请求,所以我们需要在urls.py里面添加auth路径,让用户提交的数据可以被接收。

from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path("timer/", views.get_timer),
    path("login/", views.login),
    path("auth", views.auth)
]

这里需要注意,若form action="/auth",auth后面不能带/, 这里也不能带,否则带了会报错。建议都带上,这里我们将post过来的数据传给views.auth函数来处理。

8. 找到views.auth函数:

from django.shortcuts import render
import datetime
# Create your views here.

def login(request):
    return render(request,"login.html")
    
def auth(request):
    user = request.POST.get("username")
    password = request.POST.get("password")
    if user == "a" and password =="1":
        return HttpResponse("登陆成功")
    else:
        return HttpResponse("登陆失败")

这里我们看到,收到用户名和密码之后,将判断其用户名和密码是否正确,给出对应的返回结果。

9. 由于登陆页面用的是get请求,而登陆的操作用的是post请求,可以根据请求类型的不一样,将这两个函数融合成一个。

def login(request):
    if request.method == 'GET':
        return render(request,"login.html")
    else:
        user = request.POST.get("username")
        password = request.POST.get("password")
        if user == "zhangsan" and password =="123":
            return HttpResponse("登陆成功")
        else:
            # return redirect("/login/")
            # return HttpResponse("登陆失败")
            return render(request,"login.html",{"err": "用户名或密码错误!"})  # 配合做登陆失败的提示

当然我们的login的html也需要将post路径做下修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<form action="/login/" method="post">
    用户名:<input type="text" name="username">
    密码:<input type="password" name="password">
    <input type="submit">
</form>
<span class="err" style="color:red">{{err}}</span>  /*这里是说若是登陆失败,给出一个用户名密码错误的提示*/
</body>
</html>