zoukankan      html  css  js  c++  java
  • Django---Django登录案例

      前面也写了关于视图,模型,模块,地址之间的简单逻辑关系,也每个都举了说明了。通常见到最多的web页面都会有登录,今天我们先通过前面学到的内容,简单的写一个登录页面

    需求文档

    在我们测试的时候也首先要了解到需求,这里我们先明确一个需求。进入到一个登录页面输入正确的账号密码,直接跳转到安静博客页面,如果账号密码错误,就在登录页面报错提示账号密码失败。需求很简单,但是也首先要有思路。

    思路

    1、首先在写一个登录的前端页面。

    2、判断输入的账号名是否正确

    3、账号名正确的话直接跳转到安静博客页面

    4、账号名错误的话提示账号密码错误

    小试牛刀

    话不多说,我们思路弄明白了,可以开始写了

    登录页面

    利用上次我们写的那个简单的登录页面(安静没有写过前端,都是东凑凑,西拼拼,先这样看着~~)

    注意:

    1、这里我们用户名和密码必须后面有name='xxx'参数,进行返回给后端;

    2、 <form action="/login2/" method="post"> 我们这里返回的页面为当前页面,如果密码错误的话,也停留在这个页面,请求方式为POST

    login2.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
        <h1>
            <p style="text-align:center" font size="2">欢迎来到安静的博客:</p>
        </h1>
        <h1>
            <p style="text-align:center">请输出账号密码:</p>
        </h1>
        <form action="/login2/" method="post">
            {% csrf_token %}
            <p style="text-align:center">用户:<input type="text" name="username" /><br />
            </p>
            <p style="text-align:center">密码:<input type="password" name="password" /><br />
            <input type="submit" value="登录" />
    
        </form>
    </body>
    </html>

    判断账号密码正确与错误

    这里没有添加数据库,就直接先把账号密码写死了。(后续继续优化)

    view.py

    # 导入redirect模块,直接请求页面 from django.shortcuts import render,redirect def login2(request): if request.method == 'POST': username = request.POST.get('username') password = request.POST.get('password') # 判断账号密码 if username == 'Anjing' and password == '1234': # 正确后返回到安静博客页面,也可以返回到指定页面 return redirect('https://www.cnblogs.com/qican/') else: #密码错误先不写 pass return render(request,'login2.html')

    编写url对应关系

    urls.py
    
    from django.urls import path
    from Anjing import views
    # 完成对应关系
    urlpatterns = [
        path('login2/', views.login2),
    ]

    直接启动Django调试登录成功效果

    可以看到输入账号密码正确后,直接跳转到了安静的博客,然后如果登录失败的话,继续停留在这个页面。

    需求已经就只剩下一个账号密码错误,返回提示了,这个怎么弄呢?思考前面的内容,返回前端数据,我们可以在html中定义一个参数项,然后报错直接返回

    添加报错参数

    其中 <p style="color: red;text-align: center">{{ error_msg }}</p> 表示展现错误内容

    其中Django模板语言格式: {{ 变量名 }} 

    login2.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
        <h1>
            <p style="text-align:center" font size="2">欢迎来到安静的博客:</p>
        </h1>
        <h1>
            <p style="text-align:center">请输出账号密码:</p>
        </h1>
        <form action="/login2/" method="post">
            {% csrf_token %}
            <p style="text-align:center">用户:<input type="text" name="username" /><br />
            </p>
            <p style="text-align:center">密码:<input type="password" name="password" /><br />
            <input type="submit" value="登录" />
              <p style="color: red;text-align: center">{{ error_msg }}</p>
    
        </form>
    </body>
    </html>

    视图中也需要添加错误内容

    views.py
    
    from django.shortcuts import render,redirect
    
    def login2(request):
        # 定义一个错误为空
        error_msg = ''
        if request.method == 'POST':
            username = request.POST.get('username')
            password = request.POST.get('password')
            # 判断账号密码
            if username == 'Anjing' and password == '1234':
                # 正确后返回到安静博客页面,也可以返回到指定页面
                return redirect('https://www.cnblogs.com/qican/')
            else:
                # 如果账号密码错误直接报错
                error_msg = '用户名或密码错误,请重新输入'
        return render(request,'login2.html',{'error_msg':error_msg})

    重新启动Django,查看登录失败效果

    写到这里会发现,我们的需求已经全部完成了。

    新知识

    这里引入了一个新的知识点就是redirect模块,前面我们还用到了HttpResponse,render。那么这3个之间有什么区别吗?

    1、 HttpResponse的应用场景:返回一个指定的字符串

    2、render的应用场景:返回一个HTML文件

    3、 redirect的应用场景:跳转到指定的页面

  • 相关阅读:
    【OCP12c】CUUG最新考试原题整理及答案(07110)
    OCP 12c最新考试原题及答案(0718)
    【OCP12c】CUUG最新考试原题整理及答案(0719)
    OCP 12c最新考试原题及答案(0714)
    《PHP与MySQL程序设计》面向对象的PHP
    Linux常用命令之文件管理
    《锋利的jQuery》之jQuery简介
    《锋利的jQuery》之jQuery与Ajax
    Google AppEngine上部署PHP应用
    《PHP与MySQL程序设计》第三章 PHP基础
  • 原文地址:https://www.cnblogs.com/qican/p/12455622.html
Copyright © 2011-2022 走看看