<div class="blogpost-body" id="cnblogs_post_body">
<h1>一.登录页面</h1>
<p>1.效果展示：</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-162effa4015680c75bb6afded501e2b0.png"></p>
<p>2.技术点：</p>
<p>2.1验证码：验证码这个功能用了Image,ImageDraw,ImageFont，random，BytesIO模块和session</p>
<p>Image是新创建一个图片，ImageDraw相当于在这个图片上创建一个画笔，ImageFont指定字体的格式</p>
<p>random随机模块，BytesIO开辟一片字节类型的内存空间，session用于存储验证码，验证码的具体细节请看上篇博客</p>
<p>2.2登录验证：我们的注册的时候，用的是auth.create_user()方法，这种方法会让我们的密码被加密，在数据库中如下图所示：</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-5371bad4395801fa008dac415aad005c.png"></p>
<p>所以说我们只能把从前端的获取的密码，经过同样的加密之后再和数据库中的数据进行比对</p>
<div class="cnblogs_code">
<pre class="blockcode"> user=auth.authenticate(request,username=username,password=password)</pre>
</div>
<p>如果user存在，登录成功，保持登录状态，否则返回错误信息，并对前端进行渲染</p>
<p>2.2.1登录成功：</p>
<p>首先用auth.login把user绑定，相当于session和cookie但是使用方法比这两个都简单，执行之后，不退出登录的情况下，request.user就是auth.login(request,user)里面的user</p>
<div class="cnblogs_code">
<pre class="blockcode">auth.login(request,user)</pre>
</div>
<p>登录成功之后，给前端返回数据，首先在函数开头定义一个response_msg用于标识成功或失败，初始化：</p>
<div class="cnblogs_code">
<pre class="blockcode"> respone_msg={<!-- --><span style="color:#800000;">'</span><span style="color:#800000;">code</span><span style="color:#800000;">'</span>:100,<span style="color:#800000;">'</span><span style="color:#800000;">msg</span><span style="color:#800000;">'</span>:<span style="color:#800000;">''</span>}</pre>
</div>
<p>当登录成功的时候，code不变，给response添加一个URL：</p>
<div class="cnblogs_code">
<pre class="blockcode"> respone_msg[<span style="color:#800000;">'</span><span style="color:#800000;">url</span><span style="color:#800000;">'</span>]=<span style="color:#800000;">'</span><span style="color:#800000;">/home</span><span style="color:#800000;">'</span></pre>
</div>
<p>当登录成功的时候，跳转到home页面。当然了这行代码也需要前端的配合，前端：</p>
<div class="cnblogs_code">
<pre class="blockcode"><span style="color:#000000;">success:function (data) {
</span><span style="color:#0000ff;">if</span>(data.code==100<span style="color:#000000;">){
location.href</span>=<span style="color:#000000;">data.url
}</span></pre>
</div>
<p>2.2.2登录失败：</p>
<p>登录失败，response_msg['code']变为101（或者随意一个数，和成功区别开就好）,msg变为失败的信息，比如是验证码出错还是账号密码错误</p>
<p>把返回的msg数据在前端进行渲染，显示出来，效果如下：</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-153e7b8ea8e8480a3c5a292b18b00c93.png"></p>
<p>3.流程图：</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-7c8ebb9343ba281ffc0756a46e5e0bf4.png"></p>
<p> </p>
<p> 4.具体代码：</p>
<p>后端代码：</p>
<div class="cnblogs_code">
<img alt="" class="code_img_closed" id="code_img_closed_a05e75dd-1d86-4ed4-9270-f629a069c60b" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-8f900a89c6347c561fdf2122f13be562.gif">
<img alt="" class="code_img_opened" id="code_img_opened_a05e75dd-1d86-4ed4-9270-f629a069c60b" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-961ddebeb323a10fe0623af514929fc1.gif">
<div class="cnblogs_code_hide" id="cnblogs_code_open_a05e75dd-1d86-4ed4-9270-f629a069c60b">
<pre class="blockcode"><span style="color:#0000ff;">from</span> django.shortcuts <span style="color:#0000ff;">import</span><span style="color:#000000;"> render,HttpResponse,redirect
</span><span style="color:#0000ff;">from</span> app01 <span style="color:#0000ff;">import</span><span style="color:#000000;"> myforms
</span><span style="color:#0000ff;">from</span> app01 <span style="color:#0000ff;">import</span><span style="color:#000000;"> models
</span><span style="color:#0000ff;">from</span> django.http <span style="color:#0000ff;">import</span><span style="color:#000000;"> JsonResponse
</span><span style="color:#008000;">#</span><span style="color:#008000;"> Create your views here.</span>
<span style="color:#0000ff;">from</span> PIL <span style="color:#0000ff;">import</span><span style="color:#000000;"> Image,ImageDraw,ImageFont
</span><span style="color:#0000ff;">from</span> io <span style=" |
|
转播
