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(?P\d+)$', 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})

posted on 2020-02-29 16:47 罗生堂下阅读(144) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Django回顾之_05_登录案例

视图:

1.视图的功能

2.视图函数使用

2.1 使用

1) 定义视图函数

2) 配置url

2.2 url配置的过程

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

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

3.url匹配的完整过程：

4.错误视图：

5.捕获url参数

6. 普通登录案例

属性

7. Ajax

7.1 基本概念

异步和同步的概念

7.2 Ajax登录案例

导航

公告