web应用框架——Ajax登录示例+保持状态(cookie和session)

一.基础知识

1.HttpResponse对象

视图在接收请求并处理后,必须返回HttpResponse对象或子对象。在django.http模块中定义了HttpResponse对象的API。HttpRequest对象由Django创建,HttpResponse对象由开发人员创建。
运行服务器,在浏览器中浏览首页,可以在浏览器“开发者工具”(F12)中看到响应信息如下图(如果没有出现此界面再按一下F5):


1.属性:
  • content:表示返回的内容。
  • charset:表示response采用的编码字符集,默认为utf-8。
  • status_code:返回的HTTP响应状态码。
  • content-type:指定返回数据的的MIME类型,默认为'text/html'。
    方法
  • init:创建HttpResponse对象后完成返回内容的初始化。
  • set_cookie:设置Cookie信息。
set_cookie(key, value='', max_age=None, expires=None)
  • cookie是网站以键值对格式存储在浏览器中的一段纯文本信息,用于实现用户跟踪。
    1.max_age是一个整数,表示在指定秒数后过期。
    2.expires是一个datetime或timedelta对象,会话将在这个指定的日期/时间过期。
    3.max_age与expires二选一。
    4.如果不指定过期时间,在关闭浏览器时cookie会过期。
  • delete_cookie(key):删除指定的key的Cookie,如果key不存在则什么也不发生。
  • write:向响应体中写数据
2.示例
直接返回数据
  • 打开booktest/views.py文件,定义视图index2如下:
def index2(request):
    str='

hello world

' return HttpResponse(str)
  • 打开booktest/urls.py文件,配置url。
url(r'^index2/$',views.index2),
  • 运行服务器,在浏览器中打开如下网址:http://127.0.0.1:8000/index2/

如果用这种方式构造一个页面将会很麻烦,于是有了下面的方法:

调用模板

可以将html、css、js定义到一个html文件中,然后由视图来调用。

  • 打开booktest/views.py文件,定义视图index3如下:
from django.template import RequestContext, loader
...
def index3(request):
    #加载模板
    t1=loader.get_template('booktest/index3.html')
    #构造上下文
    context=RequestContext(request,{'h1':'hello'})
    #使用上下文渲染模板,生成字符串后返回响应对象
    return HttpResponse(t1.render(context))
  • 打开booktest/urls.py文件,配置url。
url(r'^index3/$',views.index3),
  • 在templates/booktest/目录下创建index3.html,代码如下:


    使用模板


{{h1}}

  • 运行服务器,在浏览器中打开如下网址:http://127.0.0.1:8000/index3/
调用模板简写函数render

每次调用模板时都要执行加载、上下文、渲染三个步骤,为了简化操作,Django定义了render()函数封装了以上三个步骤的代码,定义在django.shortcuts模块中。

  • 打开booktest/views.py文件,定义视图index3如下
from django.shortcuts import render
...
def index3(request):
    return render(request, 'booktest/index3.html', {'h1': 'hello'}

二.Ajax登录示例

1.子类JsonResponse

在浏览器中使用javascript发起ajax请求时,返回json格式的数据,此处以jquery的get()方法为例。类JsonResponse继承自HttpResponse对象,被定义在django.http模块中,创建对象时接收字典作为参数。

JsonResponse对象的content-type为'application/json'。

2.例子

真实例子

3.Ajax例子流程

什么是Ajax?

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,。对页面进行局的刷新,ajax请求都在后台。并在网页上进行显示


1.发起ajax请求:jquery发起
2.执行相应的视图函数,返回json内容
3.执行相应的回调函数。通过判断json内容,进行相应处理。

Ajax登录案例

  1. 首先分析出请求地址时需要携带的参数。
  2. 视图函数处理完成之后,所返回的json的格式
1. 显示出登录页面

a) 设计url,通过浏览器访问 http://127.0.0.1:8000/login_ajax 时显示登录页面。

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

