本节课我提前美化了一下登陆页面，毕竟这是公司同事首次进入绕不开的第一印象，打磨的精致一点，会给人整个平台的质量都很高的赶脚。这里直接上优化后的代码和页面了：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试平台登录</title> <style> body{ background: url("/static/login.jpg"); background-attachment: fixed; background-size: cover; } .wqrf_input{ width: 90%; background-color: #d1d0d1; border-radius: 50px; text-align: center; float: right; margin-right: 10px; height: 30px; border: 0; } span{ color: #f25e78; } </style> </head> <body> <br> <div style="box-shadow: 4px 4px 6px #2a262a;margin-left: -webkit-calc(50% - 150px);width: 300px;background-color: white; opacity:0.8;border-radius: 20px;text-align: center"> <br> <strong><span style="font-size: xx-large;">接口测试平台</span></strong> <br> <span>欢迎使用</span> <br><br> <input type="text" class="wqrf_input" placeholder="用户名"> <br><br> <input type="text" class="wqrf_input" placeholder="密码"> <br><br><br> <button style="width: 90%;height: 35px;border-radius: 50px;background-color: #f25e78;color: white;font-size: large;border: 0;box-shadow: 4px 4px 4px #a0a0a0">登 陆</button> <br><br> <span style="font-size: xx-small">若首次登录,请点击 <a href="">注册账号</a></span> <br><br> </div> </body> </html>
页面展示：
好了，正片开始，我们本节课要做的是登陆页面的后台代码，也就是 注册和登录。
先弄个登陆吧：
打开login.html，找到你的登陆button，给它加上一个onclick属性，值为我们要做的js函数名：login
然后在文件底部加上一个script 标签用来存放login函数
在里面写好function login(){}
小技巧：你输入fun联想出来之后，直接按tab键盘，它就会给你生成一个默认函数，然后你把名字改好就可以了，之前所有前端js出错，无效的，请仔细检查代码，或者加我给我截图 帮你改正细微问题，也可以自己f12打开浏览器调试，点击console，相当于我们执行js函数的命令窗口，查看各种报错然后修复。
这个函数我们动笔之前，要思考，这个函数要做什么？
- 拿到用户名和密码输入框的值
- 把这个俩值传递给后端等待验证
- 根据验证结果，如果错误，就显示红色报错！嘲讽一下使用者。
4.如果成功的话，那就轮不到这个函数干啥了，后端直接给返回新的首页了
所以第一步我们要如何拿到用户名和密码输入框的值？
首先要定位，然后拿value，怎么定位？用id最好，那就先给那俩输入框加上id，曾经我们做selenium自动化时候，经常埋怨开发不给加id让我们定位不好办，现在我们也是开发了，切记要养成习惯，加上id，方便我们自己。
然后在login()中 加上如下俩句，变量名可以随便起。获取到了俩个输入框的值，一个是username,一个是password
然后我们可以检验一下 是否正确。
加入alert('弹窗文案') 代码，来显示我们获取到的对不对，
然后我们刷新页面，记住一定要刷新，否则你的改动是不生效的。
然后输入用户名密码随便输入，点击登陆按钮：
看样子是成功了！
接下来就是我们要如何把俩个字符串 传送给我们后端了。
这里教一段非常简单好用的发送http请求的代码。
$.get("你的url",{json格式参数},function (ret){收到返回值后可以做的事})
其中的ret，就是你接收的返回值。
但是这个$ 开头的写法，并不是js的写法，而是jquery的写法。我们直接使用会报错，所以要先下载并引入jquery。
我们想起一件事，就是我们之前下载菜单的时候，那个静态资源里已经有里jquery.min.js 类的文件，所以我们只需要引入即可，这里说一下，我们基本网上下载的资源，都是一整套js/css/jquery等。
引入：在head标签内加入script标签，注意不要写到style内。
script这次内部夹的是空的，而要给它加入一个src属性，意为引入js
然后就是粘贴这个jquery.min.js的路径，注意一定要以 /static/...开头，前面的的都不要。然后加入type属性，写死为 text/javascript
之后才算我们引入成功！
先删除alert()；然后加上这个发送http请求的代码：
然后在里面写上 url,参数,返回代码：
其中的url我习惯写的是页面进入的url加_action，大家可以自行设置
俩个参数，按照字典/json格式书写，用英文逗号隔开。最后收到返回值时，直接弹窗 报错文案。 因为如果是正确的话，我们打算在后台时候直接让用户跳转到其他页面比如首页。那么这个登陆页面也就不复存在了。
然后我们去urls.py中架设好链接对照：
写了个函数名，尽量保持一致，以免后续我们思路混乱。
然后去views.py中新建login_action函数：
然后让我们思考这个函数应该做些什么事？
- 获取前端给的 俩个字符串：用户名和密码
- 调用django自带的用户数据库，来验证这个用户是否存在并且密码正确
- 如果不正确，就随便给前端返回点什么，前端都会弹窗说报错文案
- 如果正确，就给用户进行重定向，定到首页：home.html
好，让我们第一步，获取前端数据！
还记得为啥要带这个reqeust参数么，因为我们所有的数据都藏在这个request参数里。
如下代码可以从中获取：
其中的username/password就是我们刚刚前端页面发http请求时候的俩个参数名字，一定要对应上！否则会说找不到错误。
我们可以尝试一下，在浏览器随意输入用户名/密码，点击登陆，看看后端我们pycharm能否打印成功。保证服务启动中。
点击登陆按钮后，可以看到已经打印好了，这说明我们的前端数据传输链路打通了。虽然后面报错了，但是无需担心，这是因后端函数并没有给前端返回什么，所以报错。一会我们还要继续写呢。
开始继续写验证用户名密码代码：
这里我们必须引入一个django的库，专门验证登陆的。叫做auth。
然后 用我们前端给的用户名和密码，调用这个auth函数，去用户库里查询用户，我们的引用变量自定义为user， 这个auth函数如果在库里找到了这个用户，那么就会给你返回这个用户实体，否则就给你返回None
所以我们接下来就要 判断，这个user是一个用户实体，还是一个None：
我们先来写 如果用户名密码不对，也就是程序走进了else的情况：
这里我们随便返回，哪怕是个空，前端都会弹窗报错，因为我们前端html已经写好了，只要接收到返回值，无论是什么，都弹窗错误文案！当然这里也可以设计成弹窗提示返回值，然后后端返回值我们就要返回 错误文案。也是可以。
再来写正确的部分：
直接重定向/home/首页，我们前面讲过，HttpResponseRedirect函数是重定向浏览器链接的。现在我们试试看吧！
刷新浏览器，确保服务运行中。输入用户名密码点击登陆！
然后没有任何反应！！！而后端报了一个错！！！
那么这个错误是什么意思呢？
我们看最后一句，sqlite3错误，这是我们django自带的数据库，这说明是数据库错误，no such table，翻译过来是 没有这个表，哪个表？auth_user ,就是我们前面总提的 django自带用户表。
所以我们现在需要生成这个表。
点击pycharm底部的cmd命令后输入Terminal模式，这里输入的是你操作系统的命令，比如mac的ls widows的dir ，确保我们在这个项目根目录下，也就是能看到 manage.py的目录下。
依次输入并回车：
python3 manage.py makemigrations
python3 manage.py migrate
俩句命令
分别是：同步表结构，生效表结构。
请牢记这俩句命令，之后我们自己弄的任何数据库设置/更改，都需要这俩句来让其生效，是一个最常用的命令，面试中很多面试官靠这种超级常用的命令来试出你到底是培训机构书本填鸭出来的，还是真才实学实际经验爆表的高手
然后我们切换换Run，来观察django的输出日志：
然后我们在浏览器再测试登陆功能：
出现弹窗，说明整个链路 全部打通！后端也没有报错。
接下来我们意识到一件事情，就是我们的用户表并没有一个用户是个空的，所以我们无论输入什么用户名都会找不到 从而弹窗。
所以我们下一节就要学习 注册功能！注册1个账号，然后登陆测试登陆成功的情况。
