|
1，前后端分离
1.1 前后端分离定义
前端
即客户端，负责渲染用户显示界面【如web的js动态渲染页面, 安卓， IOS，pc客户端等】
后端
即服务器端，负责接收http请求，处理数据
API
Application Programming Interface ?是一些预先定义的函数，或指软件系统不同组成部分衔接的约定
1.2 前后端分离请求过程
前端通过http请求后端API
后端以json形式返回前端数据
前端生成用户显示界面【如html , ios , android】
1.3 判断前后端分离核心标准
谁生成显示页面
后端生成【前后端未分离】 ?ex: django -> HttpResponse(html)
前端生成【前后端分离】
1.4 前后端分离优点
各司其职
前端：视觉层面，兼容性，前端性能优化
后端：并发，可用性，性能
前端可以有效率用客户端处理数据，有效降低服务端压力
服务端错误不会直观的反馈到用户
后端灵活搭配各类前端 - 如安卓等
前端+后端可完全并行开发，加快开发效率
1.4 分离常见问题
问题?? ?答案
如何解决http无状态？?? ?采用token(详情见下方章节)
如果前端为JS，如何解决跨域问题？?? ?采用CORS(详情见下方章节)
如何解决csrf问题?? ?采用token
Single Page web Application 是否会影响Search Engine Optimization效果?? ?会，前后端分离后，往往页面不存在静态文字【例如新闻的详细内容】
”老板，这个逻辑到底是让前端做还是后端做啊?“?? ?底线原则: 数据校验需要前后端都做
”老板，前端工作压力太大了啊“?? ?团队协作不能只是嘴上说说
动静分离和前后端分离是一个意思么？?? ?动静分离指的是 css/js/img这类静态资源跟服务器拆开部署，典型方案-静态资源交由CDN厂商处理
1.5 ?实现方式
Django 后端只返回json
前端 -> ?ex: js向服务器发出ajax请求，获取数据，拿到数据后动态生成html
前端服务和后端服务 分开部署
2，token - 令牌
2.1 学前须知
2.1.1 base64 '防君子不防小人'?
方法?? ?作用?? ?参数?? ?返回值
b64encode?? ?将输入的参数转化为base64规则的串?? ?预加密的明文，类型为bytes；例：b‘chaogege’?? ?base64对应编码的密文，类型为bytes；例:b'Z3VveGlhb25hbw=='
b64decode?? ?将base64串 解密回 明文?? ?base64密文,类型为bytes;例：b'Z3VveGlhb25hbw=='?? ?参数对应的明文，类型为bytes；例：b'chaogege'
urlsafe_b64encode?? ?作用同b64encode,但是会将 '+'替换成 '-',将'/'替换成'_'?? ?同b64encode?? ?同b64encode
urlsafe_b64decode?? ?作用同b64decode?? ?同b64decode?? ?同b64decode
代码演示:

import base64
?
string_info = b'chaogege'
?
# base64加密
bs_result = base64.b64encode(string_info)
print(bs_result)
# bs_result: b'Y2hhb2dlZ2U='
?
# base64解密
ss_result = base64.b64decode(bs_result)
print(ss_result)
# ss_result: b'chaogege'
2.1.2 SHA-256 ?
安全散列算法的一种（hash）
hash三大特点：
定长输出
不可逆
雪崩

from hashlib import sha256
?
s = sha256() ?# 1.创建sha256对象
s.update(b'chaogege') ?# 2.添加欲hash的内容，类型为 bytes
binary_result = s.digest() # 3.获取最终结果（纯二进制，用于计算）
hex_result = s.hexdigest() # 4.十六进制结果（十六进制，用于存储）
?
# binary_result: b'j\x89\x16\x18\xce\x86C\xbfz^\xf5\x83q\xad\xd6\x8a\xa7\x97\x81\xfb\xaa\xa4d\x1b\xc5\xc9\xdd\xfa\x8b\x0c(\xa0'
# hex_result: 6a891618ce8643bf7a5ef58371add68aa79781fbaaa4641bc5c9ddfa8b0c28a0
print(binary_result)
print(hex_result)
2.1.3 HMAC-SHA256?
HMAC-SHA256是一种通过特别计算方式之后产生的消息认证码，使用散列算法同时结合一个加密密钥。
它可以用来保证数据的完整性，同时可以用来作某个消息的身份验证