c) 编写模板文件login_ajax.html。在里面写jquery代码发起ajax请求

2.登录校验功能

a) 设计url,点击登录页的登录按钮发起请求http://127.0.0.1:8000/login_ajax_check时进行登录校验。

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

接收post提交过来的数据。

进行登录校验,并返回json内容。 JsonRepsone

Json****格式如下:

{'res':'1'} #表示登录成功

{'res':'0'} #表示登录失败

1.配置环境
  • 在test3文件下新建一个static文件夹,再在static文件夹下建两个文件夹,一个叫js一个叫css


  • 将jquery文件放入到js文件夹中

链接:https://pan.baidu.com/s/1C89EieCgAi5hfpQiJybSvg
提取码:k23v
这是jquery文件

  • 打开test3/settings.py文件,在文件最底部,配置静态文件查找路径
DEBUG = True
...
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

这里的DEBUG也改为True


2.将网站首页显示出来
  • 修改url文件
url(r'^$', views.index),
  • 修改views.py文件
def index(request):
    return HttpResponse('

网站首页

')
  • 运行程序,显示网址:


3.设计登陆页面
  • 配置url.py
url(r'^login/$',views.login_show),
  • 修改views.py文件
def login_show(request):
    return render(request,'booktest/login.html')
  • 在templates/booktest/目录下新建一个login.html文件

在编辑html文件标签时,输入标签名称+Tab键可以自动补全




    
    登陆界面


用户名:
密码:

  • 配置校验页面的url
url(r'^login_ajax_check/$',views.login_ajax_check),
  • 配置views.py文件
from django.http import JsonResponse
...
# /login_ajax_check
def login_ajax_check(request):
    '''ajax登录校验'''
    # 1.获取用户名和密码
    username = request.POST.get('username')
    password = request.POST.get('password')
    print(username)
    print(password)
    # 2.进行校验,返回json数据
    if username == 'zxy' and password == '123':
        # 用户名密码正确
        return JsonResponse({'res':1})
        # return redirect('/index') ajax请求在后台,不要返回页面或者重定向
    else:
        # 用户名或密码错误
        return JsonResponse({'res':0})
  • 编写loginhtml 代码:



    
    登陆界面
    {# 导入Jq #}
    
    
    


用户名:
密码:

  • 我们进入到开发者模式中(F12)
  • 登陆成功的时候它会返回两个请求:


  • 登陆失败的时候 会返回一个ajax请求:


  • 并且其返回0这个数字


  • 豆瓣中的ajax返回


4.下载扩展包

http://ext.xiangtatech.com/category/devtool

进入这个网址,可以下载扩展包,安装这几个扩展包:

  • JSON Viewer


  • XPath Helper


  • 当然,如果下载不下来 可以下载蓝灯,在GitHub上面便可下载~

https://github.com/tracydk/forum 蓝灯官方网址

  • 我们将输入正确的返回页面改为login


5.ajax代码执行过程如下:

1.发起请求。
2.服务器端视图函数执行。
3.执行回调函数。


3.子类HttpResponseRedirect

当一个逻辑处理完成后,不需要向客户端呈现数据,而是转回到其它页面,如添加成功、修改成功、删除成功后显示数据列表,而数据的列表视图已经开发完成,此时不需要重新编写列表的代码,而是转到这个视图就可以,此时就需要模拟一个用户请求的效果,从一个视图转到另外一个视图,就称为重定向。

Django中提供了HttpResponseRedirect对象实现重定向功能,这个类继承自HttpResponse,被定义在django.http模块中,返回的状态码为302。
这里的例子我们在上次笔记中已经写过,就不再多说
示例

  • 在booktest/views.py文件中定义视图red1,代码如下:
from django.http import HttpResponseRedirect
...
# 定义重定义向视图,转向首页
def red1(request):
    return HttpResponseRedirect('/')
  • 在booktest/urls.py文件中配置url。
url(r'^red1/$', views.red1),
  • 在地址栏中输入网址如下:
    http://127.0.0.1:8000/red1/
重定向简写函数redirect

在django.shortcuts模块中为重定向类提供了简写函数redirect。

  • 修改booktest/views.py文件中red1视图,代码如下:
from django.shortcuts import redirect
...
def red1(request):
    return redirect('/')

三..状态保持

浏览器请求服务器是无状态的。无状态指一次用户请求时,浏览器、服务器无法知道之前这个用户做过什么,每次请求都是一次新的请求。无状态的应用层面的原因是:浏览器和服务器之间的通信都遵守HTTP协议。根本原因是:浏览器与服务器是使用Socket套接字进行通信的,服务器将请求结果返回给浏览器之后,会关闭当前的Socket连接,而且服务器也会在处理页面完毕之后销毁页面对象。

有时需要保存下来用户浏览的状态,比如用户是否登录过,浏览过哪些商品等。 实现状态保持主要有两种方式:

在客户端存储信息使用Cookie。
在服务器端存储信息使用Session。

1.Cookie

Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明。Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是浏览器设置为启用cookie)。Cookie名称和值可以由服务器端开发自己定义,这样服务器可以知道该用户是否是合法用户以及是否需要重新登录等。服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息,以判断在HTTP传输中的状态。Cookies最典型记住用户名。
Cookie是存储在浏览器中的一段纯文本信息,建议不要存储敏感信息如密码,因为电脑上的浏览器可能被其它人使用。

1.Cookie的特点
  • Cookie以键值对的格式进行信息的存储。
  • Cookie基于域名安全,不同域名的Cookie是不能互相访问的,如访问neuedu.cn时向浏览器中写了Cookie信息,使用同一浏览器访问baidu.com时,无法访问到neuedu.cn写的Cookie信息。
  • 当浏览器请求某网站时,会将浏览器存储的跟网站相关的所有Cookie信息提交给网站服务器。

典型应用:记住用户名,网站的广告推送。*

说明:这些广告推送的商品是基于你曾经在淘宝上点击的商品类别等条件筛选出来的,看上去这是在凤凰网上访问淘宝网的Cookie,但是事实不是这样的,一般是采用iframe标签嵌套一个淘宝的广告页面到凤凰网的页面上,所以淘宝的Cookie并没有被凤凰网读取到,而是依然交给淘宝网读取的,可以通过"开发者工具"查看元素,如下图



接下来讲解如何在Django中实现Cookie的读写。

2.设置Cookie
  • 打开booktest/views.py文件,创建视图cookie_set。
def cookie_set(request):
    response = HttpResponse("

设置Cookie,请查看响应报文头

") response.set_cookie('h1', bytes('你好', 'utf-8').decode('ISO-8859-1')) return response
  • 打开booktest/urls.py文件,配置url。
url(r'^cookie_set/$',views.cookie_set),
  • 在浏览器输入如下网址:http://127.0.0.1:8000/cookie_set/
  • 打开开发者模式,可以看到Cooie信息:


3.读取Cookie
  • 打开booktest/views.py文件,创建视图cookie_get
#读取Cookie
def cookie_get(request):
    response = HttpResponse("

读取Cookie,数据如下

") if 'h1' in request.COOKIES: response.write('

'+request.COOKIES['h1'].encode("ISO-8859-1").decode('utf-8')+'

') return response
  • 打开booktest/urls.py文件,配置url。
url(r'^cookie_get/$',views.cookie_get),
  • 在浏览器输入如下网址:http://127.0.0.1:8000/cookie_get/
  • 打开开发者模式,可以看到Cooie信息:



2.Session

对于敏感、重要的信息,建议要储在服务器端,不能存储在浏览器中,如用户名、余额、等级、验证码等信息。

在服务器端进行状态保持的方案就是Session。

1.启用Session

Django项目默认启用Session。
打开test3/settings.py文件,在项MIDDLEWARE_CLASSES中启用Session中间件。



禁用Session:将Session中间件删除。

2.存储方式

打开test3/settings.py文件,设置SESSION_ENGINE项指定Session数据存储的方式,可以存储在数据库、缓存、Redis等。

  • 存储在数据库中,如下设置可以写,也可以不写,这是默认存储方式。
SESSION_ENGINE='django.contrib.sessions.backends.db'
  • 存储在缓存中:存储在本机内存中,如果丢失则不能找回,比数据库的方式读写更快。
SESSION_ENGINE='django.contrib.sessions.backends.cache'
  • 混合存储:优先从本机内存中存取,如果没有则从数据库中存取
SESSION_ENGINE='django.contrib.sessions.backends.cached_db'
  • 如果存储在数据库中,需要在项INSTALLED_APPS中安装Session应用。


  • 迁移后会在数据库中创建出存储Session的表。


由表结构可知,操作Session包括三个数据:键,值,过期时间。

3.依赖于Cookie

所有请求者的Session都会存储在服务器中,服务器如何区分请求者和Session数据的对应关系呢?
——答:在使用Session后,会在Cookie中存储一个sessionid的数据,每次请求时浏览器都会将这个数据发给服务器,服务器在接收到sessionid后,会根据这个值找出这个请求者的Session。
——结果:如果想使用Session,浏览器必须支持Cookie,否则就无法使用Session了。
——存储Session时,键与Cookie中的sessionid相同,值是开发人员设置的键值对信息,进行了base64编码,过期时间由开发人员设置。

4.对象及方法:

通过HttpRequest对象的session属性进行会话的读写操作。

  • 以键值对的格式写session
request.session['键']=值
  • 根据键读取值。
request.session.get('键',默认值)
  • 清除所有session,在存储中删除值部分。
request.session.clear()
  • 清除session数据,在存储中删除session的整条数据。
request.session.flush()
  • 删除session中的指定键及值,在存储中只删除某个键及对应的值。
del request.session['键']
  • 设置会话的超时时间,如果没有指定过期时间则两个星期后过期。
request.session.set_expiry(value)
  • 如果value是一个整数,会话将在value秒没有活动后过期。
  • 如果value为0,那么用户会话的Cookie将在用户的浏览器关闭时过期。
  • 如果value为None,那么会话永不过期。

2.读取session

  • 配置url文件
url(r'^session_set/$',views.session_set),
  • 配置views.py文件
def session_set(request):
    request.session['h1']='hello'
    return  HttpResponse('写入session')
  • 打开浏览器,输入网址:
    http://127.0.0.1:8000/session_set/
  • 打开数据库的表,刷新


  • 复制session_data的值:
    OTcyMmMyMjIyNmI5Mzk2YWRmNmQ0ZDgwOTIwN2QwN2I2YmJmNzg2Mzp7ImgxIjoiaGVsbG8ifQ==
  • 打开这个网址:
    https://base64.supfree.net/
  • 将值输入进去,点击解密:


3.删除session

  • 打开booktest/views.py文件,修改session_set视图如下:
def session_test(request):
    # request.session['h1']='hello'
    # h1=request.session.get('h1')
    del request.session['h1']
    return HttpResponse('ok')
  • 刷新浏览器:


  • 刷新数据库


  • 将session_data数据复制,进入base64解码
    MWFhMDc1OTYxYWFmODkwOTFiOTE2ODJjMjY5M2I2NmI5MDhiOGI3Njp7fQ==



    如果将所有的键及值都删除,逐个调用的话太麻烦,那我们可以使用clear()方法:

  • 打开booktest/views.py文件,修改session_set视图如下:
def session_test(request):
    # request.session['h1']='hello'
    # h1=request.session.get('h1')
    # del request.session['h1']
    request.session.flush()
    return HttpResponse('ok')
  • 刷新浏览器,在数据库命令行中查询如下图。
select * from django_session;

(此文章仅作为个人学习笔记使用,如有错误欢迎指正~)

你可能感兴趣的:(web应用框架——Ajax登录示例+保持状态(cookie和session))