1,前后端分离
1.1 什么是前后端分离
前端: 即客户端,负责渲染用户显示界面【如web的js动态渲染页面, 安卓, IOS,pc客户端等】
后端:即服务器端,负责接收http请求,处理数据
不分离时,return render( )
分离时:return JsonResponse( ).
API: Application Programming Interface 是一些预先定义的函数[接口函数],或指软件系统不同组成部分衔接的约定。
前后端分离 完整请求过程
1,前端通过http请求后端API
2,后端以json形式返回前端数据
3,前端生成用户显示界面【如html , ios , android】
判断前后端分离得核心标准: 谁生成显示页面
1,后端生成【前后端未分离】 django -> HttpResponse(html)/render()
2, 前端生成【前后端分离】
1.2 优点
1,各司其职
前端:视觉层面,兼容性,前端性能优化
后端:并发,可用性,性能
2,前端可以有效利用客户端处理数据,有效降低服务端压力
3,服务端错误不会直观的反馈到用户
4,后端灵活搭配各类前端 - 如安卓等
5,前端+后端可完全并行开发,加快开发效率
1.3 分离常见问题
问题 | 答案 |
---|---|
如何解决http无状态? | 采用token(详情见下方章节),session和cookies。 |
如果前端为JS,如何解决跨域问题? | 采用CORS(详情见下方章节) |
如何解决csrf问题 | 采用token。 |
是否会影响Search Engine Optimization(SEO)效果 | 会,前后端分离后,往往页面不存在静态文字【例如新闻的详细内容】. |
”老板,这个逻辑到底是让前端做还是后端做啊?“ | 底线原则: 数据校验需要前后端都做 |
”老板,前端工作压力太大了啊“ | 团队协作不能只是嘴上说说 |
动静分离和前后端分离是一个意思么? | 动静分离指的是 css/js/img这类静态资源跟服务器拆开部署,典型方案-静态资源交由CDN厂商处理 |
1.4 实现方式
1,Django 后端只返回json
2, 前端 -> ex: js向服务器发出ajax请求,获取数据,拿到数据后动态生成html
3, 前端服务和后端服务 分开部署
2,token - 令牌
学前须知:
1,base64 ‘防君子不防小人’ [编码/解码]
方法 | 作用 | 参数 | 返回值 |
---|---|---|---|
b64encode | 将输入的参数转化为base64规则的串 | 预加密的明文,类型为bytes;例:b‘guoxiaonao’ | base64对应编码的密文,类型为bytes;例:b’Z3VveGlhb25hbw==’ |
b64decode | 将base64串 解密回 明文 | base64密文,类型为bytes;例:b’Z3VveGlhb25hbw==’ | 参数对应的明文,类型为bytes;例:b’guoxiaonao’ |
urlsafe_b64encode | 作用同b64encode,但是会将 ‘+‘替换成 ‘-’,将’/‘替换成’_’ | 同b64encode | 同b64encode |
urlsafe_b64decode | 作用同b64decode | 同b64decode | 同b64decode |
代码演示:
base64的作用:将数据中的不可见字符编码成可见字符,防止不同路由设备传输造成的传输错误。对数据准备性要求比较高的场合都会编码->网络传输->解码。
import base64
#base64加密
s = b'guoxiaonao'
b_s = base64.b64encode(s)
#b_s打印结果为 b'Z3VveGlhb25hbw=='
#base64解密
ss = base64.b64decode(b_s)
#ss打印结果为 b'guoxiaonao'
2,SHA-256 安全散列算法的一种(hash)
hash三大特点:
1)定长输出 2)不可逆 3) 雪崩
import hashlib
s = hashlib.sha256() #创建sha256对象
s.update(b'xxxx') #添加欲hash的内容,类型为 bytes
s.digest() #获取最终结果
s.digest()# 针对结果再进行计算时,使用它。例如在生成token时。
s.hexdigest() # 可视字符,一般用于存储和传输。
3,HMAC-SHA256 是一种通过特别计算方式之后产生的消息认证码,使用散列算法同时结合一个加密密钥。它可以用来保证数据的完整性,同时可以用来作某个消息的身份验证
import hmac
#生成hmac对象
#第一个参数为加密的key,bytes类型,
#第二个参数为欲加密的串,bytes类型
#第三个参数为hmac的算法,指定为SHA256
h = hmac.new(key, str, digestmod='SHA256')
h.digest() #获取最终结果
2.1 JWT - json-web-token
1,三大组成
1,header
格式为字典-元数据格式如下
{
'alg':'HS256', 'typ':'JWT'}
#alg代表要使用的 算法
#typ表明该token的类别 - 此处必须为 大写的 JWT
该部分数据需要转成json串并用base64 加密
2,payload
格式为字典-此部分分为公有声明和私有声明
公共声明:JWT提供了内置关键字用于描述常见的问题
此部分均为可选项,用户根据自己需求 按需添加key,常见公共声明如下:
{
'exp':xxx, # Expiration Time 此token的过期时间的时间戳
'iss':xxx,# (Issuer) Claim 指明此token的签发者
'iat':xxx, # (Issued At) Claim 指明此创建时间的时间戳
'aud':xxx, # (Audience) Claim 指明此token签发面向群体
}
私有声明:用户可根据自己业务需求,添加自定义的key,例如如下:
{
'username': 'guoxiaonao'}
公共声明和私有声明均在同一个字典中;转成json串并用base64加密
3,signature 签名
签名规则如下:
根据header中的alg确定 具体算法,以下用 HS256为例
HS256(自定义的key , base64后的header + ‘.’ + base64后的payload)
解释:用自定义的key, 对base64后的header + ‘.’ + base64后的payload进行hmac计算
2,jwt结果格式
base64(header) + ‘.’ + base64(payload) + ‘.’ + base64(sign)
最终结果如下: b’eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6Imd1b3hpYW9uYW8iLCJpc3MiOiJnZ2cifQ.Zzg1u55DCBqPRGf9z3-NAn4kbA-MJN83SxyLFfc5mmM’
3,校验jwt规则
1,解析header, 确认alg
2,签名校验 - 根据传过来的header和payload按 alg指明的算法进行签名,将签名结果和传过来的sign进行对比,若对比一致,则校验通过
3,获取payload自定义内容
4,pyjwt
1,安装 pip3 install pyjwt
方法 | 参数说明 | 返回值 |
---|---|---|
encode(payload, key, algorithm) | payload: jwt三大组成中的payload,需要组成字典,按需添加公有声明和私有声明 例如: {‘username’: ‘guoxiaonao’, ‘exp’: 1562475112} 参数类型: dict |
token串 返回类型:bytes |
key : 自定义的加密key 参数类型:str |
||
algorithm: 需要使用的加密算法HS256 参数类型:str |
||
decode(token,key,algorithm,) | token: token串 参数类型: bytes/str |
payload明文 返回类型:dict |
key : 自定义的加密key ,需要跟encode中的key保持一致 参数类型:str |
||
algorithm: 同encode | ||
issuer: 发布者,若encode payload中添加 ‘iss’ 字段,则可针对该字段校验 参数类型:str |
若iss校验失败,则抛出jwt.InvalidIssuerError | |
audience:签发的受众群体,若encode payload中添加’aud’字段,则可针对该字段校验 参数类型:str |
若aud校验失败,则抛出jwt.InvalidAudienceError |
PS: 若encode得时候 payload中添加了exp字段; 则exp字段得值需为 当前时间戳+此token得有效期时间, 例如希望token 300秒后过期 {‘exp’: time.time() + 300}; 在执行decode时,若检查到exp字段,且token过期,则抛出jwt.ExpiredSignatureError
对与我们这个博客项目案例而言:服务器的5000端口只返回页面,8000端口返回json数据。所以,项目中一定会跨域。
3, CORS - Cross-origin resource sharing - 跨域资源共享
1,什么是CORS
允许浏览器向跨源(协议 + 域名 + 端口)服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制
2,特点
1,浏览器自动完成(在请求头中加入特殊头 或 发送特殊请求)
2,服务器需要支持(响应头中需要有特殊头)
3,简单请求(Simple requests)和预检请求(Preflighted requests)
满足以下全部条件的请求为 简单请求
1,请求方法如下:
GET or HEAD or POST
2,请求头仅包含如下:
Accept
Accept-Language
Content-Language
Content-Type
3,Content-Type 仅支持如下三种:
application/x-www-form-urlencoded
multipart/form-data
text/plain
不满足以上任意一点的请求都是 预检请求
4,简单请求发送流程
1,请求
请求头中 携带 Origin,该字段表明自己来自哪个域
2,响应
如果请求头中的Origin在服务器接受范围内, 则返回如下头
响应头 | 作用 | 备注 |
---|---|---|
Access-Control-Allow-Origin | 服务器接受得域 | |
Access-Control-Allow-Credentials | 是否接受Cooike | 可选 |
Access-Control-Expose-Headers | 默认情况下,xhr只能拿到如下响应头:Cache-Control,Content-Language,Content-Type,Expires,Last-Modified;如果有需要获取其他头,需在此指定 | 可选 |
如果服务器不接受此域,则响应头中不包含 Access-Control-Allow-Origin
5,预检请求发送流程
1,OPTIONS 请求发起,携带如下请求头 [协商请求]
请求头 | 作用 | 备注 |
---|---|---|
Origin | 表明此请求来自哪个域 | 必选 |
Access-Control-Request-Method | 此次请求使用方法 | 必选 |