用Django全栈开发——11. Login页面的逻辑实现

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们要实现登录页面。

Peekpa.com的官方地址：http://peekpa.com

上一节我们已经设计好了PeekpaUser模型，而且上上节我们也继承了AdminLTE的Dashboard和Login页面，那么这节，我们就来说一下如何使用Login页面完成登录，登录成功之后就跳转到Dashoboard页面。

实现登录

首先我们要在PeekpaUser里面实现一个登录功能，之前在http://127.0.0.1:8000/admin里面登录的方法，是调用的Django系统方法，但是因为我们要在自己写的Login页面实现登录逻辑，所以我们就需要在PeekpaUser里面写一下登录逻辑。

首先在peekpauser底下得创建views.py文件，我们要在这个文件里面编写视图函数：

因为我们的Login页面登录，是需要输入有限和密码的：

而且这个Form表单应该发送一个POST请求，所以我们要在views.py文件里写一个POST请求的登录函数：

@require_POST
def login_view(request):
    form = LoginForm(request.POST)
    if form.is_valid():
        email = form.cleaned_data.get('email')
        password = form.cleaned_data.get('password')
        remember = form.cleaned_data.get('remember')
        user = authenticate(request, email=email, password=password)
        if user:
            if user.is_active:
                login(request, user)
                if remember:
                    request.session.set_expiry(None)
                else:
                    request.session.set_expiry(0)
                print("login success")
                return redirect(reverse('cms:dashboard'))
            else:
                return restful_response.unauth(message="账号已经被冻结")
        else:
            # return restful_response.params_error(message="手机或者密码错误")
            return redirect(reverse('index'))
    else:
        errors = form.get_errors()
        return restful_response.params_error(message=errors)

首先通过@require_POST装饰器来修饰方法为处理POST请求。

接着通过创建的forms.py文件中Django表单LoginForm来做Post数据的清理判断工作：

class LoginForm(forms.Form, FormMixin):
    email = forms.CharField(max_length=11)
    password = forms.CharField(max_length=20, min_length=6, error_messages={"max_length":"面最多不能超过20字符", "min_length":"密码最少不得少于6个字符"})
    remember = forms.IntegerField(required=False)

这里我们在base文件夹下创建了一个Form的基类，目的就是方便处理错误信息。

然后我们拿到email和password，然后调用django.contrib.auth的authenticate方法来做授权。如果登录成功，则会自动跳转到cms:dashboard页面，这里也就是我们之前集成的CMS的Dashboard页面；如果失败，则返回错误信息。

接下来，我们需要在peekpauser目录下，创建一个urls.py文件，用来写当前应用下的url映射关系：

urlpatterns = [
    path("login/", views.login_view, name="login"),
    ]

最后一步配置，就是在项目的根URL文件里面配置url映射，所以我们要在Peekpa路径下的urls.py里面，在下面的代码添加peekpauser的url映射路径：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('account/', include('apps.peekpauser.urls')), #添加的PeekpaUser的url路径
    path('', index, name='index')
]

至此，我们的登录POST请求就写完了。

登录完成之后的跳转

我们在前面调到了登录成功之后，页面应该跳转到cms:dashboard页面，既然要做这个跳转，就必须得把dashboard页面的url引入到系统里。

首先通过Run manage.py Task中通过startapp创建一个叫CMS的应用。

然后将cms应用移动到apps目录下：

既然我们要把之前写的Dashboard.html映射到cms应用中，那么我们就先在front/templates/目录下，创建一个cms文件夹，将dashboard和login映射到这里。

映射login页面

首先把login页面需要映射到cms页面。很简单，一般把一个页面集成到应用里，需要这么几步：

• 编写好网页；
• Views.py里创建视图函数
• URL映射编写

就这么三步，那么我们这里第一步已经完成了，接下来就是第二步，创建Login的视图函数。

我们需要来到CMS的views.py文件下，创建我们的Login视图函数：

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

没错，就这么简单，就这么两行，接下来就是在cms下创建一个urls.py文件，在里面编写url映射，这一步和上面peekpauser里面编写url是一样的：在应用底下编写url，还要在主url里面集成cms的url。

#cms的urls.py文件
urlpatterns = [
    path("login/", views.cms_login, name="login"),
    ]
    
#主urls文件
urlpatterns = [
    ...
    path('cms/', include('apps.cms.urls')),
    ...
    ]

