基于Pycharm的Django学习 —— 用户登录小demo

为了巩固前面学习的Django内容,我们来写一个用户登录的小demo吧!

需求:写一个简单的用户登录页面,当用户输入用户名和密码时,后端获取用户输入的数据,并且验证是否输入正确,再做对应的处理。

这个案例不难,但是当时还是挺惊艳我的,有一些细节值得注意。

在这里插入图片描述

<form method="post" action="/login/">
        <label>
            <input type="text" name="user" placeholder="用户名">
        </label><br>
        <label>
            <input type="password" name="pwd" placeholder="密码">
        </label><br>
        <input type="submit" value="提交">
    </form>

在这里插入图片描述

def login(request):
    if request.method == "GET":
        return render(request, "login.html")
    else:
        # 如果是Post请求 获取用户提交的数据
        print(request.POST)
        return HttpResponse("登录成功")

在这里插入图片描述
哎嘿,我们发现,小小案例,为什么运行出来,是这样的结果??

这一步没问题:

在这里插入图片描述
在这里插入图片描述

败在了提交后这一步:

在这里插入图片描述
这种错误是cs rf token验证,也就是一层安全机制校验。

解决方法:在form中写上如下:

{% csrf_token %}

在这里插入图片描述

这样再刷新就可以啦!

在这里插入图片描述
在pycharm后台也拿到数据了!

在这里插入图片描述
那么为什么刚刚出现了那样的错误呢? 我们在浏览器进行检查,就可以发现,表单隐藏了这样一个input框,一起提交过去了。

在这里插入图片描述

既然后台都拿到数据了,那就将拿到的数据,和用户输入的数据进行比较,验证是否正确,然后在做相应的处理。

def login(request):
    if request.method == "GET":
        return render(request, "login.html")
    else:
        # 如果是Post请求 获取用户提交的数据
        print(request.POST)

        username = request.POST.get("user")
        password = request.POST.get("pwd")

        if username == "wxm" and password == "123520":
            return HttpResponse("登录成功")
        else:
            return HttpResponse("登录失败")

在这里插入图片描述
我特意输入了一个失败的例子:

在这里插入图片描述
在这里插入图片描述
但是在实际开发中,登陆失败应该还是返回页面,而不是文本。

那么登录失败返回页面后怎么提示错误呢?

我们知道在Django中有模板渲染,那么我们在失败后返回页面的时候,给其传递一个失败信息,这样其就可以接收到了,并且返回给浏览器。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

但是登录成功,也不应该返回文本,也应该返回一个页面,那就返回我的博客吧~

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
其实我们这里还把用户名和密码的校验写死了,一般应该是去数据库校验的,那刚开始就不给大家上难度了,现在主要是优化一下代码,因为这个if else太多了!

我们知道return后就肯定不会执行下面的代码了,所以return后的都可以在后面的分支语句完善。

def login(request):
    if request.method == "GET":
        return render(request, "login.html")
  
    # 如果是Post请求 获取用户提交的数据
    print(request.POST)

    username = request.POST.get("user")
    password = request.POST.get("pwd")

    if username == "wxm" and password == "123520":
        return redirect("https://blog.csdn.net/qq_43779149")
        
    error = "用户名或者密码错误"
    return render(request, "login.html", {"error": error})

这样就可以啦!!

那么虽然这段代码很简单,我们还是来分析一下,整个案例的流程。

首先是用户输入url,这属于get请求,后端就返回用户登录页面,然后就开始输入用户名和密码,点击提交表单后,就属于post请求,然后在html的form处设置了action,于是又跳转到了登录函数里,这里判断是post请求后,得到用户的用户名和密码,然后开始验证是否正确,如果正确重定向到我的博客,如果错误就又返回用户登录页面,但这次和第一次不同,这次传入了错误信息,所以就会提示我们登录失败。

小小的案例,大大的能量。

  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值