zoukankan      html  css  js  c++  java
  • Django回顾之_05_登录案例

    视图:

    1.视图的功能

    接收请求,进行处理,与M和T进行交互,返回应答。
    返回html内容HttpResponse,也可能重定向redirect,还可能是JsonResponse
    

    2.视图函数使用

    2.1 使用

    1) 定义视图函数

    request参数必须有,是一个HttpRequest类型的对象。参数名可以变化,但不要更改。
    

    2) 配置url

    建立url和视图函数之间的对应关系。
    

    2.2 url配置的过程

    1) 在项目的urls文件中包含具体应用的urls文件,在具体应用的urls文件中包含具体url和视图的对应关系。

    2) url配置项是定义在一个名叫urlpatterns的列表中,其中的每一个元素就是一个配置项,每一个配置项都调用url函数。

    3.url匹配的完整过程:

    • 1)去除域名和后面的参数,剩下/aindex,再把前面的/去掉,剩下aindex
    • 2)拿aindex先到项目的url.py文件中进行从上到下的匹配,匹配成功后执行后面对应的处理动作,就是把匹配成功的部分a字符去除,
      • 然后拿剩下的部分index到应用的urls.py文件中再进行从上到下的匹配。---将域名去掉、将?后的部分也去除
    • 3)如果匹配成功则调用相应的视图产生内容返回给客户端。如果匹配失败则产生404错误。

    4.错误视图:

    • 404:找不到页面,关闭调试模式后,默认会显示一个标准的错误页面,如果要显示自定义的页面,则需要在templates目录下面,自定义一个404.html文件。
      • a)url没有配置
      • b)url配置错误
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>404错误页面</title>
        <style type="text/css">
    
    
        </style>
    </head>
    <body>
    <h1>页面找不到--{{ request_path }}</h1>  
    <!--request_path:Django会传过来一个模板变量,包含请求的地址-->
    </body>
    </html>
    
    • 500:服务器端的错误,也可自定义500页面,templates/500.html。
      a)视图(views.py)出错
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>500错误页面</title>
        <style type="text/css">
    
    
        </style>
    </head>
    <body>
    <h1>服务器错误</h1>
    </body>
    </html>
    
    • 网站开发完成需要关闭调试模式,在settings.py文件中:
      • DEBUG=False
      • ALLOWED_HOST=['*']

    5.捕获url参数

    进行url匹配时,把所需要的捕获的部分设置成一个正则表达式组,
    这样django框架就会自动把匹配成功后相应组的内容作为参数传递给视图函数。
    
    • 1)位置参数
      • 位置参数,参数名可以随意指定
    from django.conf.urls import url
    from booktest import views
    urlpatterns = [
        url(r'^index$', views.index),   # 首页
        url(r'^showarg(d+)$', views.showarg),  # 捕获url参数: 位置参数
    ]
    
    from django.http import HttpResponse
    
    
    def showarg(request, num):  # url中捕获的num必须传入
        return HttpResponse(num)
    
    • 输入http://192.168.1.106:8000/showarg11,得到11
    • 2)关键字参数:在位置参数的基础上给正则表达式组命名即可。
      • ?P<组名>
      • 关键字参数,视图中参数名必须和正则表达式组名一致---def showarg(request, num): 中的num,必须和url(r'^showarg(?Pd+)$', views.showarg),中的url一致
    # urls.py
    from django.conf.urls import url
    from booktest import views
    urlpatterns = [
        url(r'^index$', views.index),   # 首页
        url(r'^showarg(?P<num>d+)$', views.showarg),   # 捕获url参数:关键字参数
    ]
    

    6. 普通登录案例

    • def index(request):中request的作用:

      • request就是HttpRequest类型的实例对象,包含浏览器请求的信息,通过request的一些属性,就能拿到这些信息。Django做了一层包装
    • 1)显示出登录页面

      • a) 设计url,通过浏览器访问 http://127.0.0.1:8000/login 时显示登录页面。
      • b) 设计url对应的视图函数login。
      • c) 编写模板文件login.html。
    # views.py
    from django.shortcuts import render
    
    def login(request):
        '''显示登录页面'''
        return render(request, 'booktest/login.html', {})
    
    # urls.py
    from django.conf.urls import url
    from booktest import views
    urlpatterns = [
        url(r'^index$', views.index),   # 首页
        # url(r'^showarg(d+)$', views.showarg),  # 捕获url参数: 位置参数
        url(r'^showarg(?P<num>d+)$', views.showarg),   # 捕获url参数:关键字参数
        url(r'^login$', views.login)    # 显示登录页面
    ]
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <style type="text/css">
    
    
        </style>
    </head>
    <body>
    <!--POST:提交的参数在请求头中。-&#45;&#45;数据安全性比较高时,使用post-->
    
    <!--GET:提交的参数在url中。-->
    <!--http://192.168.1.106:8000/login_check?username=abc&password=111-->
    
    <!--<form method="get" action="/login_check">-->
    <form method="post" action="/login_check">
        用户名:<input type="text" name="username"><br/>
        密码:<input type="password" name="password"><br/>
        <input type="submit" value="登录">
    </form>
    </body>
    </html>
    
    - url	视图	    模板文件
    - /login	login	login.html
    
    # QueryDict对象的使用方法:
    # 赋值: q = QueryDict('a=1&b=2&c=3')
    # 取值:两种方式q['a']、q.get('a')
    # 直接取没有的值会报错django.utils.datastructures.MultiValueDictKeyError: 'd'
    # 但是用q.get('d')就不会报错,会显示没有值(返回None)---可用q.get('d', 'default')的方式,没有时,会返回默认值
    >>> from django.http.request import QueryDict
    >>> q = QueryDict('a=1&b=2&c=3')
    >>> q['a']
    '1'
    >>> q['b']
    '2'
    >>> q['c']
    '3'
    >>> q.get('a')
    '1'
    >>> q.get('d', 'default')
    'default'
    # 和dict的本质区别,字典的key唯一,但Querydict允许一个key对应多个value,取多个值时,需要用getlist()方法来获取
    >>> q1 = QueryDict('a=1&a=2&a=3&b=4')
    >>> q1['a']
    '3'
    >>> q1.get('a')
    '3'
    >>> q1.getlist('a')
    ['1', '2', '3']
    
    • 2)登录校验功能
      • a) 设计url,点击登录页的登录按钮发起请求http://127.0.0.1:8000/login_check时进行登录校验。
      • b) 设计url对应的视图函数login_check。
        • 接收表单提交过来的数据。
        • 进行登录校验,若用户名密码正确则跳转到登录成功页。若失败在跳转到登录页面。
      • c) 登录成功后跳转到首页。
        • url 视图 模板文件
        • /login_check login_check 无
    # urls.py
    from django.conf.urls import url
    from booktest import views
    urlpatterns = [
        url(r'^index$', views.index),   # 首页
        # url(r'^showarg(d+)$', views.showarg),  # 捕获url参数: 位置参数
        url(r'^showarg(?P<num>d+)$', views.showarg),   # 捕获url参数:关键字参数
        url(r'^login$', views.login),    # 显示登录页面
        url(r'^login_check$', views.login_check),
    ]
    
    def login_check(request):
        '''登录校验视图'''
        # request.POST  保存的是POST提交的参数-都为QueryDict对象
        # request.GET   保存的是GET提交的参数-都为QueryDict对象 ---直接通过浏览器输入的方式是Get方式
        # 1. 获取提交的用户名和密码---登录的信息,保存在request中
        # print(type(request.POST))   # 后台显示类型为:<class 'django.http.request.QueryDict'>
        username = request.POST.get('username')
        password = request.POST.get('password')
        print(username+':'+password)    # abc:111
    
        # 2.进行登录的校验
        # 实际开发:根据username和password查找数据库
        # 模拟 abc 111
        if username == 'abc' and password == '111':
            # 正确,跳转到首页
            return redirect('/index')
        else:
            # 错误,跳转到登录页面
            return redirect('/login')
    
        # 3.返回应答
        # return HttpResponse('ok')
    

    属性

    • 下面除非特别说明,属性都是只读的。
      • path:一个字符串,表示请求的页面的完整路径,不包含域名和参数部分。
      • method:一个字符串,表示请求使用的HTTP方法,常用值包括:'GET'、'POST'。
      • 在浏览器中给出地址发出请求采用get方式,如超链接。
      • 在浏览器中点击表单的提交按钮发起请求,如果表单的method设置为post则为post请求。
      • encoding:一个字符串,表示提交的数据的编码方式。
      • 如果为None则表示使用浏览器的默认设置,一般为utf-8。
      • 这个属性是可写的,可以通过修改它来修改访问表单数据使用的编码,接下来对属性的任何访问将使用新的encoding值。
      • GET:QueryDict类型对象,类似于字典,包含get请求方式的所有参数。
      • POST:QueryDict类型对象,类似于字典,包含post请求方式的所有参数。
      • FILES:一个类似于字典的对象,包含所有的上传文件。
      • COOKIES:一个标准的Python字典,包含所有的cookie,键和值都为字符串。
      • session:一个既可读又可写的类似于字典的对象,表示当前的会话,只有当Django 启用会话的支持时才可用,详细内容见"状态保持"。
      • 运行服务器,在浏览器中浏览首页,可以在浏览器“开发者工具”中看到请求信息如下图:

    7. Ajax

    7.1 基本概念

    异步的javascript。在不全部加载某一个页面的情况下(整体刷新--会导致用户体验很差),对页面进行局的刷新,ajax请求,即使出错,也都在后台。
    图片,css文件,js文件都是静态文件
    
    • 1)发起ajax请求:jquery发起
      • 新建一个/test3/static/ 静态文件夹来存放,并分别新建/test3/static/css、/test3/static/images、/test3/static/js文件夹。
        • 在setting.py中进行配置
    STATIC_URL = '/static/'
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]   # 设置静态文件的保存目录
    
    • 2)执行相应的视图函数,返回json内容
    # views.py
    from django.http import HttpResponse, JsonResponse
    
    
    # /test_ajax
    def ajax_test(request):
        '''显示ajax页面'''
        return render(request, 'booktest/test_ajax.html')
    
    def ajax_handle(request):
        '''ajax请求处理'''
        # 返回的json数据{'res':1},JsonResponse会将{'res':1}转换为json数据,返回给浏览器,浏览器中.success(function (data)的data即可接收参数
        return JsonResponse({'res': 1})
    
    • 3)执行相应的回调函数。通过判断json内容,进行相应处理。

    • 将jquery-1.12.4.min.js文件放入/test3/static/js/中

      • 使用jQuery文件的方法:
        • 新建test3/templates/booktest/test_ajax.html,<script>中导入
    <!--test_ajax.html-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax</title>
        <script src="/static/js/jquery-1.12.4.min.js"></script>
        <script>
            $(function () {
                // 绑定btnAjax的click事件
                $('#btnAjax').click(function () {
                    $.ajax({
                        'url': '/ajax_handle',
                        // 'type': 'get', 默认即为get,可以不写
                        'dataType': 'json'
                    }).success(function (data) {    // 执行成功后,会返回data
                        // 进行处理,通过alert取出data中的返回值 res
                        // alert(data.res)
                        if (data.res == 1){
                            $('#message').show().html('提示信息')
                        }
                    })
    
                })
                
            })
        </script>
        <style type="text/css">
            #message {
                dispaly: none;
                color: red;
            }
    
        </style>
    </head>
    <body>
    <!--点击按钮,页面加载完成后,绑定事件id="btnAjax"-->
    <input type="button" id="btnAjax" value="ajax请求">
    <div id="message"></div>
    </body>
    </html>
    
    # urls.py
    from django.conf.urls import url
    from booktest import views
    urlpatterns = [
        url(r'^index$', views.index),   # 首页
        # url(r'^showarg(d+)$', views.showarg),  # 捕获url参数: 位置参数
        url(r'^showarg(?P<num>d+)$', views.showarg),   # 捕获url参数:关键字参数
        url(r'^login$', views.login),    # 显示登录页面
        url(r'^login_check$', views.login_check),
        url(r'^test_ajax$', views.ajax_test),
        url(r'^ajax_handle$', views.ajax_handle),   # ajax处理
    ]
    
    
    • 此时浏览器没有再去请求页面test_ajax,而是去请求的 "GET /ajax_handle HTTP/1.1" 200 10

    异步和同步的概念

    异步:发起请求后,不等待回调函数[.success(function (data) { }]的执行,代码继续向下走,直到服务器将json传回后,才会继续执行回调函数
    同步:ajax也可以发起同步请求,将'async'设置为false
    
        <script>
            $(function () {
                // 绑定btnAjax的click事件
                $('#btnAjax').click(function () {
                    alert(1)
                    $.ajax({
                        'url': '/ajax_handle',
                        // 'type': 'get', 默认即为get,可以不写
                        'dataType': 'json',
                        //'async': false, //同步ajax请求,默认true
                    }).success(function (data) {    // 执行成功后,会返回data
                        // 进行处理,通过alert取出data中的返回值 res
                        alert(2)
                        // alert(data.res)
                        if (data.res == 1){
                            $('#message').show().html('提示信息')
                        }
                    })
                    alert(3)
                })
                
            })
        </script>
    

    7.2 Ajax登录案例

    - 1)首先分析出请求地址时需要携带的参数。
        - username、password
    - 2)视图函数处理完成之后,所返回的json的格式。
        - 登录成功之后的json数据格式{'res':1}、和失败后的json数据格式{'res':0}要做一个设计
        - 通过判断'res'的值,来判断登录是成功还是失败了
    
    • 1)显示出登录页面
      • a) 设计url,通过浏览器访问 http://127.0.0.1:8000/login_ajax 时显示登录页面。

      • b) 设计url对应的视图函数login_ajax。

      • c) 编写模板文件login_ajax.html。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax登录页面</title>
        <style type="text/css">
    
    
        </style>
    </head>
    <body>
    <!--<form method="post" action="/login_check">使用ajax的话,就不用表单请求了-->
    <div>
        {% csrf_token %}
        用户名:<input type="text" name="username"><br/>
        密码:<input type="password" name="password"><br/>
        <!--<input type="submit" value="登录">不用表单,则type改为button-->
        <input type="button" id="btnLogin" value="登录">
    
    </div>
    
    <!--</form>-->
    </body>
    </html>
    
    • 在里面写jquery代码发起ajax请求。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax登录页面</title>
        <script src="/static/js/jquery-1.12.4.min.js"></script>
        <script>
            $(function () {
                $('#btnLogin').click(function () {
                    // 1.获取username和password
                    username = $('#username').val()
                    password = $('#password').val()
                    // 2.发起post ajax请求,/login_ajax_check,携带用户名和密码
                        $.ajax({
                            'url':'/login_ajax_check',  //需写对应的视图
                            'type': 'post',
                            'data': {'username':username, 'password':password},
                            'dataType': 'json'
                        }).success(function (data) {
                            // 登录成功 {'res':1}   ---跳转到首页
                            // 登录失败 {'res':0}
                            if (data.res == 0){
                                $('#errmsg').show().html('用户名或密码错误')
                            }
                            else{
                                // 跳转到首页
                                location.href = '/index'
                            }
                        })
                })
            })
        </script>
        <style>
            #errmsg{
                display: none;
                color: red;
            }
        </style>
    </head>
    <body>
    <!--<form method="post" action="/login_check">使用ajax的话,就不用表单请求了-->
    <div>
        <!--此处会报csrf错误,添加了也不行,暂时注释掉setting.py中csrf处-->
        {% csrf_token %}
        用户名:<input type="text" id="username"><br/>
        密码:<input type="password" id="password"><br/>
        <!--<input type="submit" value="登录">不用表单,则type改为button-->
        <input type="button" id="btnLogin" value="登录">
        <div id="errmsg"></div>
    </div>
    
    <!--</form>-->
    </body>
    </html>
    
    • 2)登录校验功能
    • a) 设计url,点击登录页的登录按钮发起请求http://127.0.0.1:8000/login_ajax_check时进行登录校验。
    from django.conf.urls import url
    from booktest import views
    urlpatterns = [
        url(r'^index$', views.index),   # 首页
        # url(r'^showarg(d+)$', views.showarg),  # 捕获url参数: 位置参数
        url(r'^showarg(?P<num>d+)$', views.showarg),   # 捕获url参数:关键字参数
        url(r'^login$', views.login),    # 显示登录页面
        url(r'^login_check$', views.login_check),
        url(r'^test_ajax$', views.ajax_test),
        url(r'^ajax_handle$', views.ajax_handle),   # ajax处理
        url(r'^login_ajax$', views.login_ajax), # 显示ajax登录页面
        url(r'^login_ajax_check$', views.login_ajax_check),
    ]
    
    • b) 设计url对应的视图函数login_ajax_check。
      • 接收post提交过来的数据。
      • 进行登录校验,并返回json内容。 JsonResponse
      • Json格式如下:
      • {'res':'1'} #表示登录成功
      • {'res':'0'} #表示登录失败
    # /login_ajax_check
    def login_ajax_check(request):
        '''ajax登录校验'''
        # 1.获取用户名和密码
        username = request.POST.get('username')    # 不管是表单POST提交,还是ajax-post提交,都放在request.POST中
        password = request.POST.get('password')
    
        # 2.进行校验,返回json数据
        if username == 'abc' and password == '111':
            # 用户名密码正确
            return JsonResponse({'res': 1})
            # return redirect('/index')   # 如果是ajax返回的页面,不要直接使用redirect,会无法看到index,一直在后台
        else:
            # 用户名或密码错误
            return JsonResponse({'res': 0})
    
  • 相关阅读:
    INT 21H 指令说明及使用方法 (转载)
    数织等逻辑游戏网站推荐
    常见文件格式(转载)
    我有一个通信梦 我收集的通信基础的资源
    MATLAB信号处理常用函数(转载)
    来自我的Moments-实用学习资源或网站
    三角形中的等量关系 一些等式
    【公式编辑测试】三角形中线垂线角平分线长度公式
    【备忘录】麦克斯韦速率分布
    【备忘录】转动惯量张量(转载和再补充一些东西)
  • 原文地址:https://www.cnblogs.com/wangxue533/p/12383663.html
Copyright © 2011-2022 走看看