至此，我们的集成工作就结束了，想要看是否集成成功，只需要启动服务器，然后在浏览器里面输入正确的地址就可以：http://localhost:8000/cms/login/

但是我们发现似乎CSS样式都丢了，和原来gulp写的页面长得不一样啊，打开chrome的控制台，看到一堆红色的错误：

没错，这个错误就是提示的资源文件没有成功加载。

造成这个的原因是因为我们的页面资源文件路径，应该修改成为Django模板类型的，而不是路径文件。

具体怎么修改？很简单，我们就以Login页面为例，修改一下资源路径：

第一步，修改settings

第一步需要修改settings.py里面的TEMPLATES变量，需要在里面添加builtins变量，修改为以下内容：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'front', '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',
            ],
            # builtins是新添加的内容
            'builtins': [
                'django.templatetags.static'
            ]
        },
    },
]

这样之后，我们就能在template的html文件里面使用static的关键字了。接着，我们就来到login页面，将之前我们修改的以../../ 开头的相对路径资源文件，从：

<link rel="stylesheet" href="../../dist/adminlte/plugins/fontawesome-free/css/all.min.css">

<link rel="stylesheet" href="../../dist/adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

<link rel="stylesheet" href="../../dist/adminlte/dist/css/adminlte.min.css">

<script src="../../dist/adminlte/plugins/jquery/jquery.min.js">script>

<script src="../../dist/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js">script>

<script src="../../dist/adminlte/dist/js/adminlte.min.js">script>

修改为：

<link rel="stylesheet" href="{% static 'adminlte/plugins/fontawesome-free/css/all.min.css' %}">

<link rel="stylesheet" href="{% static 'adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">

<link rel="stylesheet" href="{% static 'adminlte/dist/css/adminlte.min.css' %}">

<script src="{% static 'adminlte/plugins/jquery/jquery.min.js' %}">script>

<script src="{% static 'adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js' %}">script>

<script src="{% static 'adminlte/dist/js/adminlte.min.js' %}">script>

看到他们全部都添加了static筛选器，这个时候，我们再看浏览器页面里的Login页面，就会发现：

可以看到，我们的样式完全正确了。接下来，我们同样也得把Dashboard的资源路径修改，然后像Login一样的集成方法，集成到cms中。具体怎么操作就不重复了，步骤已经在Login里面写好了。

集成好之后，打开http://localhost:8000/cms/dashboard/页面就会出现我们的Dashboard页面：

接下来，我们就要在Login页面里来打通这个登录跳转的逻辑了。

我们首先要在Login页面里的登录的Form配置一下action。

<form action="{% url 'peekpauser:login' %}" method="post">

然后我们在登录页面，输入邮箱和密码，刺客就会发现弹出了错误提示：

这是因为，Django默认的表单提交，是需要一个CSRF表单验证的，这里因为是直接搬的AdminLTE的页面，所以这个验证是没有的，要补充这个验证非常简单，直接在Login页面的Form里面，添加一行代码就可以：

<form action="{% url 'peekpauser:login' %}" method="post">
        
          {% csrf_token %}    
        <div class="input-group mb-3">

这个时候我们再重新加载页面，输入SuperUser的邮箱和密码，页面就会自动跳转到Dashboard页面了：

出现了错误提示，说email和password是This field is required.

这是因为我们的Form表单里面的input标签，没有name属性，我们只需要在input里面把name属性补全就好了：

...
<input type="email" class="form-control" placeholder="Email" name="email" >
...
<input type="password" class="form-control" placeholder="Password" name="password">
...

这一次再运行一下，就发现一切正常了：

很完美，但是心细的同学肯定发现，你这个Dashboard的页面路径http://localhost:8000/cms/dashboard/及时不登录也可以访问的啊？这个不要急，在后面的章节，我们就会给页面添加权限，如果不登录，就会自动跳转掏登录页面。这一节先给大家跑通登录逻辑。

技术总结

最后总结一下，

设计登录跳转：

1. 首先将Login页面和Dashboard页面都集成在CMS应用中；
2. 将Login页面里面的表单Action地址写成PeekpaUser里面登录映射的URL；
3. 别忘了要在Input标签里面添加name属性，name的值是对应的字段；
4. 完毕

获取代码的唯一途径：关注『皮爷撸码』，回复『代码』即可获得。

长按下图二维码关注，如文章对你有启发，欢迎在看与转发。