Django——登录功能

zy010101

发布于 2021-01-13 15:39:13

1.7K00

代码可运行

文章被收录于专栏：程序员程序员

运行总次数：0

代码可运行

我们新建一个项目，叫做login。然后在urls.py中做出修改，如下所示：

from django.contrib import admin
from django.urls import path
from django.shortcuts import render, HttpResponse


def login(request):     # login函数
    return render(request, 'login.html')    # 返回HTML页面。


urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', login),   # 这样，就将127.0.0.1:8000/login/这个url和叫做login的函数关联起来。
]

接下来，我们去bootstrap找一个写好的前端登录页面。

前端页面

现在将此页面的的body拿下来，然后运行项目，你会发现，这个效果和bootstrap上的还是不一样，这是因为缺少了一些css，我们把CSS也拿下来。

把CSS样式保存到本地。等会儿需要用到它。我们还需要下载bootstrap。

现在开介绍静态文件的放置。在settings.py中有一个STATIC_URL，如下图所示:

STATIC_URL是给静态文件起的别名，切记。

现在，我们创建一些目录用来存放js,css等。创建完成以后的目录如下所示：

其中bootstrap就是刚才我们下载好的，只需要把他复制到上图所示的目录下即可。同时把刚才保存的css文件signin.css放到css目录下。当然了，为了引用这些文件，还需要在settings.py中加上一些东西，如下所示：

STATIC_URL = '/static/'    #这是静态文件的别名。

STATICFILES_DIRS = [        #加入静态文件目录。
    os.path.join(BASE_DIR, 'static')    #这里的static是login目录下的static目录，和上面的STATIC_URL后面的static不是一个意思。
]

然后修改html文件中的link，修改以后的HTML文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/signin.css">

</head>
<body>

<div class="container">

    <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>

</div> <!-- /container -->

</body>
</html>

其中加入这两行就使得样式变得和bootstrap网页的一致。这两行中的static表示的是STATIC_URL后面的值，即：静态文件别名。并不是STATICFILES_DIRS中指定的文件夹名称。

具体的效果如下所示：

好了，现在我们有了前端页面，接下来就该写后台API了。还有一些问题需要处理，那就是form表单。

form的action属性指定提交的地址，不写默认是当前地址。

form的method方法代表请求方式。

input标签需要name属性，value属性。

button需要type="submit"的属性。

所以，我们还需要处理HTML文件，最终的HTML文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/signin.css">

</head>
<body>

<div class="container">

    <form class="form-signin" action="" method="post">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="text" id="inputEmail" name="username" class="form-control" placeholder="Username" required="" autofocus="">
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required="">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>

</div> <!-- /container -->

</body>
</html>

同时，还需要在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',
]

后端处理

前端发送get请求获取登录页面，发送post请求来登录。那么后端就需要分开处理这个问题。代码如下：

from django.contrib import admin
from django.urls import path
from django.shortcuts import render, HttpResponse

def login(request):  # login函数
    if request.method == "GET":  # 前端如果是get请求
        return render(request, 'login.html')  # 返回HTML页面。
    elif request.method == "POST":  # 前端如果是post请求
        username = request.POST.get("username")     # 获取POST请求中的username值,字符串username要和前端form表单中的对应起来。
        password = request.POST.get("password")     # 获取POST请求中的password值，字符串password要和前端form表单中的对应起来。
         # request.POST.get返回的值是字符串，所以下面if中的判断是成立的。
        if username == "zy" and password == "12345":
            return HttpResponse("登录成功")
        else:       # 如果用户名或者密码错误，返回登录页面
            return render(request, "login.html")

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', login),  # 这样，就是将login这个url和叫做login的函数关联起来。
]

现在，你可以测试一下你的代码了。登录成功以后，会返回下面的页面。

当然，这么写看起来登录成功也是跳转到另外一个页面了，实则不然。下面我们继续来改进，首先需要引入redirect模块。这个模块是用来完成重定向的。urls.py文件中的代码如下：

from django.contrib import admin
from django.urls import path
from django.shortcuts import render, HttpResponse, redirect


def login(request):  # login函数
    if request.method == "GET":  # 前端如果是get请求
        return render(request, 'login.html')  # 返回HTML页面。
    elif request.method == "POST":  # 前端如果是post请求
        username = request.POST.get("username")  # 获取POST请求中的username值
        password = request.POST.get("password")  # 获取密码值
        if username == "zy" and password == "12345":
            return redirect("/index/")    #重定向到index页面
        else:  # 如果用户名或者密码错误，返回登录页面
            return render(request, "login.html")


def index(request):  # index函数
    return render(request, "index.html")


urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', login),  # 这样，就是将login这个url和叫做login的函数关联起来。
    path('index/', index),
]

登录成功以后的页面如下所示：