import hmac
?
# 1. 生成hmac对象
# 参数1：密钥key，bytes类型，
# 参数2：欲加密的串，bytes类型
# 参数3：hmac的算法，指定为SHA256
?
key = b'123456'
string = b'{"username":"chaogege"}'
h = hmac.new(key, string, digestmod='SHA256')
result = h.hexdigest() # 获取最终结果
?
# result: 6ae909d8d5f8258d04a806d8ce1e5915e2351eda3efbcc1b9c535c41137c55ab
print(result)
2.2 JWT - ?json-web-token
2.2.1 三大组成
header
格式为字典-元数据格式如下

{'alg':'HS256', 'typ':'JWT'}
#alg代表要使用的 算法
#typ表明该token的类别 - 此处必须为 大写的 JWT
?? ??? ? 该部分数据需要转成json串并用base64 加密
payload
格式为字典-此部分分为公有声明和私有声明
公共声明：JWT提供了内置关键字用于描述常见的问题
此部分均为可选项，用户根据自己需求 按需添加key，常见公共声明如下

{'exp':xxx, # Expiration Time 此token的过期时间的时间戳
?'iss':xxx，# (Issuer) Claim 指明此token的签发者
?'iat':xxx, # (Issued At) Claim 指明此创建时间的时间戳
}
私有声明：用户可根据自己业务需求，添加自定义的key，例如如下：

{'username': 'chaogege'}
公共声明和私有声明均在同一个字典中；转成json串并用base64加密
signature 签名
签名规则如下
根据header中的alg确定 具体算法进行加密，以下用 HS256为例
?? ??? ?sign = HS256(自定义的key , ? base64后的header + '.' + base64后的payload)
对加密后的结果进行base64编码
sign = base64.b64encode(sign)
? ? ? ? 解释：用自定义的key, 对base64后的header + '.' + base64后的payload进行hmac计算，然后再次进行base64编码
2.2.2 jwt结果格式
base64(header) + '.' + base64(payload) + '.' + ?base64(sign)
最终结果如下：

b'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6Imd1b3hpYW9uYW8iLCJpc3MiOiJnZ2cifQ.Zzg1u55DCBqPRGf9z3-NAn4kbA-MJN83SxyLFfc5mmM'
2.2.3 校验jwt规则
解析header, 确认alg
签名校验 - 根据传过来的header和payload按 alg指明的算法进行签名，将签名结果和传过来的sign进行对比，若对比一致，则校验通过
获取payload自定义内容
2.2.4 pyjwt
安装 pip3 install pyjwt
常用方法
方法?? ?参数说明?? ?返回值
encode(payload, key, algorithm)? ? ?payload: ?jwt三大组成中的payload,需要组成字典，按需添加公有声明和私有声明<br />例如: {'username': 'chaogege', 'exp': 1562475112}<br />参数类型： dict?? ?token串<br />返回类型：string
key : 自定义的加密key<br />参数类型：str?? ?
algorithm: ?需要使用的加密算法[HS256, RSA256等] <br />参数类型：str?? ?
decode(token,key,algorithm,)?? ?token: ? token串<br />参数类型： bytes/str?? ?payload明文<br />返回类型：dict
key : 自定义的加密key ,需要跟encode中的key保持一致<br />参数类型：str?? ?
algorithm: ?同encode?? ?
issuer: ?发布者，若encode payload中添加 'iss' 字段，则可针对该字段校验<br />参数类型：str?? ?若iss校验失败，则抛出jwt.InvalidIssuerError
?? ??? ?PS: ?若encode得时候 payload中添加了exp字段; 则exp字段得值需为 当前时间戳+此token得有效期时间
??? ??? ?例如希望token 300秒后过期 ?{'exp': time.time() + 300}; ?在执行decode时，若检查到exp字段，且token过期，则抛出jwt.ExpiredSignatureError
pyjwt使用示例

