在线网站搭建：登录页面实现
零基础使用Django2.0.1搭建在线教育网站（十一）：登录页面实现
写在前面
从本篇笔记开始，我们就正式进入到前端页面的配置了，里面包含的信息很多，主要解决网站首页显示，发送接收验证码，用户注册，登录，密码找回，修改密码等问题。鉴于篇幅可能有点长，所以这里分3篇进行介绍，分别是第十一，十二，十三篇笔记。本篇笔记主要解决网站首页显示和登录页面的配置以及登录方式的自定义这3个问题。
本篇笔记对应于第十一篇代码，对应于github的位置是https://github.com/licheetools/eduline。
网站首页显示和登录页面的配置
放置前端网站首页index.html
正如大家平时所看到的那样，一般网站首页都是直接在根目录下显示的，所以我们就要在我们的初始前端资料里面，把我们的index.html文件放在templates目录里面，就是这个样子：
新建静态文件夹static
在主项目树里面新建静态文件夹static，再在里面新建5个文件夹，用于放置css，img，images，js，media等文件。就是这样：
前面说过Django的web开发是采用MTV模式的，现在如果我们想在浏览器中显示前端页面，我们只需要配置一下url就可以了。
前端静态页面的URL的配置
打开我们的eduline/urls.py文件，修改为如下代码：
接下来我们运行一下我们的项目:runserver,直接在浏览器地址栏中输入：http://127.0.0.1:8000/或者http://127.0.0.1回车一下，出现：
我们的index页面已经成功加载出来了，但是很丑，因为样式还没有加载出来，我们需要配置一下路径。
配置静态static文件的路径
打开我们的eduline/settings.py文件，拉到最底下，添加修改为如下：
静态文件路径修改了，所以我们需要在前端页面代码里面对其引用路径都作修改：
将所有的../,全部替换为/static/，你可以使用ctrl+f，先查找出所有再替换也可以的：
变成了这个样子：
接着，把我们前端资料里的文件都放在指定的文件夹里面（资料里都有文件夹名，而且都是和你刚才创建的名字一样）
偷懒的话可以直接复制粘贴相关文件。
现在，我们刷新一下我们的页面（如果你停止了项目的运行就运行一下），出现：
说明我们的前端网站页面已经成功显示了。（如果出现页面残缺问题，可以使用本篇笔记上传的旧版前端资料。）
登录页面的配置
放置前端登录页面login.html
在前端资料里面把我们的login.html文件放在templates目录里面，就是这个样子：
替换路径
同样将所有的../,全部替换为/static/，你可以使用ctrl+f，先查找出所有再替换也可以的，这里就不细说了。
登录页面的URL的配置
打开我们的eduline/urls.py文件，添加如下代码：
取消注释并修改登录路径
打开我们的index.html页面，找到第27,28行，取消注释（删除注释符号），再将里面的href="login.html"修改为：href="/login/"，再找到第30行代码，将一对给收起来，并注释掉，因为我们目前还用不到它。就是下面的一段代码：
现在，我们刷新一下我们的页面（如果你停止了项目的运行就运行一下），出现：
然后点击登录按钮，跳转到如下地址：http://127.0.0.1:8000/login/，页面成了这个样子：
恭喜你，我们登录页面也已经正常显示出来了，下面是如何实现登录的交互功能。
登录页面的交互实现
Django的MTV模式你还差一个V，也就是view你还没用到过，这里就到了它大显身手的时候了。尽管前面我们已经把网站首页和登录页面在浏览器中显示了，但是那些信息都是固定的，也就是说当初前端人员在设计网页的时候就确定了，我们现在所要做的就是更改它们的信息，使满足自己的信息得到显示。
接下来我们就通过编写视图函数，来实现这个，不过前提是需要挖坑与填坑操作，这里先不介绍，后面会具体说明。
视图函数View的创建
我们打开，apps/users/views.py文件，在里面添加如下代码：
然后打开eduline/urls.py文件，将login的登录路径修改为如下：
现在我们准备测试一下，我们获取登录页面时的method是不是为get，在两行返回语句的位置打上断点：
然后开启debug模式，待网站首页显示出来以后点击登录按钮，可以看到蓝色行跳到render那一行了，并发现Method就是GET:
页面表单的提交
在登录页面，我们发现它其实是一个表单：
我们打开login.html文件，找到第70行代码：
这就是我们刚才的登录时的表单提交页面，把第70行的action指向修改一下：变成：，还有这里面input中的name值都会随着表单的提交被传递到后台，并以键值对的形式进行存储。
我们现在再来测试一下，看看获取登录提交表单时的method是不是为post，只保留第一行位置上的断点：
然后开启debug模式，待网站首页显示出来以后点击登录按钮，并在表单中输入之前的信息，点击提交，出现了403禁止访问错误：
这其实是Django自带的防止csrf攻击的一个安全机制，目前你不用管这个机制的作用原理是什么（后面会讲到），只需要记住所有html页面内包含表单的地方，都必须在标签内加上{% csrf_token %}才能被验证通过，并传值到后台。
不知道你注意到上方有个input:
它的意思就是我们刚才加入的{% csrf_token %}不会在页面中显示。
我们重新开启Debug模式，待网站首页显示出来以后点击登录按钮，并在表单中输入之前的信息，点击提交，页面跳到Pycharm中的pass位置：
并发现Method就是POST，而且POST对象是一个QueryDict！看下面:
从上图可以看到request中的POST其实是一个QueryDict对象，所以我们可以把它当成一个字典（其实它就是一个字典，你看到没有都是以键值对的形式进行返回的），用来获取前端返回的数据：
用户登录验证
目前，我们采用Django自带的auth方法来进行用户登录验证，后面会介绍另一种简单的验证方式。在users/views.py文件添加如下代码：
注意：authenticate的调用只需要传入用户名和密码即可，如果成功则会返回user对象，失败就返回null
html页面登录验证配置
我们采用下面
的方式来进行判断：
就是这个样子：
我们现在先运行一下我们的项目，然后在后台注销我们刚才的登录状态（记住目前注销用户只能在xadmin后台，以后配置好可以在网站首页注销）
我们打开users/views.py文件，在这行代码处打上一个断点:，就是这个样子：
然后开启debug模式，待网站首页显示出来以后点击登录按钮，并在表单中输入之前的信息，点击提交，页面跳到Pycharm中的user=authenticate这个位置：
我们成功的获取到了前端页面提交的信息，但不一定是可以登录（之前注册过）的用户，所以我们需要验证：
成功了，NewBee用户登录成功了！
如果你继续往下执行的话，会报出下面的错误:
这是因为我们在处理登录时调用了我们自定义名为login的函数：
而不是调用了Django提供的login函数：
所以就会出错。因此我们一定不能把自定义的函数名和Django自带的函数名取同一个名字，那样会造成系统错误。
所将自定义的函数命名为user_login，就不会出问题了！
还有eduline/urls.py文件里面对应的部分也要修改：
重新运行一下我们的项目，你会发现个人中心出现了：
采用邮箱登录页面
打开eduline/settings.py文件，在第34行添加如下代码：
然后打开users/views.py文件，在后面添加如下代码：
现在我们在xadmin的后台中，注销一下，再来测试一下，看是不是可以用邮箱登录了。
我们之前的用户名和账号登录，现在我们尝试使用邮箱和密码来登录，在try和user所在的两行打上断点开启Debug模式：
开启debug模式，待网站首页显示出来以后点击登录按钮，并在表单中输入之前的信息，点击提交，页面跳到Pycharm中来：
可以看到我们已经成功登录了！接下来做一下错误信息的提示！
用户错误信息提示
打开users/views.py文件，修改第28行代码为如下：
也就是这样：
但是错误信息如何在前端页面显示呢？我们需要配置一下,打开login.html文件，找到第80行代码：
这个字段就是用来提示错误信息的，我们修改一下：
我们来测试一下，不过先在xamin里注销一下，然后填入错的信息再提交，就出现：
恭喜你，测试成功了！
至此，我们本篇关于网站首页显示和登录页面的配置以及登录方式的自定义这3个问题的介绍，就到此结束了，感谢你的赏阅。
本篇笔记对应于第十一篇代码，对应于github的位置是https://github.com/licheetools/eduline。
啃饼思录
微信ID:kbthinking
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180811G19BWE00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