import jwt
import time
?
# 生成token
token = jwt.encode({'uname':'chaogege'}, '123456',algorithm='HS256')
?
# 验证签发者：issuer
token = jwt.encode({'uname':'chaogege','iss':'dadashop.com'}, '123456', algorithm='HS256')
result = jwt.decode(token, '123456', algorithms='HS256', issuer='dadashop.com')
print(result)
?
# 验证有效期
token = jwt.encode({'uname':'chaogege', 'exp':time.time()+10}, '123456', algorithm='HS256')
time.sleep(2)
result = jwt.decode(token, '123456', algorithms='HS256')
print(result)
3， CORS - Cross-origin resource sharing - 跨域资源共享
3.1 什么是CORS
?? ??? ?允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制
3.2 特点
浏览器自动完成（在请求头中加入特殊头 或 发送特殊请求）
服务器需要支持（响应头中需要有特殊头）
3.3 简单请求(Simple requests)和预检请求(Preflighted requests)
满足以下全部条件的请求为 简单请求
请求方法如下：
GET ?or HEAD or POST
请求头仅包含如下:
Accept
Accept-Language
Content-Language
Content-Type
Content-Type 仅支持如下三种：
application/x-www-form-urlencoded
multipart/form-data
text/plain
?? ??? ??? ?不满足以上任意一点的请求都是 预检请求
3.4 简单请求发送流程
请求
求头中 携带 Origin，该字段表明自己来自哪个域
响应
如果请求头中的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
3.5 预检请求发送流程
OPTION 请求发起，携带如下请求头
请求头?? ?作用?? ?备注
Origin?? ?表明此请求来自哪个域?? ?必选
Access-Control-Request-Method?? ?此次请求使用方法?? ?必选
Access-Control-Request-Headers?? ?此次请求使用的头?? ?必选
OPTION 接受响应阶段，携带如下响应头
响应头?? ?作用?? ?备注
Access-Control-Allow-Origin?? ?同简单请求?? ?必选
Access-Control-Allow-Methods?? ?告诉浏览器，服务器接受得跨域请求方法?? ?必选
Access-Control-Allow-Headers?? ?返回所有支持的头部，当request有<br/>?? ??? ??? ?‘Access-Control-Request-Headers’时，该响应头必然回复?? ?必选
Access-Control-Allow-Credentials?? ?同简单请求?? ?可选
Access-Control-Max-Age?? ?OPTION请求缓存时间，单位s?? ?可选
?? ?
主请求阶段?
请求头?? ?作用?? ?备注
Origin?? ?表明此请求来自哪个域?? ?
主请求响应阶段
响应头?? ?作用?? ?备注
Access-Control-Allow-Origin?? ?当前服务器接受的域?? ?
3.6 Django支持?? ??? ? ??
django-cors-headers官网 https://pypi.org/project/django-cors-headers/
离线安装：

pip3 freeze|grep 'cors'检查是否有内容输出
tar -zxvf django-cors-headers-3.0.2.tar ?解压离线文件
cd django-cors-headers-3.0.2 ?cd到该文件
sudo python3 setup.py install ?? 安装
如果django版本被升到了其他版本：
sudo pip3 uninstall django
sudo pip3 install django==1.11.8
配置流程

1，INSTALLED_APPS 中添加 corsheaders
2，MIDDLEWARE 中添加 corsheaders.middleware.CorsMiddleware
??位置尽量靠前，官方建议 ‘django.middleware.common.CommonMiddleware’ 上方
????
3，CORS_ORIGIN_ALLOW_ALL ?布尔值 ?如果为True 白名单不启用?
4，CORS_ORIGIN_WHITELIST =[
? ? "https://example.com"
? ? ]?
5, CORS_ALLOW_METHODS = (
????'DELETE',
????'GET',
????'OPTIONS',
????'PATCH',
????'POST',
????'PUT',
? ? )
6, CORS_ALLOW_HEADERS = (
????'accept-encoding',
????'authorization',
????'content-type',
????'dnt',
????'origin',
????'user-agent',
????'x-csrftoken',
????'x-requested-with',
? ? )
7, CORS_PREFLIGHT_MAX_AGE ?默认 86400s
?
# 8：有没有一些特殊的自定义响应头，需要ajax那边从响应头取值的，一般不用配置，如果你写了一个自定义的头前端要拿，那就配置
8, CORS_EXPOSE_HEADERS ?[]
?
# 9：告诉浏览器到底要不要把跨域的cookie送上来，默认不要，跨域的cookie不要
9, CORS_ALLOW_CREDENTIALS ?布尔值， 默认False
4，RESTful -Representational State Transfer
4.1 什么是RESTful
资源 （Resources）
网络上的一个实体，或者说是网络上的一个具体信息，并且每个资源都有一个独一无二得URI与之对应；获取资源-直接访问URI即可
表现层（Representation）
如何去表现资源 ?- 即资源得表现形式；如HTML , xml ?, JPG , json等
状态转化（State Transfer）
访问一个URI即发生了一次 客户端和服务端的交互；此次交互将会涉及到数据和状态得变化
客户端需要通过某些方式触发具体的变化 ?- ?HTTP method 如 GET， POST，PUT，PATCH，DELETE 等
4.2 RESTful的特征
每一个URI代表一种资源
客户端和服务器端之前传递着资源的某种表现
客户端通过HTTP的几个动作 对 资源进行操作 - 发生‘状态转化’
4.3 如何设计符合RESTful 特征的API
协议 ?- http/https
域名
域名中体现出api字样，如 ??
https://api.example.com
or
https://example.org/api/
版本:
https://api.example.com/v1/
路径 -
路径中避免使用动词，资源用名词表示，案例如下

https://api.example.com/v1/users
https://api.example.com/v1/animals
HTTP动词语义
请求动词?? ?说明
GET（SELECT）?? ?从服务器取出资源（一项或多项）
POST（CREATE）?? ?在服务器新建一个资源
PUT（UPDATE）?? ?在服务器更新资源（客户端提供改变后的完整资源）
PATCH（UPDATE）?? ?在服务器更新资源（客户端提供改变的属性）
DELETE（DELETE）?? ?从服务器删除资源。
具体案例如下：
请求动作?? ?请求资源?? ?说明
GET?? ?/zoos?? ?列出所有动物园
POST?? ?/zoos?? ?新建一个动物园
GET?? ?/zoos/ID?? ?获取某个指定动物园的信息
PUT?? ?/zoos/ID?? ?更新某个指定动物园的信息（提供该动物园的全部信息）
PATCH?? ?/zoos/ID?? ?更新某个指定动物园的信息（提供该动物园的部分信息）
DELETE?? ?/zoos/ID?? ?删除某个动物园
GET?? ?/zoos/ID/animals?? ?列出某个指定动物园的所有动物
DELETE?? ?/zoos/ID/animals/ID?? ?删除某个指定动物园的指定动物
巧用查询字符串

?limit=10：指定返回记录的数量
?offset=10：指定返回记录的开始位置。
?page=2&per_page=100：指定第几页，以及每页的记录数。
?sortby=name&order=asc：指定返回结果按照哪个属性排序，以及排序顺序。
?type_id=1：指定筛选条件
状态码
用HTTP响应码表达 此次请求结果，例如
响应码?? ?说明
200 OK - [GET]?? ?服务器成功返回用户请求的数据
201 CREATED - [POST/PUT/PATCH]?? ?用户新建或修改数据成功。
202 Accepted - [*]?? ?表示一个请求已经进入后台排队（异步任务）
204 NO CONTENT - [DELETE]?? ?用户删除数据成功。
400 INVALID REQUEST - [POST/PUT/PATCH]?? ?用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
401 Unauthorized - [*]?? ?表示用户没有权限（令牌、用户名、密码错误）。
403 Forbidden - [*]?? ?表示用户得到授权（与401错误相对），但是访问是被禁止的。
404 NOT FOUND - [*]?? ?用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
406 Not Acceptable - [GET]?? ?用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
410 Gone -[GET]?? ?用户请求的资源被永久删除，且不会再得到的。
422 Unprocesable entity - [POST/PUT/PATCH]?? ?当创建一个对象时，发生一个验证错误。
500 INTERNAL SERVER ERROR - [*]?? ?服务器发生错误
自定义内部code 进行响应
如 返回结构如下 ?{'code':200, ?'data': {}, 'error': xxx}
返回结果
根据HTTP 动作的不同，返回结果的结构也有所不同
请求动作?? ?请求资源?? ?返回
GET?? ?/users：?? ?返回资源对象的列表（数组）
GET?? ?/users/chaogege?? ?返回单个资源对象
POST?? ?/users：?? ?返回新生成的资源对象
PUT?? ?/users/chaogege?? ?返回完整的资源对象
PATCH?? ?/users/chaogege?? ?返回完整的资源对象
DELETE?? ?/users/chaogege?? ?返回一个空文档
|