Python: 前后端分离博客项目

多人使用博客系统。采用BS架构实现。市面上多数某某系统归根结底都是这种设计。

博客系统，核心模块有：

1. 用户管理
   • 注册、登录
   • 删除查用户
2. 博文管理
   • 增删改查博文

需要数据库，本次使用Mysql8+, InnoDB引擎。

需要支持多用户登录，各自可以管理自己的博文(增删改查)，管理是不公开的，但是博文是不需要登录就可以公开预览的。

先不要思考过多的功能，先完成最小的核心需求代码。

• Django采用MVC架构设计的开源的WEB快速开发框架。
• 优点：
  1. 能够快速开发，自带ORM、Template、Form、Auth核心组件
  2. MVC设计模式
  3. 实用的管理后台Admin
  4. 简洁的url设计
  5. 周边插件丰富
• 缺点：架构重、同步阻塞
• 所有Django的设计目标就是一款大而全，便于企业快速开发项目的框架，因此企业应用较广。

• Python实用3.13.3
• Python虚拟环境：https://docs.python.org/zh-cn/3.13/library/venv.html
• Django的下载地址https://www.djangoproject.com/download/
• Django文档：https://docs.djangoproject.com/

Python版本依赖，参看

#安装python虚拟环境, 并启动
python -m venv .venv
.\.venv\Scripts\activate

#在虚拟环境中安装
python -m pip install Django==5.2.1

django-admin --version #查看当前django版本
django-admin --help #查看使用帮助
django-admin startproject --help #查看startproject命令帮助

注意：本文若未特殊声明，所有的命令操作都在项目的根目录下

当前目录下，创建名为blog的django项目

django-admin startproject blog .

上句命令就在当前项目根目录中构建了Django项目的初始文件。 . 点代表项目根目录。

F:\CLASSES\TPROJECTS\BLOG10 
├─ manage.py
 └─ blog
     ├─  settings.py
     ├─  urls.py  #路径映射
     ├─  wsgi.py
     ├─  asgi.py
     └─  __init__.py

重要文件说明

1. manage.py:本项目管理的命令行工具。应用创建、数据库迁移等都使用它完成
2. blog/settings.py：本项目的核心配置文件。
   • 应用、数据库配置
   • 模板、静态文件
   • 中间件、日志
   • 第三方插件配置
3. blog/urls.py:URL路径映射配置。项目初始，只配置了/admin的路由。
4. blog/wsgi:定义WSGI接口信息。部署用，一般无需改动。
   • return WSGIHandler()
     • __call__(self, environ, start_response)

主路由文件url.py

from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls), # /admin/ 路径对应，多级url处理
]

1、 创建管理员

• 命令=python manage.py createsuperuser=
  • 管理会用户名admin

  • 密码adminadmin

    python manage.py createsuperuser
    
    Username: admin
    Email address: [email protected]
    Password: 
    Password (again): 
    The password is too similar to the email address.
    

    会在auth_user表中创建admin用户

    mysql> select username,password from auth_user;
    | admin    | pbkdf2_sha256$1000000$Jxxxxx$xxxxxxxxxxxxxxxxxx= |
    

2、 本地化

• settings.py中可以设置语言、时区。语言名称可以查看=django\contrib\admin\locale=目录

  # 修改djweb/settings.py文件中对应变量
  LANGUAGE_CODE = 'en-us' #'zh-Hans' 
  TIME_ZONE = 'Asia/Shanghai' # 'UTC'
  USE_TZ = True
  

3、 启动WEB Server

python manage.py runserver #默认 127.0.0.1:8000
#python manage.py runserver 0.0.0.0:8000

• 访问http://127.0.0.1:8000/ 看到服务启动正常
• 访问http://127.0.0.1:8000/admin/ 可以登录后台管理界面
  • 注意：用户名密码为之前第一步创建管理员时设定的
  • 用户名：admin 密码：adminadmin
  • 可以在页面创建普通用户

4、 注册应用模块

• 注册后user可以被管理员用户在web界面进行增删改操作

登录后如果希望后来能够管理这些表，就需要在admin文件中注册对应的models

举例

#models.py
from django.db import models

# Create your models here.
class Post(models.Model):
    class meta:
        db_table="a"
    pass

在admin.py文件中注册

from django.contrib import admin

# Register your models here.
from .models import Post
admin.site.register(Post)

登录成功后，可以看到注册的表了。

路由功能就是实现URL模式匹配和处理函数之间的映射。

路由配置要在项目的urls.py中配置，也可以多级配置，在每一个应用中，建立一个urls.py文件配置路由映射。

官方文档：

• URL调度器: https://docs.djangoproject.com/zh-hans/5.2/topics/http/urls/
• path函数: https://docs.djangoproject.com/en/5.2/ref/urls/#django.urls.path
• url函数(Django 2.x之前)
  • url(regex,view,kwargs=None,name=None) 进行模式匹配
    1. regex: 正则表达式，与之匹配的URL会执行对应的第二个参数view
    2. view: 用于执行与正则表达式匹配的URL请求
    3. kwargs: 视图使用的字典类型的参数
    4. name: 用来反向获取URL
• path函数(2.x+)
  • path(route, view, kwargs=None, name=None)
    • 对URL进行模式匹配
    • 可以使用尖括号来捕获部分URL成分。一旦使用了尖括号提取成分，每一个成分都会变成一个 实参
    • 注入 到视图函数中，视图函数必须增加形参接收
    • 形参函数基本同url函数

还有一个re_path函数(2.x+)可以使用正则表达式，本质上就是url函数。

urls.py 内容如下

from django.contrib import admin
from django.urls import path
from django.urls import re_path
from django.http import HttpResponse,HttpRequest

def index(request:HttpRequest):
    """视图函数：请求进来返回响应"""
    res = HttpResponse(b"Hello word xdd")
    print(res.charset) #utf-8
    return res

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^$',index),
    re_path(r'^index$',index) #不同路径可以指向同一个函数执行
]

• 启动web服务=python manage.py runserver=
  1. 访问=http://127.0.0.1:8000/index=%E5%92%8C=http://127.0.0.1:8000/=%E5%8F%AF%E4%BB%A5%E7%9C%8B%E5%88%B0%E8%AE%BF%E9%97%AE%E7%95%8C%E9%9D%A2
• url的定义与访问
  1. url(r'^index/$',index)
     • =http://127.0.0.1:8000/index/=%E5%8F%AF%E4%BB%A5%E8%AE%BF%E9%97%AE
     • http://127.0.0.1:8000/index=可以访问，但会自动补一个=/
  2. url(r'^index$',index)
     • =http://127.0.0.1:8000/index=%E5%8F%AF%E4%BB%A5%E8%AE%BF%E9%97%AE
     • =http://127.0.0.1:8000/index/=%E4%B8%8D%E5%8F%AF%E4%BB%A5%E8%AE%BF%E9%97%AE
• 请求信息测试和JSON响应,修改上面index函数

from django.http import HttpResponse,HttpRequest,JsonResponse

def index(request:HttpRequest):
    """视图函数：请求进来返回响应"""
    d = {}
    d["method"] = request.method
    d["path"] = request.path
    d["path_info"] = request.path_info
    d["GETparams"] = request.GET

    return JsonResponse(d)

• 在项目中首页数使用HTML显示，为了加载速度快，一般多使用静态页面。如果首页内容多，还有部分数据需要变化，将变化部分使用AJAX技术从后台获取数据。
• 本次，为了学习模板技术，只将首页采用Django的模板技术实现。

• 在=djweb/settings.py=中，设置模板项目的路径

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) #这句话取项目根目录
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.abspath(os.path.join(BASE_DIR,'templates'))], #制定模板文件夹路径
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

• DIRS:列表，定义模板文件的搜索路径顺序。os.path.join(BASE_DIR,'templates')即项目根目录下templates目录，请构建这个目录。
  1. 项目根目录中构建templates文件夹。模板文件目录
• APP_DIRS:是否运行在每个已经安装的应用中查找模板。应用自己目录下游templates目录，例如：=django/contrilb/admin/templates=。如果应用需要可分离、可重用，建议吧模板放到应用目录下
• *BASE_DIR*是项目根目录，=os.path.join(BASE_DIR,'templates')=就是在manage.py这一层建立一个目录templates。这个路径就是以后默认找模板的地方。

• 模板页

  1. 新建html文件，在=/templates/index.html=目录下

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Django web 模板技术</title>
  </head>
  <body>
  我是模板，数据是{{content}}
  </body>
  </html>
  

• 模板处理

  1. *加载模板*：模板是一个文件，需要从磁盘读取并加载。要将模板放置在指定的模板文件夹中
  2. *渲染*：模板需要使用内容数据渲染
  3. 测试：修改=djweb/urls.py=文件中的index函数。

  from django.template import loader
  
  def index(request:HttpRequest):
      """视图函数：请求进来返回响应"""
      template = loader.get_template("index.html") #加载器模块搜索模板并加载它
      print(template.origin) #显示模板路径
      context = {"content":"www.xdd.com"} #字典数据
      return HttpResponse(template.render(context,request))
  

  1. 运行server python manage.py runserver
  2. 访问=http://127.0.0.1:8000/=%E7%95%8C%E9%9D%A2%E5%A6%82%E4%B8%8B%EF%BC%9A%E5%8F%AF%E4%BB%A5%E7%9C%8B%E5%88%B0

• render快捷渲染函数

  1. 上面2个步骤代码编写繁琐，Django提供了对其的封装-------–—快捷函数render。
  2. render(request,template_name,context=None) 返回HTTPResponse对象
     • template_name #模板名称
     • context 数据字典
     • render_to_string() 是其核心方法，其实就是拿数据替换HTML中的指定位置后返回一个字符串

  from django.shortcuts import  render
  
  def index(request:HttpRequest):
      """视图函数：请求进来返回响应"""
      return render(request,"index.html",{"content":"www.xdd.com"})
  

• REST(Representational State Transfer),表现层状态转移。
• 它首次出现在2000年Roy Fielding的博士论文中，Roy Fielding是HTTP规范的主要编写者之一。
  
• 表现层是资源的表现层，对于网络中的资源就需要URI(Uniform Resource Identifier)来指向。

• 接受用户通过Post方法提交的注册信息，提交的数据是JSON格式数据
• 检查email是否存在与数据库表中，如果存在返回错误状态码，例如4xx,如果不存在，将用户提交的数据存入表中
• 整个过程都采用AJAX异步过程，用户提交JSON数据，服务端获取数据后处理，返回JSON。

POST /users/ 创建用户

请求体 application/json
{
    "password":"string",
    "name":"string",
    "email":"string"
}

响应
201 创建成功
400 请求数据错误

• 为了避免项目中的urls.py条目过多，也为了让应用自己管理路由，采用多级路由

# djweb/urls.py文件
from django.urls import include
urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^$',index),
    re_path(r'^index$',index),#不同路径可以指向同一个函数执行
    re_path(r'^users/',include("user.urls")),
]

• include函数参数写*应用.路由模块*,该函数就会动态导入指定的包的模块，从模块里面读取urlpatterns,返回三元组。
• url函数第二参数如果不是可调用对象，如果是元组或列表，则会从路径中除去已匹配的部分，将剩余部分与应用中的路由模块的urlpatterns进行匹配。
• 新建=user/uls.py=文件

# user/uls.py
from django.conf.urls import re_path
from .views import reg

urlpatterns = [
    re_path(r'^$',reg), #/users/
]

• 在=user/views.py=文件中添加reg方法

# user/views.py
from django.shortcuts import render
from django.http import HttpResponse,HttpRequest

def reg(request:HttpRequest):
    return HttpResponse("user.reg")

• 浏览器中输入=http://127.0.0.1:8000/users/=%E6%B5%8B%E8%AF%95(%E8%BF%99%E6%98%AFGET%E8%AF%B7%E6%B1%82),%E5%8F%AF%E4%BB%A5%E7%9C%8B%E5%88%B0%E5%93%8D%E5%BA%94%E7%9A%84%E6%95%B0%E6%8D%AE%E3%80%82%E4%B8%8B%E9%9D%A2%E5%BC%80%E5%A7%8B%E5%AE%8C%E5%96%84%E8%A7%86%E5%9B%BE%E5%87%BD%E6%95%B0。
• 在=user/views.py=中编写*视图函数reg*

• 使用POST方法，提交数据类型为application/json，json字符串要使用*双引号*。

• 这个数据是注册用的，由客户端提交。

  1. 数据提交模板为：

  {
      "password":"abc",
      "name":"xdd",
      "email":"[email protected]"
  }
  

  1. 可以使用Postman软件测试。

• 在Post数据的时候，发现出现了下面的提示
  1. 原因：*默认Django CsrfViewMiddleware中间件会对所有POST方法提交的信息做CSRF校验*。
• CSRF或XSRF(Cross-site Request Forgery),即跨站请求伪造。它也被称为：one click attack/session riding。是一种对网站的恶意利用。它伪造成来自受信任用户发起的请求，难以防范。
• 原理：
  1. 用户登录某网站A完成登录认证，网站返回敏感信息的Cookie,即使是会话级的Cookie
  2. 用户没有关闭浏览器，或认证的Cookie一段时间内不过期还持久化了，用户就访问攻击网站B
  3. 攻击网站B看似一切正常，但是某些页面里面有一些隐藏运行的代码，或者诱骗用户操作的按钮等
  4. 这些代码一旦运行就是悄悄地向网站A发起特殊请求，由于网站A的Cookie还有效，且访问的是网站A，则其Cookie就可以一并发给网站A
  5. 网站A看到这些Cookie就只能认为是登录用户发起的合理合法请求，就会执行
• CSRF解决

  1. 关闭CSRF中间件(不推荐)

     #djweb/settings.py
     MIDDLEWARE = [
         'django.middleware.security.SecurityMiddleware',
         'django.contrib.sessions.middleware.SessionMiddleware',
         'django.middleware.common.CommonMiddleware',
         # 'django.middleware.csrf.CsrfViewMiddleware', #注释掉
         'django.contrib.auth.middleware.AuthenticationMiddleware',
         'django.contrib.messages.middleware.MessageMiddleware',
         'django.middleware.clickjacking.XFrameOptionsMiddleware',
     ]
     

  2. csrftoken验证
     • 在表单POST提交时，需要发给服务器一个csrf_token
     • 模板中的表单Form中增加={% csrf_token %}=，它返回到了浏览器端就会为cookie增加csrftoken字段，还会在表单中增加一个名为csrfiddlewaretoken隐藏控件=<input type='hidden' name='csrfmiddlewaretoken' value='jZTxU0v5mPoLvugcfLbS1B6vT8COYrKuxMzodWv8oNAr3a4ouWlb5AaYG2tQi3dD' />=
     • POST提交表单数据时，需要将csrfmiddlewaretoken一并提交，Cookie中的csrf_token也一并会提交，最终在中间件中比较，相符通过，不相符就看到上面的403提示
  3. 双cookie验证
     • 访问本站先获得csrftoken的cookie
     • 如果使用AJAX进行POST，需要在每一次请求Header中增加自定义字段X-CSRFTOKEN，其值来自cookie中获取的csrftoken值
     • 在服务端比较cookie和X-CSRFTOKEN中的csrftoken，相符通过
• 现在没有前端代码，为了测试方便，可以选择第一种方法先禁用中间件，测试完成后开启。

• simplejson标准库方便好用，功能强大。
  1. pip install simplejson
• 浏览器端提交的数据放在了请求对象的body中，需要使用simplejson解析，解析的方式同Json模块，但是simplejson更方便。

• Django中有很多异常类，定义在django.http下，这些类都继承自HttpResponse。

#user/views.py文件

from django.http import HttpResponse,HttpRequest,HttpResponseBadRequest,JsonResponse
import simplejson

def reg(request:HttpRequest):
    print(request.POST)
    print(request.body)
    # print("- " * 30)
    try:
        payload = simplejson.loads(request.body)
        email = payload['email']
        name = payload['name']
        password = payload["password"]
        print(email,name,password)
        return JsonResponse({},status=201) #创建成功返回201
    except Exception as e: #有任何异常，都返回
        print(e)
        return HttpResponseBadRequest() #这里返回实例，这不是异常类

• 将上面代码增加邮箱检查、用户信息保存功能，就要用到Django的模型操作。
• 本次采用Restful实践的设计，采用返回错误状态码+JSON错误信息方式。

# user/views.py文件

from django.http import HttpResponse,HttpRequest,HttpResponseBadRequest,JsonResponse
import simplejson
from .models import User

def reg(request:HttpRequest):

    try:
        payload = simplejson.loads(request.body)
        email = payload['email']
        query = User.objects.filter(email=email)
        print(query)
        print(query.query) #查看sQL语句
        if query.first():
            return JsonResponse({"error":"用户已存在"},status=400);

        name = payload['name']
        password = payload["password"]
        print(email,name,password)

        user = User()
        user.email = email
        user.name = name
        user.password = password
        user.save()

        return JsonResponse({},status=201) #创建成功返回201
    except Exception as e: #有任何异常，都返回
        print(e)
        # 失败返回错误信息和400，所有其他错误一律用户名密码错误
        return JsonResponse({"error":"用户名或密码错误"},status=400)

1. 邮箱检查
   • 邮箱检查需要查user表，需要使用filter方法。
   • email=email,前面是字段名email，后面是email变量。查询后返回结果，如果查询有结果，则说明该email已经存在，邮箱已经注册，返回400到前端
2. 用户信息存储
   • 创建User类实例，属性存储数据，最后调用save方法。Django默认是在save()、delete()的时候事务*自动提交*。
   • 如果提交抛出任何错误，则捕获此异常做相应处理。
   • 如果没有异常，则返回201，不要返回任何用户信息。之后可能需要验证、用户登录等操作。
     
3. 异常处理
   • 出现获取输入框提交信息异常，就返回400
   • 查询邮箱存在，返回400
   • save()方法保存数据，有异常，则返回400
   • 注意一点，Django的异常类继承自HttpResponse类，所以不能raise,只能return
   • 前端通过状态码判断是否成功
   • 由于采用Restful实战，所有异常全部返回JSON的错误信息，所以一律使用了JsonResponse

• Django的日志配置在settings.py中
  1. 参考文档https://docs.djangoproject.com/en/2.2/topics/logging/#configuring-logging

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'handlers': {
        'console': {
            'class': 'logging.StreamHandler',
        },
    },
    'loggers': {
        'django.db.backends': {
            'handlers': ['console'],
            'level': "DEBUG",
        },
    },
}

• 配置后，就可以在控制台看到执行的SQL语句。
• 注意，必须*DEBUG=True,同时level是DEBUG*,否则从控制台看不到SQL语句。

• *认证*：HTTP协议是无状态协议，为了解决它产生了cookie和session技术。
• 传统的session-cookie机制
  1. 浏览器发起第一次请求到服务器，服务器发现浏览器没有提供session id,就认为这是第一次请求，会返回一个新的session id给浏览器，浏览器只要不关闭，这个session id就会随着每一次请求重新发给服务端，服务器端查找这个session id，如果查到，就认为是同一个会话。如果没有查到，就认为是新的请求。
  2. session是会话级的，服务端还可以在这个会话session中创建很多数据session键值对。
  3. 这个session id有过期的机制，一段时间如果没有发起请求，认为用户已经断开，服务端就清除本次会话所有session。浏览器端也会清除相应的cookie信息。
  4. 服务端保存着大量session信息，很消耗服务器内存，而且如果多服务器部署，可以考虑session复制集群，也可以考虑session共享的问题，比如redis、memcached等方案。
• 无ssession方案
  1. 既然服务端就是需要一个ID来表示身份，那么不使用session也可以创建一个ID返回给客户端。但是，要保证客户端不可篡改该信息。
  2. 服务端生成一个标识，并使用某种算法对标识签名。
  3. 服务端收到客户端发来的标识，需要检查签名。
  4. 这种方案的缺点是，加密、解密需要消耗CPU计算资源，无法让浏览器自己主动检查过期的数据以清除。这种技术称作JWT(json WEB Token)。

• JWT

  1. JWT(Json WEB Token)是一种采用Json方式安装传输信息的方式。本次使用PyJWT，它是Python对JWT的实现。
     • 包https://pypi.org/project/PyJWT/1.5.3/
     • 文档https://pyjwt.readthedocs.io/en/latest/
  2. 安装=pip install pyjwt=
  3. jwt原理

  import jwt
  import base64
  
  key = "secret"
  token = jwt.encode({'payload':'abc123'},key,'HS256')
  print(token)
  print(jwt.decode(token,key,algorithms=["HS256"]))
  # b'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjoiYWJjMTIzIn0.lZc1PBGdbYDKq9k43tNTt1f0MHy4DjwT8NGTnHEIaVE'
  # token分为3部分，用.断开
  
  header,payload,signature = token.split(b'.')
  print("- "*30)
  print(header,payload,signature,sep='\n')
  print("- "*30)
  
  def addeq(b:bytes):
      """ 为base64编码补齐等号"""
      rest = 4 - len(b) % 4
      return b + b'='* rest
  
  print("header=",base64.urlsafe_b64decode(addeq(header)))
  print("payload=",base64.urlsafe_b64decode(addeq(payload)))
  print("signature=",base64.urlsafe_b64decode(addeq(signature)))
  print(" ="*30)
  
  # 根据jwt算法，重新生成签名
  # 1 获取算法对象
  from jwt import algorithms
  alg = algorithms.get_default_algorithms()["HS256"]
  newkey = alg.prepare_key(key) # key 为secret
  
  # 2获取前两部分 header.payload
  signing_input,_,_ = token.rpartition(b".")
  print(signing_input)
  
  
  # 3使用key签名
  signature = alg.sign(signing_input,newkey)
  print("--------------")
  print(signature)
  print(base64.urlsafe_b64encode(signature))
  

1. 由此，可知jwt生成的token分为三部分
   1. header,由数据类型、加密算法构成
   2. payload,负载就是要传输的数据，一般来说放入python对象即可，会被json序列化的
   3. signature,签名部分。是签名2部分数据分别base64编码后使用点号链接后，加密算法使用key计算好一个结果，再被base64编码，得到签名
   4. 所有数据都是明文传输的，只是做了base64，如果是敏感信息，请不要使用jwt。
   5. 数据签名的目的不是为了隐藏数据，而是保证数据不被篡改。如果数据篡改了，发回到服务器端，服务器使用自己的key再计算一遍，然后进行签名比对，一定对不上签名。
2. jwt使用场景
   • 认证：这是jwt最常用的场景，一旦用户登录成功，就会得到wt，然后请求中就可以带上这个jwt。服务器中jwt验证通过，就可以被允许访问资源。甚至可以在不同域名中传递，在单点登录(Single Sign On)中应用广泛。
   • 数据交换：jwt可以防止数据被篡改，它还可以使用公钥、私钥加密，确保请求的发送者是可信的

• 密码
  1. 使用邮箱+密码方式登录。
  2. 邮箱要求唯一就行了，但是，密码存储需要加密。早期，都是用明文的密码存储。后来，使用MD5存储，但是，目前也不安全，网上有很多MD5的网站，使用反查方式找到密码。
  3. *加盐*，使用hash(password+salt)的结果存入数据库中，就算拿到数据库的密码反查，也没有用了。如果是固定加盐，还是容易被找到规律，或者从源码中泄露。随机加盐，每一次盐都变，就增加了破解的难度。
  4. *暴力破解*：什么密码都不能保证不被暴力破解，例如穷举。所以要使用慢hash算法，例如bcrypt，就会让每一次计算都很慢，都是秒即的，这样穷举的时间就会很长，为了一个密码破解的时间在当前CPU或者GPU的计算能力下可能需要几十年以上。

• bcrypt

  1. 安装=pip install bcrypt=

  import bcrypt
  import datetime
  
  password = b'12345xdd'
  
  # 每次拿到盐都不一样
  print(1,bcrypt.gensalt())
  print(2,bcrypt.gensalt())
  
  salt = bcrypt.gensalt()
  # 拿到的盐不同，计算等到的密文相同
  print("===============same salt ===============")
  x = bcrypt.hashpw(password,salt)
  y = bcrypt.hashpw(password,salt)
  print(3,x)
  print(4,y)
  
  # 每次拿到的盐不同，计算生成的密文也不一样
  print("============different salt===============")
  xx = bcrypt.hashpw(password,bcrypt.gensalt())
  yy = bcrypt.hashpw(password,bcrypt.gensalt())
  print(5,x)
  print(6,y)
  
  # 校验
  print(bcrypt.checkpw(password,xx),len(xx))
  print(bcrypt.checkpw(password+b' ',xx),len(xx))
  
  # 计算时长
  start = datetime.datetime.now()
  y3 = bcrypt.hashpw(password,bcrypt.gensalt())
  delta = (datetime.datetime.now() - start).total_seconds()
  print(10,'duration={}'.format(delta))
  
  # 检验时长
  start = datetime.datetime.now()
  y4 = bcrypt.checkpw(password,xx)
  delta = (datetime.datetime.now() - start).total_seconds()
  print(y4)
  print(11,'duration={}'.format(delta))
  
  start = datetime.datetime.now()
  y5 = bcrypt.checkpw(b'1',xx)
  delta = (datetime.datetime.now() - start).total_seconds()
  print(y5)
  print(12,'duration={}'.format(delta))
  

1. 从耗时看出，bcrypt加密、验证非常耗时，所有如果穷举，非常耗时。而且碰巧攻破一个密码，由于盐不一样，还等穷举另一个。

salt=b'$2b$12$jwBD7mg9stvIPydF2bqoPO'
b'$2b$12$jwBD7mg9stvIPydF2bqoPOodPwWYVvdmZb5uWWuWvlf9iHqNlKSQO'

$是分隔符
$2b$，加密算法
12，表示2^12 key expansion rounds
这是盐b'jwBD7mg9stvIPydF2bqoPO'，22个字符，Base64
这是密文b'odPwWYVvdmZb5uWWuWvlf9iHqNlKSQO'，31个字符，Base64

1. 全局变量

   • 项目的settings.py文件实际上就是全局变量的配置 文件。
   • SECRET_KEY一个强KEY

   from django.conf import settings
   print(settings.SECRET_KEY)
   

2. 使用jwt和bcrypt,修改注册代码

from django.http import HttpResponse,HttpRequest,HttpResponseBadRequest,JsonResponse
import simplejson
from .models import User
import jwt
import datetime
import bcrypt
from django.conf import settings

# 对id签名
def gen_token(user_id):
    # 时间戳用来判断是否过期，以便重发token或重新登录
    return  jwt.encode({
        "user_id":user_id,
        "timestamp":int(datetime.datetime.now().timestamp()) #取整
    },settings.SECRET_KEY).decode()

def reg(request:HttpRequest):

    try:
        payload = simplejson.loads(request.body)
        email = payload['email']
        query = User.objects.filter(email=email)
        print(query)
        print(query.query) #查看sQL语句
        if query.first():
            return JsonResponse({"error":"用户已存在"},status=400);

        name = payload['name']
        password = payload["password"].encode()
        print(email,name,password)

        # 密码加密
        password = bcrypt.hashpw(password,bcrypt.gensalt()).decode()
        print(password)

        user = User()
        user.email = email
        user.name = name
        user.password = password
        user.save()

        return JsonResponse({"token":gen_token(user.id)},status=201) #创建成功返回201
    except Exception as e: #有任何异常，都返回
        print(e)
        # 失败返回错误信息和400，所有其他错误一律用户名密码错误
        return JsonResponse({"error":"用户名或密码错误"},status=400)

• save方法会自动提交事务

• 数据库中内容

POST /users/login 用户登录
请求体 application/json
{
    "password":"string",
    "email":"string"
}

响应
200 登录成功
400 用户名密码错误

• 接收用户通过POST方法提交的登录信息，提交的数据是JSON格式数据

{
    "password":"abc",
    "email":"[email protected]"
}

• 从user表中email找出匹配的一条记录，验证密码是否正确
• 验证通过说明是合法用户登录，显示欢迎页面。
• 验证失败返回错误状态码，例如4xx
• 整个过程都采用AJAX异步过程，用户提交JSON数据，服务端获取数据后处理，返回JSON。

# 修改user/urls.py文件
from django.conf.urls import re_path
from .views import reg,login

urlpatterns = [
    re_path(r'^$',reg), #/users/
    re_path(r'^login$',login),
]

• 在user/views.py文件中实现登录代码

# user/views.py文件中增加如下代码

import jwt
import datetime
import bcrypt
from django.conf import settings

# 筛选所需要的字段
def jsonify(instance,allow=None,exclude=[]):
    # allow优先，如果有，就使用allow指定的字段，这时候exclude无效
    # allow如果为空，就全体，但要看看有exclude中的要排除
    modelcls = type(instance)
    if allow:
        fn = (lambda x:x.name in allow)
    else:
        fn = (lambda x:x.name not in exclude)
    # from django.db.models.options import Options
    # m:Options = modelcls._meta
    # print(m.fields,m.pk)
    return {k.name:getattr(instance,k.name) for k in filter(fn,modelcls._meta.fields)}

# 登录接口
def login(request:HttpRequest):
    try:
        payload = simplejson.loads(request.body)
        print(payload)
        email = payload["email"]
        password = payload["password"]

        user = User.objects.get(email=email) # only one
        print(user.password)

        if bcrypt.checkpw(password,user.password.encode()):
            # 验证成功
            token = gen_token(user.id)

            res = JsonResponse({
                "user":jsonify(user,exclude=["password"]),
                "token":token
            }) #返回200
            res.set_cookie("jwt",token)
            return res
        else:
            return JsonResponse({"error":"用户名或密码错误"},status=400)
    except Exception as e:
        print(e)
        #失败返回错误信息和400，所有其他错误一律用户名密码错误
        return JsonResponse({"error":"用户名或密码错误"},status=400)

• 注册
• 登录验证

• 如何获取浏览器提交的token信息？
  1. 使用Header中的Authorization
     • 通过这个header增加token信息。
     • 通过header发送数据，方法可以是Post、Get
  2. 自定义header
     • 在Http请求头中使用X-JWT字段来发送token
• 本次选择第二种

• user/views.py

from django.http import HttpResponse,HttpRequest,HttpResponseBadRequest,JsonResponse
import simplejson
from .models import User
import jwt
import datetime
import bcrypt
from django.conf import settings
from django.views.decorators.http import require_http_methods,require_POST,require_GET

# 对id签名
def gen_token(user_id):
    # 时间戳用来判断是否过期，以便重发token或重新登录
    return  jwt.encode({
        "user_id":user_id,
        "exp":int(datetime.datetime.now().timestamp()) + settings.AUTH_EXPIRE #取整
    },settings.SECRET_KEY,algorithm="HS256").decode()

# 注册接口
@require_http_methods(["POST"])
def reg(request:HttpRequest):

    try:
        payload = simplejson.loads(request.body)
        email = payload['email']
        query = User.objects.filter(email=email)
        print(query)
        print(query.query) #查看sQL语句
        if query.first():
            return JsonResponse({"error":"用户已存在"},status=400)

        name = payload['name']
        password = payload["password"].encode()
        print(email,name,password)

        # 密码加密
        password = bcrypt.hashpw(password,bcrypt.gensalt()).decode()
        print(password)

        user = User()
        user.email = email
        user.name = name
        user.password = password
        user.save()

        return JsonResponse({"token":gen_token(user.id)},status=201) #创建成功返回201
    except Exception as e: #有任何异常，都返回
        print(e)
        # 失败返回错误信息和400，所有其他错误一律用户名密码错误
        return JsonResponse({"error":"用户名或密码错误"},status=400)

# 筛选所需要的字段
def jsonify(instance,allow=None,exclude=[]):
    # allow优先，如果有，就使用allow指定的字段，这时候exclude无效
    # allow如果为空，就全体，但要看看有exclude中的要排除
    modelcls = type(instance)
    if allow:
        fn = (lambda x:x.name in allow)
    else:
        fn = (lambda x:x.name not in exclude)
    # from django.db.models.options import Options
    # m:Options = modelcls._meta
    # print(m.fields,m.pk)
    # print("----------")
    return {k.name:getattr(instance,k.name) for k in filter(fn,modelcls._meta.fields)}

# 登录接口
@require_POST
def login(request:HttpRequest):
    try:
        payload = simplejson.loads(request.body)
        print(payload)
        email = payload["email"]
        password = payload["password"].encode()

        user = User.objects.get(email=email) # only one
        print(user.password)

        if bcrypt.checkpw(password,user.password.encode()):
            # 验证成功
            token = gen_token(user.id)

            res = JsonResponse({
                "user":jsonify(user,exclude=["password"]),
                "token":token
            }) #返回200
            res.set_cookie("jwt",token)
            return res
        else:
            return JsonResponse({"error":"用户名或密码错误"},status=400)
    except Exception as e:
        print(e)
        #失败返回错误信息和400，所有其他错误一律用户名密码错误
        return JsonResponse({"error":"用户名或密码错误"},status=400)

# 登录验证装饰器
def authenticate(viewfunc):
    def wrapper(request:HttpRequest):
        # 认证越早越好
        jwtheader  = request.META.get(settings.AUTH_HEADER,"")
        # print(request.META.keys())
        # print(request.META["HTTP_COOKIE"].get(settings.AUTH_HEADER,""))
        # print(request.META["HTTP_COOKIE"])
        print("-   ------------")
        if not jwtheader:
            return HttpResponse(status=401)
        print(jwtheader)
        # 解码
        try:
            payload = jwt.decode(jwtheader,settings.SECRET_KEY,algorithms=["HS256"])
            # payload = "aa"
            print(payload)
        except Exception as e: #解码有任何异常，都不能通过认证
            print(e)
            return HttpResponse(status=401)

        # 是否过期ToDO
        print("- "*30)
        try:
            user_id = payload.get("user_id",0)
            if user_id == 0:
                return HttpResponse(status=401)
            user = User.objects.get(pk=user_id)
            request.user = user
        except Exception as e:
            print(e)
            return HttpResponse(status=401)
        response = viewfunc(request)
        return response
    return wrapper

@require_POST
@authenticate #在有需要的视图函数上加上此装饰器
def test(request):
    print("- "*30,"test")
    print(request.user)
    return JsonResponse({},status=200)

• python manage.py startapp post

• 注意：*一定要把应用post加入到settings.py中*，否则不能迁移

  # djweb/settings.py中修改
  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'user',
      "post"
  ]
  

• 添加对应路由

  1. 修改djweb/urls.py文件

     # 修改djweb/urls.py文件
     urlpatterns = [
         path('admin/', admin.site.urls),
         re_path(r'^$',index),
         re_path(r'^index$',index),#不同路径可以指向同一个函数执行
         re_path(r'^users/',include("user.urls")),
         re_path(r'^posts/',include("post.urls"))
     ]
     

  2. 新建post/urls.py文件

     # 新建post/urls.py文件 配置路由信息
     from django.conf.urls import re_path
     from .views import PostView,getpost
     
     urlpatterns = [
         re_path(r'^$',PostView.as_view()), #/posts/  视图函数PostView
         re_path(r'^(\d+)$',getpost),
     ]
     

  3. 修改post/views.py文件

     from django.http import HttpResponse,HttpRequest,JsonResponse
     from django.views.decorators.http import require_GET
     from django.views import View
     
     class PostView(View):
         pass
     
     def getpost(request:HttpRequest,id):
         print(id)
         return JsonResponse({},status=201)
     

• 构建数据库模型

  1. 修改post/models.py文件

  from django.db import models
  from user.models import User
  
  # post表
  class Post(models.Model):
      class Meta:
          db_table = "post"
      id = models.AutoField(primary_key=True)
      title = models.CharField(max_length=256,null=False)
      postdate = models.DateTimeField(null=False)
      # 从post查看作者，从post查看内容
      author = models.ForeignKey(User,on_delete=models.PROTECT) #指定外键，migrate会生成author_id字段
      # self.content可以访问Content实例，其内容是self.content.content
  
      def __repr__(self):
          return '<Post {} {} {} {} >'.format(
              self.id,self.title,self.author_id,self.content
          )
  
      __str__ = __repr__
  
  # content表
  class Content(models.Model):
      class Meta:
          db_table = "content"
      # 没有主键，会自动创建一个自增主键
      post = models.OneToOneField(Post,primary_key=True,on_delete=models.PROTECT) #一对一，这边会有一个外键post_id引用post.id
      content = models.TextField(null=False)
  
      def __repr__(self):
          return "<Content {} {} >".format(self.post.pk,self.content[:20])
  
      __str__ = __repr__
  

  1. 注意：on_delete在Django2.0开始，on_delete必须提供，参考https://docs.djangoproject.com/en/1.11/ref/models/fields/#django.db.models.ForeignKey.on_delete
     1. models.CASCADE 级联删除。Django在DELETE级联上模拟SOL约束的行为，并删除包含外键的对象。
     2. models.PROTECT 通过引发ProtectedError (django.db.IntegrityError的子类)防止删除引用的对象。
     3. models.SET_NULL 设置外键为空;这只有在null为真时才有可能。
     4. models.SET_DEFAULT 将外键设置为其默认值;必须为外键设置默认值。
     5. models.DO_NOTHING 不采取任何行动。如果数据库后端强制执行引用完整性，这将导致IntegrityError，除非手动向数据库字段添加一个SOL ON DELETE约束。
• 视图分类
  1. function-based view 视图函数：视图功能有函数实现
  2. class-based view 视图类：视图功能有基于django.views.View类的子类实现

• django.views.View类原理

  • django.views.View类本质就是一个对请求方法分发到与请求方法同名函数的调度器。
  • django.views.View类，定义了http的方法的小写名称列表，这些小写名称其实就是处理请求的方法名的小写。as_views()方法就是返回一个内建的=view(request,*args,**kwargs)=函数，本质上其实还是url映射到了函数上，只不过view函数内部会调用=dispatch(request,*args,**kwargs)=分发函数。
  • dispatch函数中使用request对象的请求方法小写和http_method_names中允许的HTTP方法匹配，匹配说明是正确的HTTP请求方法，然后尝试再View子类中找该方法，调用后返回结果。找不到该名称方法，就执行http_method_not_allowed方法返回405状态码
  • 看到了getattr等反射函数，说明基于反射实现的。
  • as_view()方法，用在url映射配置中
    1. 本质上，as_view()方法还是把一个类伪装成了一个视图函数。
    2. 这个视图函数，内部使用了一个分发函数，使用请求方法名称吧请求分发给存在的同名函数处理。

  # 修改post/urls.py文件
  from django.conf.urls import re_path
  from .views import PostView,getpost
  from user.views import authenticate #登录验证装饰器
  
  urlpatterns = [
      # 路径/posts/
      # View类调用as_view()之后类等价一个视图函数，可以被装饰
      # 装饰器函数返回新函数
      re_path(r'^$',authenticate(PostView.as_view())), #/posts/  视图函数PostView
      re_path(r'^(\d+)$',getpost),
  ]
  

  • 但是这种方式适合吧PostView类所有方法都认证，但是实际上就post方法要认证。所以，authenticate还是需要加载到post方法上去。因此，要修改authenticate函数

  # 修改user/views.py文件中对应内容
  # 登录验证装饰器
  def authenticate(viewfunc):
      def wrapper(*args):
          *s,request = args #保证最后一个取到request对象
          print(s)
          print(request)
  
          # 认证越早越好
          jwtheader  = request.META.get(settings.AUTH_HEADER,"")
          # print(request.META.keys())
          # print(request.META["HTTP_COOKIE"].get(settings.AUTH_HEADER,""))
          # print(request.META["HTTP_COOKIE"])
          print("-   ------------")
          if not jwtheader:
              return HttpResponse(status=401)
          print(jwtheader)
          # 解码
          try:
              payload = jwt.decode(jwtheader,settings.SECRET_KEY,algorithms=["HS256"])
              # payload = "aa"
              print(payload)
          except Exception as e: #解码有任何异常，都不能通过认证
              print(e)
              return HttpResponse(status=401)
  
          # 是否过期ToDO
          print("- "*30)
          try:
              user_id = payload.get("user_id",0)
              if user_id == 0:
                  return HttpResponse(status=401)
              user = User.objects.get(pk=user_id)
              request.user = user
          except Exception as e:
              print(e)
              return HttpResponse(status=401)
  
          response = viewfunc(*args) #参数解构
          return response
      return wrapper
  

  • 修改post/views.py文件

  # post/views.py
  from django.http import HttpResponse,HttpRequest,JsonResponse
  from django.views.decorators.http import require_GET
  from django.views import View
  from user.views import authenticate
  
  class PostView(View): #不需要装饰器决定请求方法了
      def get(self,request:HttpRequest): #获取全体文章走这里
          print("get ~~~~~~~~~~~~~~~~~~")
          return JsonResponse({},status=200)
  
      # 注意：由于PostView类中并不是所有方法都需要登录认证，所有将urls路径映射中的登录认证去掉了，在这里加上。
      @authenticate
      def post(self,request:HttpRequest):#提交文章数据走这里
          print("post ++++++++++++++++++")
          return JsonResponse({}, status=200)
  
  @require_GET
  def getpost(request:HttpRequest,id):
      print(id)
      return JsonResponse({},status=201)
  

• 用户从浏览器端提交json数据，包含title，content.
• 提交博文需要认证用户，从请求的header中验证jwt。
• request:POST 标题、内容-》@authenticate ->视图 post -> json新文章对象

• 新建工具包，调整jsonify函数,放入工具包内

  # utils/__init__.py
  # 筛选所需要的字段
  def jsonify(instance,allow=None,exclude=[]):
      # allow优先，如果有，就使用allow指定的字段，这时候exclude无效
      # allow如果为空，就全体，但要看看有exclude中的要排除
      modelcls = type(instance)
      if allow:
          fn = (lambda x:x.name in allow)
      else:
          fn = (lambda x:x.name not in exclude)
      # from django.db.models.options import Options
      # m:Options = modelcls._meta
      # print(m.fields,m.pk)
      # print("----------")
      return {k.name:getattr(instance,k.name) for k in filter(fn,modelcls._meta.fields)}
  

• 根据post_id查询博文并返回。
• 如果博文只能作者看到，就需要认证，本次是公开，即所有人都能看到，所以不需要认证。同样，下面的list接口也是不需要认证的。
• request: GET post's id-> getpost 视图函数 -> Json post + content

# 修改`post/views.py`文件
@require_GET
def getpost(request:HttpRequest,id):
    try:
        id = int(id)
        post = Post.objects.get(pk=id) #only one
        return JsonResponse({
            "post":{
                "id":post.id,
                "title":post.title,
                "author":post.author.name,
                "author_id":post.author_id, #post.author.id
                "postdate":post.postdate.timestamp(),
                "content":post.content.content
            }
        })
    except Exception as e:
        print(e)
        return HttpResponse(status=404)

• 发起GET请求，通过查询字符串=http://url/posts/?page=2=%E6%9F%A5%E8%AF%A2%E7%AC%AC%E4%BA%8C%E9%A1%B5%E6%95%B0%E6%8D%AE
• request: GET ?pate=5&size=20 ->视图 get -> json文章列表

GET /posts/?page=3&size=20 文章列表，视图类PostView

响应
200 成功返回文章列表

• 完善分页
  1. 分页信息，一般有：当前页/总页数、每页条数，记录总数。
     • *当前页*：page
     • *每页条数*：size ,每页最多多少行
     • *总页数*：pages = math.ceil(count/size)
     • *记录总数*：total,从select * from table来

# 修改post/views.py文件
from django.http import HttpResponse,HttpRequest,JsonResponse
from django.views.decorators.http import require_GET
from django.views import View
from user.views import authenticate
from post.models import Post,Content
from user.models import User
import simplejson,datetime,math
from django.db import transaction
from utils import jsonify

class PostView(View): #不需要装饰器决定请求方法了
    def get(self,request:HttpRequest): #获取全体文章走这里
        print("get ~~~~~~~~~~~~~~~~~~")
        try: #页码
            page = int(request.GET.get("page",1))
            page = page if page >0 else 1
        except:
            page = 1

        try: #每页条数
            #注意，这个数据不要轻易让浏览器端改变，如果允许改变，一定要控制范围
            size = int(request.GET.get("size",20))
            size = size if size >0 and size <101 else 20
        except:
            size = 20

        try: #每页条目数
            start = (page - 1) * size
            posts = Post.objects.order_by("-pk")
            print(posts.query)
            total = posts.count()
            posts = posts[start:start + size]
            print(posts.query)
            return JsonResponse({
                "posts":[jsonify(post,allow=["id","title"]) for post in posts],
                "pagination":{
                    "page":page,
                    "size":size,
                    "total":total,
                    "pages":math.ceil(total / size)
                }
            })
        except Exception as e:
            print(e)
            return HttpResponse(status=400)

• 也可以使用Django提供的Paginator类来完成。
• Paginator文档https://docs.djangoproject.com/en/1.11/topics/pagination/
• 但是，还是自己更加简单明了些。

• 使用react-mobx-starter-master脚手架，解压更名为DjangoNode。
• 在src中新增component、service、css目录
• 注意：没有特别说明，js开发都在src目录下
• 目录结构

DjangoNode/
    │-.babelrc
    │-.gitignore #git的忽略文件
    │-.npmrc    #npm的服务器配置，本次使用的是阿里
    │-index.html #dev server使用的首页
    │-jsconfig.json
    │-LICENSE
    │-package-lock.json
    │-package.json  #项目的根目录安装文件，使用npm install可以构建项目
    │-README.md
    │-webpack.config.dev.js #开发用的配置文件
    │-webpack.config.prod.js #生产环境，打包用的配置文件
    └─src/
        │- componet/ #自己组件文件夹
        │- service/  #服务程序
        │- css/  #样式表
        │- index.html #模板页面
        │- index.js

1. 修改项目信息=package.json=文件

   {
       "name":"blog",
       "description":"blog project",
       "author":"xdd"
   }
   

2. 修改=webpack.config.dev.js=

   devServer: {
           compress: true, /* gzip */
           //host:'192.168.61.109', /* 设置ip */
           port: 3000,
           publicPath: '/assets/', /* 设置bundled files浏览器端访问地址 */
           hot: true,  /* 开启HMR热模块替换 */
           inline: true, /* 控制浏览器控制台是否显示信息 */
           historyApiFallback: true,
           stats: {
               chunks: false
           },
           proxy: { //代理
               '/api': {
                   target: 'http://127.0.0.1:8000',
                   changeOrigin: true
               }
           }
       }
   

3. 安装依赖 npm install

   • npm会按照package.json中依赖的包。也可以使用新的包管理工具yarn安装模块
   • 使用yarn替换npm安装，速度会更快写，yarn是并行安装，npm是串行安装。

   yarn安装
   $ npm install -g yarn
   或者，去https://yarn.bootcss.com/docs/install/
   
   相当于npm install
   $ yarn
   
   * 如果想自己构建脚手架，可以使用如下命令
   $npm install  #构建脚手架
   相当于npm install react-router #添加react-router组件
   $ yarn add react-router # 安装路由，即项目前端web路由
   $ yarn add react-router-dom #
   

4. 相关命令

   npm命令	Yarn命令	解释
   npm install	yarn install	安装
   npm install [package] --save	yarn add [package]	安装运行时依赖
   npm install [package] --save-dev	yarn add [package] --dev	安装开发时依赖
   npm install [package] --global	yarn global add [package]	全局安装
   npm uninstall [package]	yarn remove [package]	卸载

• 使用LocalStorage来存储token。
• LocalStorage是HTML5标准增加的技术，是浏览器端持久化方案之一。
• LocalStorage是为了存储浏览器得到的数据，例如JSON。
• 数据存储时键值对。数据会存储在不同的域名下面。
• 不同浏览器对单个域名下存储的数据的长度支持不同,有的最多支持2MB。
• 在Charmo浏览器中查看，如下
• SessionStorage和LocalStorage功能差不多，只不过SessionStorage是会话级的，浏览器关闭，会话结束，数据清除。而LocalStorage可以持久保存。
• indexedDB
  1. 一个域一个datatable
  2. key-value检索方式
  3. 建立在关系型的数据模型之上，具有索引表、游标、事务等概念
• store.js
  1. store.js是一个兼容所有浏览器的LocalStorage包装器，不需要借助Cookie或者Flash。
  2. store.js会根据浏览器自动选择使用localStorage、globalStorage或者userData来实现本地存储功能。
• *安装*=npm i store=或=yarn add store=
• 测试代码

  1. 编写一个test.js,使用node exec插件按F8执行

     let store = require("store");
     
     store.set("user","xdd");
     console.log(store.get("user"));
     
     store.remove("user");
     console.log(store.get("user")); // undefined
     console.log(store.get("user","a")); //a
     
     store.set("user",{name:"xdd",age:30});
     console.log(store.get("user").name);
     
     store.set("school",{name:"magedu"});
     
     // 遍历所有键值对
     store.each(function(value,key){ //注意这里key，value是反的
         console.log(key,"-->",value)
     })
     
     //清除所有键值对
     store.clearAll()
     
     console.log(store.get("user"));// undefined
     

1. 安装store的同时，也安装了expire过期插件，可以在把kv对存储到LS中的时候顺便加入过期时长。

   let store = require("store");
   //一定要加载插件，否则key不会过期
   store.addPlugin(require("store/plugins/expire"));
   
   let d = new Date();
   store.set("user","xdd",(new Date()).getTime() + (5 * 1000)); //注意时间单位
   
   setInterval(() => console.log(store.get("user","abc")),1000);
   

1. 下面是准备写在service中的代码

   import store from "store";
   import expire from "store/plugins/expire";
   
   store.addPlugin(expire)
   //存储token
   store.set("token",res.data.token,(new Date()).getTime() + (8*3600*1000));
   

   /* 修改对应的src/service/user.js文件 */
   import axios from "axios";
   import store from "store";
   import expire from "store/plugins/expire";
   
   // 过期插件
   store.addPlugin(expire)
   
   export default class UserService {
       login (email,password) {
           console.log(email,password);
   
           axios.post("/api/users/login",{
               email:email,
               password:password
           }) /* dev server会代理 */
           .then( /* 成功后返回执行函数 */
               function (response){
                   console.log(response.data)
                   console.log("response.status: " + response.status);
                   // 存储token,注意需要重开一次chrome的调试窗口才能看到
                   store.set("token",response.data.token,(new Date()).getTime() + (8*3600*1000));
               }
           ).catch(/* 出错后执行函数 */
               function(error){
                   console.log(error);
               }
           )
       }
   }
   

• Redux和Mobx
  1. 社区提供的状态管理库，有Redux和Mobx。
  2. Redux代码优秀，使用严格的函数式编程思想，学习曲线陡峭，小项目使用的优劣不明显。
  3. Mobx，非常优秀稳定的库，简单方便，适合中小项目使用。使用面向对象的方式，容易学习和接受。现在在中小项目中使用也非常广泛。Mobx和React也是一对强力组合。
     • Mobx官网https://mobx.js.org/
     • Mobx中文网https://cn.mobx.js.org/
       
     • Mobx是由Mendix、Coinbase、Facebook开源，它实现了观察者模式。
• 观察者模式
  1. 观察者模式，也称为*发布订阅模式*。观察者观察某个目标，目标对象(Obserable)状态发生了变化，会通知自己内部注册了的观察者Observer。
• 状态管理
  1. 需求：
     • 一个组件的onClick触发事件响应函数，此函数会调用后台服务。但是后台服务比较耗时，等处理完，需要引起组件的渲染操作。
     • 要组件渲染，就需要改变组件的props或state。
  2. 同步调用
     • 同步调用中，实际上就是等着耗时的函数返回
  3. 异步调用
     • 思路一,使用setTimeout问题
       1. 无法向内部的等待执行函数传入参数，比如Root实例。
       2. 延时执行的函数的返回值无法取到，所以无法通知Root

     • 思路二、Promise异步执行

       1. Promise异步执行，如果成功，将调用回调。
          
       2. 不管render中是否显示state的值，只要state改变，都会触发render执行

       /* 可以在src/index.js中修改测试代码如下 */
       import React from 'react';
       import ReactDom from 'react-dom';
       
       class Service{
           handle(obj){
               //Promise
               new Promise((resolve,reject) => {
                   //定时器5秒后返回ok
                   setTimeout(() => resolve("ok"), 5000);
               }).then(value => { //成功后执行
               //使用obj
               obj.setState({ret:(Math.random()*1000)});
               }
               )
           }
       }
       
       class Root extends React.Component{
           state = {ret:null}
           handleClick(event){
               //异步不能直接使用返回值
               this.props.service.handle(this);
           }
       
           render(){
               console.log("*****************")
               return (
               <div>
                   <button onClick={this.handleClick.bind(this)}>触发handleClick函数</button>
                   <span style={{color:"red"}}> {new Date().getTime()} Service中修改state的值是{this.state.ret}</span>
               </div>
               )
           }
       }
       
       ReactDom.render(<Root service={new Service()} />, document.getElementById('root'));
       

1. Mobx实现

   • observable装饰器：设置被观察者
   • observer装饰器：设置观察者，将React组件转换为响应式组件

   /* 可以在src/index.js中修改测试代码如下 */
   import React from 'react';
   import ReactDom from 'react-dom';
   import {observable} from 'mobx';
   import {observer} from "mobx-react"
   
   class Service{
       @observable ret = -100;
   
       handle(obj){
           //Promise
           new Promise((resolve,reject) => {
               //定时器5秒后返回ok
               setTimeout(() => resolve("ok"), 5000);
           }).then(value => { //成功后执行
               this.ret = Math.random()*1000;
           }
           )
       }
   }
   
   @observer //将react组件转换为响应式组件
   class Root extends React.Component{
       // state = {ret:null} //不使用state了
       handleClick(event){
           //异步不能直接使用返回值
           this.props.service.handle(this);
       }
   
       render(){
           console.log("*****************")
           return (
           <div>
               <button onClick={this.handleClick.bind(this)}>触发handleClick函数</button>
               <span style={{color:"red"}}> {new Date().getTime()} Service中修改state的值是{this.props.service.ret /* 如果不使用，当值改变render就不会被调用 */}</span>
           </div>
           )
       }
   }
   
   ReactDom.render(<Root service={new Service()} />, document.getElementById('root'));
   

   • Service中被观察者ret变化，导致了观察者调用render函数。
   • 被观察者变化不引起渲染的情况：
     1. 将root中的rander中={this.props.service.ret}=注释={* this.props.service.ret *}=。可以看到，如果render中不使用这个被观察者，render函数就不会调用。
   • 注意：在观察者render函数中，一定要使用这个被观察对象。

• 如果service中ret发生了变化，观察者Login就会被通知到。一般来说，就会跳转到用户界面，需要使用Redirect组件。

// 导入Redirect
import {Link,Redirect} from 'react-router-dom';

//render函数中return
return <Redirect to="/" />; //to表示跳转到哪里

1. =src/service/user.js=文件内容

   /*`src/service/user.js`文件内容*/
   import axios from "axios";
   import store from "store";
   import expire from "store/plugins/expire";
   import {observable} from "mobx";
   
   // 过期插件
   store.addPlugin(expire)
   
   export default class UserService {
       @observable loggedin = false; //被观察者
   
       login (email,password) {
           console.log(email,password);
   
           axios.post("/api/users/login",{
               email:email,
               password:password
           }) /* dev server会代理 */
           .then( /* 成功后返回执行函数 */
               (function (response){
                   console.log(response.data)
                   console.log("response.status: " + response.status);
                   // 存储token,注意需要重开一次chrome的调试窗口才能看到
                   store.set("token",response.data.token,(new Date()).getTime() + (8*3600*1000));
                   this.loggedin = true; // 修改被观察者
               }).bind(this) /*注意绑定this,如果不想可以使用箭头函数*/
           ).catch(/* 出错后执行函数 */
               function(error){
                   console.log(error);
               }
           )
       }
   }
   

2. =src/component/login.js=文件内容

   /* src/component/login.js文件内容 */
   import React from "react";
   import {Link,Redirect} from "react-router-dom";
   import "../css/login.css";
   import UserService from "../service/user";
   import {observer} from "mobx-react";
   
   const userService = new UserService();
   
   export default class Login extends React.Component{
       render(){
           return <_Login service={userService} />;
       }
   }
   
   @observer //将react组件转换为响应式组件
   class _Login extends React.Component {
       handleClick(event){
           event.preventDefault(); /* 阻止from表单提交 */
           let fm = event.target.form;
           this.props.service.login(fm[0].value,fm[1].value)
       }
   
       render() {
           console.log(this.props.service.loggedin)
           if (this.props.service.loggedin) {
               return <Redirect to="/" />; //已经登录，直接跳转
           }
           return (
               <div className="login-page">
               <div className="form">
                   <form className="login-form">
                   <input type="text" placeholder="email"/>
                   <input type="password" placeholder="password"/>
                   <button onClick={this.handleClick.bind(this)}>登录</button>
                   <p className="message">还未注册？ <Link to="#">请注册</Link></p>
                   </form>
               </div>
               </div>
           )
       }
   }
   

   • 注意：测试时，开启Django编写的后台服务程序
   • 测试成功，成功登录，写入Localstorage,也实现了跳转

1. 在service/user.js中增加reg注册函数

   import axios from "axios";
   import store from "store";
   import expire from "store/plugins/expire";
   import {observable} from "mobx";
   
   // 过期插件
   store.addPlugin(expire)
   
   export default class UserService {
       @observable loggedin = false; //被观察者
   
       // 登录函数
       login (email,password) {
           console.log(email,password);
   
           axios.post("/api/users/login",{
               email:email,
               password:password
           }) /* dev server会代理 */
           .then( /* 成功后返回执行函数 */
               (function (response){
                   console.log(response.data)
                   console.log("response.status: " + response.status);
                   // 存储token,注意需要重开一次chrome的调试窗口才能看到
                   store.set("token",response.data.token,(new Date()).getTime() + (8*3600*1000));
                   this.loggedin = true; // 修改被观察者
               }).bind(this)
           ).catch(/* 出错后执行函数 */
               function(error){
                   console.log(error);
               }
           )
       }
   
       // 注册函数
       reg(name,email,password){
           console.log(name,email,password)
   
           axios.post('/api/users/',{
               email:email,
               password:password,
               name:name
           })/* dev server会代理 */
           .then(
               response => {//此函数要注意this的问题
                   console.log(response.data);
                   console.log(response.status);
                   // * 存储token，注意需要重开一次chrome的调试窗口才能看到
                   store.set("token",response.data.token,(new Date()).getTime()+(8*3600*1000));
                   this.loggedin=true; //修改被观察者
               }
           ).catch(
               error => {
                   console.log(error);
               }
           )
       }
   }
   

2. 修改Reg.js组件

   import React from "react";
   import {Link, Redirect} from "react-router-dom";
   import "../css/login.css"
   import UserServer from '../service/user';
   import { observer } from 'mobx-react';
   
   const userserver = new UserServer;
   
   export default class Reg extends React.Component {
       render() {
           return <_Reg service={userserver} />
       }
   }
   
   @observer
   class _Reg extends React.Component {
       validate(password,confirmpwd){
           //表单验证函数
           return password.value === confirmpwd.value
       }
   
       handleClick(event){
           event.preventDefault();
           const [name,email,password,confirmpwd] = event.target.form;
           console.log(this.validate(password,confirmpwd));// +要验证表单数据后才发往后台
           this.props.service.reg(name.value,email.value,password.value);
       }
   
       render(){
           if (this.props.service.loggedin){ //已经登录的用户不允许注册
               return <Redirect to="/" />;
           }
           return (
               <div className="login-page">
               <div className="form">
                   <form className="register-form">
                   <input type="text" placeholder="name"/>
                   <input type="text" placeholder="email" />
                   <input type="password" placeholder="密码"/>
                   <input type="password" placeholder="确认密码"/>
                   <button onClick={this.handleClick.bind(this)}>注册</button>
                   <p className="message">如果已经注册 <Link to="/login">请登录</Link></p>
                   </form>
               </div>
               </div>
           )
       }
   }
   

   • 测试发现，重新登录，登录成功后，点击注册链接，没有跳转到首页，或者先注册，注册成功后，点击登录，还可以再次登录。原因是构造并使用了不同的UserServer实例。
   • 如下，使用同一个UserServer实例(在service/user.js中导出唯一的UserService实例即可)，其他模块直接导入并使用这个实例即可。

3. 修改service/user.js

   class UserService {
       //此处省略
   }
   const userService = new UserService();
   export {userService};
   // 注意，还需要修改对应的login.js以及对应的reg.js文件中同时去掉实例化语句。导入语句修改为：
   // import {userService} from '../service/user';
   

• Ant Design蚂蚁金服开源的React UI库。
• 官网 https://ant.design/index-cn
• 官方文档 https://ant.design/docs/react/introduce-cn
• 安装 npm install antd 或者=yarn add antd=

• 使用

  import {List} from 'antd'; //加载antd的组件
  import 'antd/lib/list/style/css'; //加载组件的样式css
  
  ReactDom.render(<list />, mountNode);
  

  每一种组件的详细使用例子，官网都有，需要时查阅官方文档即可

• 网页开发中，不管操作成功与否，有很多提示信息，目前信息都是控制台输出，用户看不到。
• 使用Antd的message组件显示油耗提示信息。

• 在service/user.js中增加一个被观察对象

  import axios from "axios";
  import store from "store";
  import expire from "store/plugins/expire";
  import {observable} from "mobx";
  
  // 过期插件
  store.addPlugin(expire)
  
  class UserService {
      @observable loggedin = false; //被观察者
      @observable errMsg = ''; //+ 被观察者
  
      login (email,password) {
          console.log(email,password);
  
          axios.post("/api/users/login",{
              email:email,
              password:password
          }) /* dev server会代理 */
          .then( /* 成功后返回执行函数 */
              (function (response){
                  console.log(response.data)
                  console.log("response.status: " + response.status);
                  // 存储token,注意需要重开一次chrome的调试窗口才能看到
                  store.set("token",response.data.token,(new Date()).getTime() + (8*3600*1000));
                  this.loggedin = true; // 修改被观察者
              }).bind(this)
          ).catch(/* 出错后执行函数 */
              function(error){
                  console.log(error);
                  this.errMsg = '登录失败';
              }.bind(this)
          )
      }
  
      reg(name,email,password){
          console.log(name,email,password)
  
          axios.post('/api/users/',{
              email:email,
              password:password,
              name:name
          })/* dev server会代理 */
          .then(
              response => {//此函数要注意this的问题
                  console.log(response.data);
                  console.log(response.status);
                  // * 存储token，注意需要重开一次chrome的调试窗口才能看到
                  store.set("token",response.data.token,(new Date()).getTime()+(8*3600*1000));
                  this.loggedin=true; //修改被观察者
              }
          ).catch(
              error => {
                  console.log(error);
                  this.errMsg = "注册失败" //+信息显示
              }
          )
      }
  }
  
  const userService = new UserService();
  export {userService};
  

• 在component/login.js文件中的 _Login组件，增加Antd的message组件

  import React from "react";
  import {Link,Redirect} from "react-router-dom";
  import "../css/login.css";
  import {userService} from "../service/user";
  import {observer} from "mobx-react";
  import {message} from 'antd';
  import 'antd/lib/message/style'; //使用消息框样式表
  
  // const userService = new userService;
  
  export default class Login extends React.Component{
      render(){
          return <_Login service={userService} />;
      }
  }
  
  @observer //将react组件转换为响应式组件
  class _Login extends React.Component {
      handleClick(event){
          event.preventDefault(); /* 阻止from表单提交 */
          let fm = event.target.form;
          this.props.service.login(fm[0].value,fm[1].value)
      }
  
      render() {
          if (this.props.service.loggedin) {
              return <Redirect to="/" />; //已经登录，直接跳转
          }
  
          let em = this.props.service.errMsg; //(必须使用)才能触发
  
          return (
              <div className="login-page">
              <div className="form">
                  <form className="login-form">
                  <input type="text" placeholder="email"/>
                  <input type="password" placeholder="password"/>
                  <button onClick={this.handleClick.bind(this)}>登录</button>
                  <p className="message">还未注册？ <Link to="/reg">请注册</Link></p>
                  </form>
              </div>
              </div>
          )
      }
  
      componentDidUpdate(prevProps,prevState){ //+ 渲染后显示消息组件
          if (prevProps.service.errMsg){ //登录失败，则弹出消息框
              message.info(prevProps.service.errMsg,3,setTimeout(() => prevProps.service.errMsg = '',1000))
          }
      }
  }
  

• component/reg.js中_Reg组件同样增加message组件

  import React from "react";
  import {Link, Redirect} from "react-router-dom";
  import "../css/login.css"
  import {userService} from '../service/user';
  import { observer } from 'mobx-react';
  import {message} from 'antd';
  import 'antd/lib/message/style';
  
  // const userserver = new UserServer;
  
  export default class Reg extends React.Component {
      render() {
          return <_Reg service={userService} />
      }
  }
  
  @observer
  class _Reg extends React.Component {
      validate(password,confirmpwd){
          //表单验证函数
          return password.value === confirmpwd.value
      }
  
      handleClick(event){
          event.preventDefault();
          const [name,email,password,confirmpwd] = event.target.form;
          console.log(this.validate(password,confirmpwd));// +要验证表单数据后才发往后台
          this.props.service.reg(name.value,email.value,password.value);
      }
  
      render(){
          if (this.props.service.loggedin){ //已经登录的用户不允许注册
              return <Redirect to="/" />;
          }
  
          let em = this.props.service.errMsg;
  
          return (
              <div className="login-page">
              <div className="form">
                  <form className="register-form">
                  <input type="text" placeholder="name"/>
                  <input type="text" placeholder="email" />
                  <input type="password" placeholder="密码"/>
                  <input type="password" placeholder="确认密码"/>
                  <button onClick={this.handleClick.bind(this)}>注册</button>
                  <p className="message">如果已经注册 <Link to="/login">请登录</Link></p>
                  </form>
              </div>
              </div>
          )
      }
  
      componentDidUpdate(prevProps,prevState){ //+ 渲染后显示消息组件
          if (prevProps.service.errMsg){ //注册失败，则弹出消息框
              message.info(prevProps.service.errMsg,3,setTimeout(() => prevProps.service.errMsg = '',1000))
          }
      }
  
  }
  

1. 新建src/utils.js放入以下内容

   import React from 'react';
   
   const inject = obj => Comp => props => <Comp {...obj} {...props} />
   
   export {inject}
   

2. 将登陆、注册组件装饰一下

   • reg.js修改如下：

     import React from "react";
     import {Link, Redirect} from "react-router-dom";
     import "../css/login.css"
     import {userService as service} from '../service/user';
     import { observer } from 'mobx-react';
     import {message} from 'antd';
     import 'antd/lib/message/style';
     import {inject} from '../utils';
     
     // export default class Reg extends React.Component {
     //     render() {
     //         return <_Reg service={userService} />
     //     }
     // }
     
     // 注意装饰器顺序
     @inject({service}) //+ 装饰器注入属性
     @observer
     export default class _Reg extends React.Component {
         validate(password,confirmpwd){
             //表单验证函数
             return password.value === confirmpwd.value
         }
     
         handleClick(event){
             event.preventDefault();
             const [name,email,password,confirmpwd] = event.target.form;
             console.log(this.validate(password,confirmpwd));// +要验证表单数据后才发往后台
             this.props.service.reg(name.value,email.value,password.value);
         }
     
         render(){
             if (this.props.service.loggedin){ //已经登录的用户不允许注册
                 return <Redirect to="/" />;
             }
     
             let em = this.props.service.errMsg;
     
             return (
                 <div className="login-page">
                 <div className="form">
                     <form className="register-form">
                     <input type="text" placeholder="name"/>
                     <input type="text" placeholder="email" />
                     <input type="password" placeholder="密码"/>
                     <input type="password" placeholder="确认密码"/>
                     <button onClick={this.handleClick.bind(this)}>注册</button>
                     <p className="message">如果已经注册 <Link to="/login">请登录</Link></p>
                     </form>
                 </div>
                 </div>
             )
         }
     
         componentDidUpdate(prevProps,prevState){ //+ 渲染后显示消息组件
             if (prevProps.service.errMsg){ //注册失败，则弹出消息框
                 message.info(prevProps.service.errMsg,3,setTimeout(() => prevProps.service.errMsg = '',1000))
             }
         }
     
     }
     

   • login.js修改如下

     import React from "react";
     import {Link,Redirect} from "react-router-dom";
     import "../css/login.css";
     import {userService as service} from "../service/user";
     import {observer} from "mobx-react";
     import {message} from 'antd';
     import 'antd/lib/message/style'; //使用消息框样式表
     import {inject} from '../utils';
     
     // export default class Login extends React.Component{
     //     render(){
     //         return <_Login service={service} />;
     //     }
     // }
     
     // 注意装饰器顺序
     @inject({service}) //+ 装饰器注入属性
     @observer //将react组件转换为响应式组件
     export default class _Login extends React.Component {
         handleClick(event){
             event.preventDefault(); /* 阻止from表单提交 */
             let fm = event.target.form;
             this.props.service.login(fm[0].value,fm[1].value)
         }
     
         render() {
             if (this.props.service.loggedin) {
                 return <Redirect to="/" />; //已经登录，直接跳转
             }
     
             let em = this.props.service.errMsg; //(必须使用)才能触发
     
             return (
                 <div className="login-page">
                 <div className="form">
                     <form className="login-form">
                     <input type="text" placeholder="email"/>
                     <input type="password" placeholder="password"/>
                     <button onClick={this.handleClick.bind(this)}>登录</button>
                     <p className="message">还未注册？ <Link to="/reg">请注册</Link></p>
                     </form>
                 </div>
                 </div>
             )
         }
     
         componentDidUpdate(prevProps,prevState){ //+ 渲染后显示消息组件
             if (prevProps.service.errMsg){ //登录失败，则弹出消息框
                 message.info(prevProps.service.errMsg,3,setTimeout(() => prevProps.service.errMsg = '',1000))
             }
         }
     }
     

• 菜单网址，https://ant.design/components/menu-cn/
• Menu 菜单组件
  1. mode有水平、垂直、内嵌
• Menu.Item 菜单项
  1. key菜单项item的唯一标识
• 修改src/index.js导航菜单

import React from 'react';
import ReactDom from 'react-dom';
import {Route,Link,BrowserRouter as Router} from "react-router-dom";
import Login from "./component/login";
import Reg from "./component/reg";
import {Menu} from 'antd'; //加载antd的组件

import 'antd/lib/menu/style'; //加载组件的样式css
import { HomeFilled,LoginOutlined,RotateRightOutlined,AccountBookFilled } from '@ant-design/icons';


const App = () =>  (
    <Router>
        <div>
            <div>
                <Menu mode="horizontal" theme="dark"  style={{ lineHeight: '64px' }} defaultSelectedKeys= {['home']} >
                    <Menu.Item key="home" icon={<HomeFilled />} ><Link to="/">主页</Link></Menu.Item>
                    <Menu.Item key="login" icon={<LoginOutlined />}><Link to="/login">登录</Link></Menu.Item>
                    <Menu.Item key="reg" icon={<RotateRightOutlined />}><Link to="/reg">注册</Link></Menu.Item>
                    <Menu.Item key="about" icon={<AccountBookFilled />}><Link to="/about">关于</Link></Menu.Item>
                </Menu>
            </div>
            <div>
                <Route path="/about" component={About} />
                <Route path="/login" component={Login} />
                <Route path="/reg" component={Reg} />
                <Route exact path="/" component={Home} />
            </div>
        </div>
    </Router>
);

function Home() {
    return (
        <div>
        <h2>Home</h2>
        </div>
    );
}

function About() {
    return (
        <div>
        <h2>About</h2>
        </div>
    );
}


ReactDom.render(<App />, document.getElementById('root'));

• 采用上中下布局，参考：https://ant.design/components/layout-cn/
• 修改src/index.js导航菜单

import React from 'react';
import ReactDom from 'react-dom';
import {Route,Link,BrowserRouter as Router} from "react-router-dom";
import {Menu,Layout} from 'antd'; //加载antd的组件

import Login from "./component/login";
import Reg from "./component/reg";

import 'antd/lib/menu/style'; //加载组件的样式css
import 'antd/lib/layout/style';
import { HomeFilled,LoginOutlined,RotateRightOutlined,AccountBookFilled } from '@ant-design/icons';

const {Header,Content,Footer} = Layout; // 上中下

const App = () =>  (
    <Router>
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark"  style={{ lineHeight: '64px' }} defaultSelectedKeys= {['home']} >
                    <Menu.Item key="home" icon={<HomeFilled />} ><Link to="/">主页</Link></Menu.Item>
                    <Menu.Item key="login" icon={<LoginOutlined />}><Link to="/login">登录</Link></Menu.Item>
                    <Menu.Item key="reg" icon={<RotateRightOutlined />}><Link to="/reg">注册</Link></Menu.Item>
                    <Menu.Item key="about" icon={<AccountBookFilled />}><Link to="/about">关于</Link></Menu.Item>
                </Menu>
            </Header>
            <Content style={{ padding: '8px 50px' }}>
                <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
                    <Route path="/about" component={About} />
                    <Route path="/login" component={Login} />
                    <Route path="/reg" component={Reg} />
                    <Route exact path="/" component={Home} />
                </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>xddweb©2019-2020 </Footer>
        </Layout>
  </Router>
);

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}


ReactDom.render(<App />, document.getElementById('root'));

• 创建service/post.js文件，新建PostService类。

import axios from 'axios';
import {observable} from 'mobx';

class PostService{
    @observable msg = '';

    pub(title,content){
        console.log(title);
        axios.post('/api/posts/',{
            title,content
        })/* dev server 会代理 */
        .then(
            response => {
                console.log(response.data);
                console.log(response.status);
                this.msg = '博文提交成功';
            }
        ).catch(
            error => {
                console.log(error);
                this.msg = '博文提交失败'; //+信息显示
            }
        )
    }
}

const postService = new PostService();
export {postService};

• 使用Form组件，https://ant.design/components/form-cn/
• 创建component/pub.js文件

// component/pub.js
import React from 'react';
import {observer} from 'mobx-react';
import {Form,Icon,Input,Button,message} from 'antd';
import {inject} from '../utils';
import {postService as service} from '../service/post';

import 'antd/lib/form/style';
import 'antd/lib/icon/style';
import 'antd/lib/input/style';
import 'antd/lib/button/style';
import 'antd/lib/message/style';

const FormItem = Form.Item;
const { TextArea } = Input;

@inject({service})
@observer
export default class Pub extends React.Component {

    handleSubmit(event){
        event.preventDefault();
        const [ title,content ] = event.target;// event.target返回form,而form是表单控件的数组
        this.props.service.pub(title.value,content.value);
    }

    render(){
        let msg = this.props.service.msg;
        return (
            <Form layout="vertical" onSubmitCapture={this.handleSubmit.bind(this)}>
                <Form.Item label="标题" labelCol={{span:4}} wrapperCol={{span:14}} >
                    <Input placeholder="标题" />
                </Form.Item>

                <Form.Item label="内容" labelCol={{span:4}} wrapperCol={{span:14}}  >
                    <TextArea rows={10} />
                </Form.Item>
                <FormItem wrapperCol={{span:14,offset:4}}>
                    <Button type="primary" htmlType="submit" >提交</Button>
                </FormItem>
            </Form>
        )

    }

    componentDidUpdate(prevProps,prevState){ //+ 渲染后显示消息组件
        if (prevProps.service.msg){ 
            message.info(prevProps.service.msg,3,setTimeout(() => prevProps.service.msg = '',1000))
        }
    }

}

• Form 表单组件，layout是垂直，onSubmitCapture提交，注意这个提交的this就是表单自己
• FormItem表单项
  • label 设置控件前的标题
  • labelCol设置label的宽度，wrapperCol是label后占用的宽度，这些单位都是栅格系统的宽度
  • 参考Antd/Form表单/表单布局https://ant.design/components/form-cn/#components-form-demo-layout
  • 栅格系统：AntD提供了一个类似于Bootstrap的栅格系统，她将页面分成了24等分的列
  • span代表占几个格子：offset表示左边空出多个格子
• Input输入框，placeholder提示字符
• TextArea文本框，rows行数
• Button按钮
  • type是按钮的类型，也决定它的颜色
  • htmlType使用HTML中的Type值，submit是提交按钮会触发提交行为，一定要写，但是handleSubmit中要阻止默认行为。

• https://github.com/margox/braft-editor
• 安装插件

使用yarn安装最新版本
$ yarn add braft-editor
安装指定版本
$ yarn add [email protected]
安装2.x.x最高版本
$ yarn add braft-editor@^2.3.1
使用npm安装
$ npm install braft-editor --save

组件使用
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

• 参考https://braft.margox.cn/demos/basic
• 修改component/pub.js文件

import React from 'react';
import {observer} from 'mobx-react';
import {Form,Icon,Input,Button,message} from 'antd';
import {inject} from '../utils';
import {postService as service} from '../service/post';
import BraftEditor from 'braft-editor';

import 'braft-editor/dist/index.css'
import 'antd/lib/form/style';
import 'antd/lib/icon/style';
import 'antd/lib/input/style';
import 'antd/lib/button/style';
import 'antd/lib/message/style';

const FormItem = Form.Item;
const { TextArea } = Input;

@inject({service})
@observer
export default class Pub extends React.Component {

    //创建一个state，关联组件和组件输出的HTML内容
    state = {
        editorState : BraftEditor.createEditorState('<p><a href="">xdd网页</a></p>'),
        outputHTML : "<p></p>"
    }

    handleSubmit(event){
        event.preventDefault();
        const [ title,content ] = event.target;// event.target返回form,而form是表单控件的数组
        console.log(title,content);
        const {outputHTML = ''} = this.state;
        console.log(outputHTML);
        // this.props.service.pub(title.value,content.value);
        this.props.service.pub(title.value,outputHTML);
    }

    // 组件内容变化更新state,引发渲染
    handleChange = (editorState) =>{
        this.setState({
            editorState:editorState,
            outputHTML:editorState.toHTML()
        });
    }

    render(){
        let msg = this.props.service.msg;
        // 排除按钮
        const excludeControls = [
            'letter-spacing',
            'line-height',
            'clear',
            'headings',
            'list-ol',
            'list-ul',
            'remove-styles',
            'subscript',
            'hr',
            'text-align'
        ];

        const {editorState,outputHTML} = this.state;

        return (
            <Form layout="vertical" onSubmitCapture={this.handleSubmit.bind(this)}>
                <Form.Item label="标题" labelCol={{span:4}} wrapperCol={{span:14}} >
                    <Input placeholder="标题" />
                </Form.Item>

                <Form.Item label="内容" labelCol={{span:4}} wrapperCol={{span:14}}  >
                    <BraftEditor value={editorState} excludeControls={excludeControls}
                     onChange = {this.handleChange.bind(this)} contentStyle={{height:400}} />
                </Form.Item>
                <FormItem wrapperCol={{span:14,offset:4}}>
                    <Button type="primary" htmlType="submit" >提交</Button>
                </FormItem>
            </Form>
        )
    }

    componentDidUpdate(prevProps,prevState){ //+ 渲染后显示消息组件
        if (prevProps.service.msg){ 
            message.info(prevProps.service.msg,3,setTimeout(() => prevProps.service.msg = '',1000))
        }
    }

}

• header中的jwt，由于与后台Django Server通信，身份认证需要jwt,这个要放到request header中。使用axios的API =axios.post(url[data,config])=可以使用第三个参数config。config是一个对象，字典中设置headers字段，该字段的值依然是对象，都是键值对形式。
• 修改service/post.js文件

// service/post.js
import axios from 'axios';
import {observable} from 'mobx';
import store from 'store';
import expire from 'store/plugins/expire';

store.addPlugin(expire)

class PostService{
    @observable msg = '';

    constructor(){
        this.axios = axios.create({
            baseURL: '/api/posts'
        })
    }

    getJwt(){
        return store.get("token",'')
    }

    pub(title,content){
        console.log(title);
        axios.post('/api/posts/',{
            title,content
        },{
            headers:{'jwt': this.getJwt()}
        })/* dev server 会代理 */
        .then(
            response => {
                console.log(response.data);
                console.log(response.status);
                this.msg = '博文提交成功';
            }
        ).catch(
            error => {
                console.log(error);
                this.msg = '博文提交失败'; //+信息显示
            }
        )
    }
}

const postService = new PostService();
export {postService};

• =index.jsp=中增加如下代码

import Post from "./component/post"; //详情页

<Route path="/post/:id" component={Post} />

• 新建component/post.js,创建Post组件。使用antd Card布局。
• 安装日期处理库，=yarn add moment=。

// component/post.js
import React from 'react';
import { observer } from 'mobx-react';
import {message,Card,Empty} from 'antd';
import {inject} from '../utils';
import {postService as service} from '../service/post';
import moment from 'moment';

import 'antd/lib/message/style';
import 'antd/lib/card/style';
import 'antd/lib/empty/style';

@inject({service})
@observer
export default class Post extends React.Component {
    constructor(props){
        super(props);
        let {id = -1} = props.match.params;
        console.log(id);
        this.props.service.getPost(id);
    }

    render(){
        let msg = this.props.service.msg;
        console.log(this.props.service.post);
        const {title = "", content = "",author,postdate} = this.props.service.post;

        if (title){
            return (
            <Card title={title} extra={<a href="#">{author}</a>} >
                <p>{moment(postdate * 1000).format("YYYY-MM-DD hh:mm:ss")}</p>
                <p dangerouslySetInnerHTML={{__html:content}}></p>
            </Card>
            );
        }
        else {
            return <Empty />;
        }

    }

    componentDidUpdate(prevProps,prevState){ //+ 渲染后显示消息组件
        if (prevProps.service.msg){
            message.info(prevProps.service.msg,3,()=> prevProps.service.msg = '');
        }

    }
}

• 如果使用了富文本编辑器，那么显示的时候，发现不能按照网页标签显示。原因是为了安全，防止xss攻击，React不允许直接按照HTML显示。

• 使用dangerouslySetInnerHTML属性，这个名字提醒使用者很危险。

  <p>{content}</p>
  修改为
  <p dangerouslySetInnerHTML={{__html:content}}> </p>
  

• 修改service/post.js代码如下

// service/post.js

import axios from 'axios';
import {observable} from 'mobx';
import store from 'store';
import expire from 'store/plugins/expire';

store.addPlugin(expire)

class PostService{
    @observable msg = '';
    @observable post = {}; //文章

    constructor(){
        this.axios = axios.create({
            baseURL: '/api/posts/'
        })
    }

    getJwt(){
        return store.get("token",'')
    }

    pub(title,content){
        console.log(title);
        axios.post('/api/posts/',{
            title,content
        },{
            headers:{'jwt': this.getJwt()}
        })/* dev server 会代理 */
        .then(
            response => {
                console.log(response.data);
                console.log(response.status);
                this.msg = '博文提交成功';
            }
        ).catch(
            error => {
                console.log(error);
                this.msg = '博文提交失败'; //+信息显示
            }
        )
    }

    getPost(id){
        this.axios.get(id).then(
            response => { //此函数要注意this的问题
                this.post = response.data.post;
            }
        ).catch(
            error => {
                console.log(error);
                this.post = {}
                this.msg = "文章加载失败"; //信息显示
            }
        )
    }
}

const postService = new PostService();
export {postService};

• 数据详情页，可参考https://ant.design/components/descriptions-cn/

• 创建component/list.js,创建List组件。在index.js中提交菜单项和路由。
• 使用L是为了避免和AntD的List冲突。
• 修改service/index.js文件

// service/index.js
import React from 'react';
import ReactDom from 'react-dom';
import {Route,Link,BrowserRouter as Router} from "react-router-dom";
import {Menu,Layout} from 'antd'; //加载antd的组件

import Login from "./component/login";
import Reg from "./component/reg";
import Pub from "./component/pub"; // 发布页
import Post from "./component/post"; //详情页
import L from './component/list'; //列表页

import 'antd/lib/menu/style'; //加载组件的样式css
import 'antd/lib/layout/style';
import { HomeFilled,LoginOutlined,RotateRightOutlined,AccountBookFilled,BarcodeOutlined,PullRequestOutlined} from '@ant-design/icons';

const {Header,Content,Footer} = Layout; // 上中下

const App = () =>  (
    <Router>
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark"  style={{ lineHeight: '64px' }} defaultSelectedKeys= {['home']} >
                    <Menu.Item key="home" icon={<HomeFilled />} ><Link to="/">主页</Link></Menu.Item>
                    <Menu.Item key="login" icon={<LoginOutlined />}><Link to="/login">登录</Link></Menu.Item>
                    <Menu.Item key="reg" icon={<RotateRightOutlined />}><Link to="/reg">注册</Link></Menu.Item>
                    <Menu.Item key="pub" icon={<PullRequestOutlined />}><Link to="/pub">发布</Link></Menu.Item>
                    <Menu.Item key="bars" icon={<BarcodeOutlined />}><Link to="/list">文章列表</Link></Menu.Item>
                    <Menu.Item key="about" icon={<AccountBookFilled />}><Link to="/about">关于</Link></Menu.Item>
                </Menu>
            </Header>
            <Content style={{ padding: '8px 50px' }}>
                <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
                    <Route path="/about" component={About} />
                    <Route path="/login" component={Login} />
                    <Route path="/reg" component={Reg} />
                    <Route path="/pub" component={Pub} />
                    <Route path="/list" component={L} />
                    <Route path="/posts/:id" component={Post} />
                    <Route exact path="/" component={Home} />
                </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>xddweb©2019-2020 </Footer>
        </Layout>
  </Router>
);

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

ReactDom.render(<App />, document.getElementById('root'));

• 分页使用了Pagination组件，在L组件的render函数的List组件中使用pagination属性，这个属性放入一个pagination对象，有如下属性
  • current，当前页
  • pageSize, 页面内行数
  • total,记录总数
  • onChange,页码切换时调用，回调函数为=(pageNo,pageSize)=>{}=,即切换是获得当前页码和页内行数。
• 可参考https://ant.design/components/list-cn/#components-list-demo-vertical
• 修改component/list.js代码如下：

// component/list.js
import React from 'react';
import {observer} from 'mobx-react';
import {message,List,Empty} from 'antd';
import {inject} from '../utils';
import {postService as service} from '../service/post';
import {Link} from 'react-router-dom';

import 'antd/lib/message/style';
import 'antd/lib/list/style';

@inject({service})
@observer
export default class L extends React.Component{
    constructor(props) {
        super(props);
        props.service.list();
    }

    onChange(pageNumber){
        console.log(pageNumber);
        this.props.service.list(pageNumber);
    }

    render() {
        const {posts:data=[],pagination} = this.props.service.posts;
        if (data.length){
            const {page:current=1,total ,size:pageSize} = pagination;
            console.log(current,total,pageSize);
            return (
                <List 
                    header={<div>博文列表</div>} 
                    bordered 
                    dataSource = {data}
                    renderItem={item => (
                        <List.Item>
                            <Link to={'/posts/'+item.id}>{item.title}</Link>
                        </List.Item>
                    )}
                    pagination={{
                        current,
                        total,
                        pageSize,
                        onChange:this.onChange.bind(this)
                    }}
                />
            )
        }

        return <Empty />;
    }
}

• 修改service/post.js中的list方法

import axios from 'axios';
import {observable} from 'mobx';
import store from 'store';
import expire from 'store/plugins/expire';

store.addPlugin(expire)

class PostService{
    @observable msg = '';
    @observable post = {}; //文章
    @observable posts = {'posts':[],'pagination':{page:1,size:5,pages:0,total:0}}; //列表

    constructor(){
        this.axios = axios.create({
            baseURL: '/api/posts/'
        })
    }

    getJwt(){
        return store.get("token",'')
    }

    pub(title,content){
        console.log(title);
        axios.post('/api/posts/',{
            title,content
        },{
            headers:{'jwt': this.getJwt()}
        })/* dev server 会代理 */
        .then(
            response => {
                console.log(response.data);
                console.log(response.status);
                this.msg = '博文提交成功';
            }
        ).catch(
            error => {
                console.log(error);
                this.msg = '博文提交失败'; //+信息显示
            }
        )
    }

    getPost(id){
        this.axios.get(id).then(
            response => { //此函数要注意this的问题
                this.post = response.data.post;
            }
        ).catch(
            error => {
                console.log(error);
                this.post = {}
                this.msg = "文章加载失败"; //信息显示
            }
        )
    }

    list(page=1,size=2){
        this.axios.get(`?page=${page}&size=${size}`).then(
            response => { //注意此函数的this问题
                this.posts = response.data;
            }
        ).catch(
            error =>{
                console.log(error);
                this.post = {}
                this.msg = '文章列表加载失败';// 信息显示
            }
        )
    }
}

const postService = new PostService();
export {postService};

• 生成项目依赖插件版本信息

## 应用程序的根目录下生成
$ pip freeze >requirements

• 构建setup.py文件(在应用程序根目录下面)

from distutils.core import setup
import glob

setup(name='blog',
      version='1.0',
      description='www.mumuxi.online',
      author='mumuxi',
      author_email="[email protected]",
      url='https://www.mumuxi.online',
      packages=["MicroBlog",'post','user','utils','djweb'],
      py_modules=["manage"],
      data_files=glob.glob("templates/*.html") + ["requirements"]
      )

## 应用程序的跟目录下打包
$ python setup.py sdist --formats=gztar #gz

• 在Linux系统中创建一个python虚拟环境目录，使用pyenv
• 安装pyenv

# yum install git python-devel mysql-devel 
# yum -y install gcc make patch gdbm-devel openssl-devel sqlite-devel readline-devel zlib-devel bzip2-devel

python依赖，mysqlclient依赖
# yum install python-devel mysql-devel

# useradd python
# echo python | passwd python --stdin
# su - python

进入python用户执行如下操作
$ curl -L https://github.com/pyenv/pyenv-installer/raw/master/bin/pyenv-installer | bash
$ vim ~/.bashrc
export PATH="/home/root/.pyenv/bin:$PATH"
eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"

$ pyenv install 3.6.6 -vv

准备pip配置文件
$ mkdir ~/.pip
$ vim ~/.pip/pip.conf
[global]
index-url = https://mirrors.aliyun.com/pypi/simple/

[install]
trusted-host=mirrors.aliyun.com

安装虚拟环境
$ pyenv virtualenv 3.6.6 blog366
$ mkdir -p projects
$ cd projects 
$ tar xf blog-1.0.tar.gz
$ ln -sv blog-1.0 web
"web" -> "blog-1.0"
$ cd web
$ pwd
/home/python/projects/web

$ pyenv local blog366
$ pip list
$ pip install -r requirements  #安装依赖包
$ sed -i -e 's/DEBUG.*/DEBUG = False/' -e 's/ALLOWED_HOSTS.*/ALLOWED_HOSTS = ["*"]/' djweb/setting.py # 修改Django配置
$ python manage.py runserver 0.0.0.0:9112 # 测试

• 使用=http://www.mumuxi.online:9112/posts/?page=2&size=2= 成功返回数据，说明Django应用成功。
• 至此，Django应用部署完成。Django带了个开发用Web Server. 生成环境不用，需要借助其他Server。
• 注意：ALLOWED_HOSTS=[“*”] 这是所有都可以访问，生产环境应指定具体可以访问的IP，而不是所有。

• Web Server Gateway Interface,是Python中定义的WSGI Server与应用程序的接口定义。
• 应用程序符合WSGI规范的Django框架负责，

• uWSGI是一个c语言的项目，提供一个WEB服务器，它支持WSGI协议，可以和Python的WGSI应用程序通信。
• 官方文档https://uwsgi-docs.readthedocs.io/en/latest/
  
• uWSGI可以直接启动HTTP服务，接收HTTP请求，并调用Django应用。
• 安装

$ pip install uwsgi
$ uwsgi --help

• 在Django项目根目录下，运行=$ uwsgi –http :8000 –wsgi-file djweb/wsgi.py –stats :8001 –stats-http=,使用下面链接测试
  1. http://www.mumuxi.online:8000/
  2. http://www.mumuxi.online:8000/posts/?page=2&size=2
  3. 运行正常。
• =stats=能够显示服务器状态值。 =–stats-http=选项可以使用http访问这个值。
• 安装uwsgitop获取这个stat值。注意使用这个命令不要使用=–stats-http=选项。

$ pip install uwsgitop
$ uwsgitop --frequency www.mumuxi.online:8001

• 使用uwsgi启动项目(http协议启动) uwsgi --http 127.0.0.1:8889 --wsgi-file djweb/wsgi.py
• 使用uwsgi启动项目(uwsgi协议启动,二进制通信协议。速度快) uwsgi --socket 127.0.0.1:8889 --wsgi-file djweb/wsgi.py

• rimraf递归删除文件，rem -rf

$ npm install rimraf --save-dev
或者
$ yarn add rimraf --dev

在package.json中替换
"build": "rimraf dist && webpack -p --config webpack.config.prod.js"

$ npm run build
或者
$ yarn run build 
编译成功。查看项目目录中的dist目录。

• 将编译成功后的静态文件放入对应的web静态文件中即可(即nginx相应的web目录)

1. 浏览器通过互联网HTTP协议访问NGINX
2. 静态内容(图片、JS、CSS、文件)都是Nginx负者提供WEB服务
3. Nginx配置代理。可以死Http和Socket通信。本次使用uwsgi协议
4. uWSGI服务程序提供uwsgi协议的支持，将从Nginx发来的请求封装后调用WSGI的Application。这个Application可能很复杂，有可能是基于Django框架编写。这个程序将获得请求信息。
5. 通过Django的路由，将请求交给视图函数(类)处理，可能需要访问数据库数据，也可能使用了模板。最终数据返回给浏览器。

• Controller控制器：负者接收用户请求，调用Model完成数据，调用view完成对用户的响应
• Model模型：负责业务数据的处理
• View视图：负责用户的交互界面

• Model层
  1. ORM建立对象关系映射，提供数据库操作
• Template层
  1. 负责数据的可视化，使用HTML、CSS等构成模板，将数据应用到模板中，并返回给浏览器。
• View层
  1. Django完成URL映射后，把请求交给View层的视图函数处理，调用Model层完成数据，如有必要调用Template层响应客户端，如果不需要，直接返回数据。

• 原来登录成功，会使用jwt的token发往客户端。现在不需要了，只需要在Session中记录登录信息即可。(Django默认请求session会持久化数据库中的django_session表中)

def jsonify(obj,allow=None,exclude=set()):
    """# 筛选对象中的属性，allow白名单，exclude黑名单"""
    if allow:
        allow = set(map(lambda x: str.lower(x), allow))
        fn = lambda x: x.name.lower() in allow
    else:
        exclude = set(map(lambda x: str.lower(x), exclude))
        fn = lambda x: x.name.lower() not in exclude
    names = type(obj)._meta.fields #表的列
    return {i.name:getattr(obj,i.name) for i in filter(fn,names)}

# 用户登录
@require_POST
def login(request:HttpRequest):
    try:
        palyload = simplejson.loads(request.body)
        email = palyload["email"]
        password = palyload["password"].encode()
        name = palyload["name"]
        user = User.objects.get(email=email)
        # 验证密码
        if not bcrypt.checkpw(password,user.password.encode()):
            return JsonResponse({"error": XddError.USERPW_ERROR},404)
        # token = get_token(user.id)
        # res = JsonResponse({
        #     "user":jsonify(user,exclude={"password"}),
        #     "token":token
        # },status=201)
        # res.set_cookie(settings.TOKEN,token)

        from django.contrib.sessions.backends.db import SessionStore #持久的session
        session:SessionStore = request.session
        print(session,type(session))
        print(session.keys())
        session.set_expiry(300) #设置session会话过期时间300秒
        session["user_id"] = user.id
        # session["user_info"] = "<{} {} {}>".format(user.id,user.name,user.email) #会存储在服务端，数据库中
        uobj = jsonify(user,exclude=["password"])
        session["user_info"] = uobj
        # u = session["user_info"]
        # print(u)
        # print("-"*30)
        res = JsonResponse({
            "user":uobj
        },status=201)
        return res
    except Exception as e:
        logging.info(e)
        return JsonResponse({
            "error": XddError.USERPW_ERROR
        },status=404)  # 404错误

• 登录成功，浏览器端，就能收到一条set-Cookie

sessionid=hjg0j01pbvadxdjd5jf9pn91larvv10t; path=/; domain=localhost; HttpOnly; Expires=Wed, 24 Jul 2019 13:19:01 GMT;

• session.set_expiry(300)方法。设置session过期时间
  1. 300秒过期
  2. None表示使用全局session过期策略
  3. 0表示会话级session,即浏览器关闭过期
  4. datetime对象表示在指定时间点过期
• 建议不要再Session中保存太多数据，也不要保存过于复杂的类型。

• 取消原有判断HTTP hander中是否提供了JWT信息，改为判断该SessionID是否能找到一个字典，这个字典中是否有登录成功后设置的user_id键值对信息。

# 身份认证
def authenticate(fn):
    def _wapper(*args,**kwargs):
        try:
            *_,request = args
            # # 从请求cooker中获取token
            # token = request.META.get(settings.HTTP_TOKEN)
            # if not token:
            #     logging.info("身份认证失败")
            #     return HttpResponse(status=401)
            # # 验证
            # id = jwt.decode(token,settings.SECRET_KEY,alogorithms=[settings.JWT_ARITHMETIC])["user_id"]
            from django.contrib.sessions.backends.db import SessionStore  # 持久的session
            session:SessionStore = request.session
            id = session["user_id"] #如果获取失败，说明session过期，或没有
            user = User.objects.get(id=id)
            request.user = user
            res = fn(*args, **kwargs)
            return res
        except Exception as e:
            logging.info(e)
            return JsonResponse({"error":XddError.LOGIN_OUT_TIME},status=401)
    return _wapper

@require_POST #配置url路由
@authenticate #在有需要的视图函数上加上装饰器 #没有登录过，就不用登出了，所以要认证
def logout(request:HttpRequest):
    info = "{} logout.".format(request.session["user_id"])
    del request.session["user_id"]  # 不会清除数据库中记录
    request.session.flush()  # 情况当前session,删除表中对应记录
    return JsonResponse({},status=200)

• 登出时，需要调用flush方法，清除session,清除数据库记录。
• 登录成功，为当前session在django_session表中增加一条记录，如果没有登出操作，那么该记录不会消失。Django也没有自动清除记录的功能。但是Django提供了一个命令clearsessions，建议在cron中定期执行。

django-admin.py clearsessions
manage.py clearsessions

• 在当前会话中，每次request请求中都会得到浏览器端发出的SessionID，因此都可以在服务器端找到该ID对应的Session字典，可以使用request.session访问。
• 所有请求都可以使用request.session对象，ID找不到可以认为返回个空字典。

def test1(request): #视图函数，需要配置url映射
    if request.session.get("user_id"): #访问Session字典中的值
        print(request.session.items())
        return HttpResponse("test1 ok")
    else:
        return HttpResponseBadRequest() #没有此信息，说明没有登录成功过

• 使用Epel源的rpm安装

redis安装，使用提供的rpm安装，redis依赖jemalloc

# yum install jemalloc-3.6.0-1.el7.x86_64.rpm redis-3.2.12-2.el7.x86_64.rpm

# rpm -pql redis-3.2.12-2.el7.x86_64.rpm
/etc/logrotate.d/redis
/etc/redis-sentinel.conf
/etc/redis.conf
/usr/bin/redis-cli
/usr/bin/redis-sentinel
/usr/bin/redis-server
/usr/lib/systemd/system/redis-sentinel.service
/usr/lib/systemd/system/redis.service

# 编辑redis配置文件
# vi /ect/redis.conf
port 6379 #启动时的默认端口
bind 192.168.61.109  #redis启动时的主机
protected-mode no #是否开启保护模式

• 启动、停止redis服务

## 启动服务
# systemctl start redis 
## 停止服务
# systemctl stop redis
## 添加开机启动
# systemctl enable redis

• redis链接字符串格式=redis://password@hostname:port/db_number=

#指定服务器的redis端口6379，使用0号库
app.conf.broker_url = 'redis://192.168.61.109:6379/0'

• 生成任务

from celery import Celery
import time
app = Celery('mytask')
# print(app)
# print(add.name) #mytask.add
# print(add)
# print(app.tasks)
# print(app.conf)
#配置redis派发任务，任务存放地址
app.conf.broker_url = 'redis://192.168.61.109:6379/0'
#配置redis任务状态返回值数据库
app.conf.result_backend = 'redis://192.168.61.109:6379/1'
# 重复执行问题解决
# 如果超过visibility_timeout，Celery会认为此任务失败
# 会重分配其他worker执行该任务，这样会造成重复执行。visibility_timeout这个值大一些
# 注意，如果慢任务执行时长超过visibility_timeout依然会多执行
#配置任务超时时间12小时
app.conf.broker_transport_options = {"visibility_timeout":3600*12} #12 hours
app.conf.update(
    enable_utc = True,
    timezone = "Asia/Shanghai"
)

@app.task(name="my_add")
def add(x,y):
    print("start run add x={},y={}".format(x,y))
    ret = x+y
    time.sleep(5)
    print("end run ret = {}".format(ret))
    return ret

if __name__ == "__main__":
    add.delay(4,5) #下发一个任务到broker的queue
    add.apply_async((10,20),countdown=60) #派发一个任务，延迟60秒后执行

• 注意：上面代码执行，使用add.delay等加入任务到Redis中，在启动celery命令消费Redis的任务，执行并返回结果到Redis中。
• 添加任务的常用方法
  1. T.delay(arg,kwarg=value) #快捷添加任务的方法
     • T：被app.task装饰的函数
     • args :位置参数
     • kwargs：关键字参数
  2. T.apply_async((args,),{'kwarg':value},countdown=?,expires=?)
     • args 位置参数，是个元组
     • kwargs 关键字参数，是个字典
     • contdown 延迟多久执行，默认秒
     • expires 多久后过期，默认秒
• 执行任务：如果在Linux下能出现下面问题，可如下配置

from celery import platforms

# Linux下，默认不允许root用户启动celery，可使用下面的配置
platforms.C_FORCE_ROOT = True

• 使用命令执行Redis中的任务(默认在pycharm控制台中使用)
• $ celery -A test1 worker --loglevel=INFO --concurrency=5 -n worker1@%n
  1. -A APP, –app App指定app名称，App是模块名
  2. –loglevel 指定日志级别
  3. -n 名称，%n指主机名
  4. –concurrency 指定并发多进程数，缺省值是CPU数
• windows下可能出现下面问题.

[2019-07-25 17:09:29,477: ERROR/MainProcess] Task handler raised error: ValueError('not enough values to unpack (expected 3, got 0)')
Traceback (most recent call last):
  File "d:\mypythonuse\mygitpythonthree\venv\lib\site-packages\billiard\pool.py", line 358, in workloop
    result = (True, prepare_result(fun(*args, **kwargs)))
  File "d:\mypythonuse\mygitpythonthree\venv\lib\site-packages\celery\app\trace.py", line 544, in _fast_trace_task
    tasks, accept, hostname = _loc
ValueError: not enough values to unpack (expected 3, got 0)
[2019-07-25 17:09:30,354: ERROR/MainProcess] Task handler raised error: ValueError('not enough values to unpack (expected 3, got 0)')
Traceback (most recent call last):
  File "d:\mypythonuse\mygitpythonthree\venv\lib\site-packages\billiard\pool.py", line 358, in workloop
    result = (True, prepare_result(fun(*args, **kwargs)))
  File "d:\mypythonuse\mygitpythonthree\venv\lib\site-packages\celery\app\trace.py", line 544, in _fast_trace_task
    tasks, accept, hostname = _loc
ValueError: not enough values to unpack (expected 3, got 0)

1. 安装eventlet解决问题

pip install eventlet

包括win10,建议还是按照eventlet
重新执行任务

celery -A test1 worker -p eventlet –loglevel=INFO –concurrency=5 -n worker1@%n

• -P ,–pool 指定进程池实现，默认prefork,windows下使用eventlet
• 运行日志如下

(venv) D:\MyPythonUse\MyGitPythonThree>celery -A text worker -P eventlet --loglevel=INFO --concurrency=4 -n worker1%n

 -------------- celery@worker1gdy v4.4.0rc2 (cliffs)
---- **** -----
--- * ***  * -- Windows-10-10.0.17134-SP0 2019-07-25 17:39:37
-- * - **** ---
- ** ---------- [config]
- ** ---------- .> app:         mytask:0x1a93ee6cc18
- ** ---------- .> transport:   redis://192.168.61.109:6379/0
- ** ---------- .> results:     redis://192.168.61.109:6379/1
- *** --- * --- .> concurrency: 4 (eventlet)
-- ******* ---- .> task events: OFF (enable -E to monitor tasks in this worker)
--- ***** -----
 -------------- [queues]
                .> celery           exchange=celery(direct) key=celery


[tasks]
  . my_add

[2019-07-25 17:39:37,834: INFO/MainProcess] Connected to redis://192.168.61.109:6379/0
[2019-07-25 17:39:37,859: INFO/MainProcess] mingle: searching for neighbors
[2019-07-25 17:39:38,909: INFO/MainProcess] mingle: all alone
[2019-07-25 17:39:38,963: INFO/MainProcess] celery@worker1gdy ready.
[2019-07-25 17:39:38,981: INFO/MainProcess] pidbox: Connected to redis://192.168.61.109:6379/0.
[2019-07-25 17:39:39,067: INFO/MainProcess] Received task: my_add[c3e8cfe7-e9d9-49c6-94ff-e6cf5f6a8d83]
[2019-07-25 17:39:39,069: WARNING/MainProcess] start run add x=4,y=5
[2019-07-25 17:39:39,076: INFO/MainProcess] Received task: my_add[ac9bd504-c027-4c9a-9ab2-13c4e5c791f1]  ETA:[2019-07-25 17:39:58.654164+08:00]
[2019-07-25 17:39:44,070: WARNING/MainProcess] end run ret = 9
[2019-07-25 17:39:44,077: INFO/MainProcess] Task my_add[c3e8cfe7-e9d9-49c6-94ff-e6cf5f6a8d83] succeeded in 5.0s: 9
[2019-07-25 17:39:58,663: WARNING/MainProcess] start run add x=10,y=20
[2019-07-25 17:40:03,669: WARNING/MainProcess] end run ret = 30
[2019-07-25 17:40:03,672: INFO/MainProcess] Task my_add[ac9bd504-c027-4c9a-9ab2-13c4e5c791f1] succeeded in 5.0s: 30

• 新版本Celery集成到Django方式改变了。
• 目录结构

- proj/
  - manage.py
  - proj/ #Django全局目录
    - __init__.py
    - settings.py
    - celery.py
    - urls.py
  - app1 #应用程序目录
    - __init__.py
    - tasks.py
    - view.py
    - models.py

• 在Django全局目录中(settings.pys所在目录)

  1. 定义一个celery.py文件

     """
     author:xdd
     date:2019-07-25 20:21
     """
     from __future__ import absolute_import, unicode_literals
     import os
     from celery import Celery
     
     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'blog.settings') #必须修改模块名
     app = Celery("xdd")
     app.config_from_object('django.conf:settings', namespace='CELERY')
     app.autodiscover_tasks()
     app.conf.update(
         enable_utc=True,
         timezone="Asia/Shanghai"
     )
     # 配置redis派发任务，任务存放地址
     app.conf.broker_url = 'redis://192.168.61.109:6379/0'
     # 配置redis任务状态返回值数据库
     app.conf.result_backend = 'redis://192.168.61.109:6379/1'
     # 如果超过visibility_timeout，Celery会认为此任务失败
     # 会重分配其他worker执行该任务，这样会造成重复执行。visibility_timeout这个值大一些
     # 注意，如果慢任务执行时长超过visibility_timeout依然会多执行
     app.conf.broker_transport_options = {"visibility_timeout": 3600 * 12}  # 12 hours
     

  2. 修改=__init__.py=文件

     from __future__ import absolute_import, unicode_literals
     from .celery import app as celery_app
     
     __all__ = ('celery_app',)
     

• 在user应用下

  1. 新建文件=tasks.py=中新建任务

     """
     author:xdd
     date:2019-07-25 20:32
     """
     
     from __future__ import absolute_import, unicode_literals
     from blog.celery import app
     from django.core.mail import send_mail
     from blog import settings
     import datetime
     
     @app.task(name="server_email")
     def email(active_url,email=[]):
         """发送邮件"""
         print("开始发送")
         send_mail(
             "激活邮件",
             "Here is the message",
             settings.EMAIL_HOST_USER, #服务器的发件箱
             email,#目标，收件箱
             fail_silently = False,
             html_message="点击此链接激活邮件<a href='{0}'>{0}</a> 时间：{1:%Y-%m-%d %H:%M:%S}".format(active_url,datetime.datetime.now())
         )
         print("发送完成")
     

  2. views.py视图函数中调用

     from .tasks import email
     # 测试函数
     def text(request):
         try:
             print("aa-------  --------")
             email.delay("www.baidu.com",["[email protected]"])
             return HttpResponse("发送成功",status=201)
         except Exception as e:
             logging.info(e)
             return JsonResponse({"error":"邮件发送失败"},status=400)
     

  3. 以后放在注册函数中发送邮件。
  4. 注意：目前在Python3.7部署时，发邮件可能会报wrap_socket()错。可以使用python3.6版本

  5. urls.py路由视图函数

     """
     author:xdd
     date:2019-07-17 22:09
     """
     
     from django.conf.urls import url
     from .views import reg,login,text,logout
     from django.http import HttpResponse
     from user.models import User
     
     urlpatterns = [
         url(r'^$',reg), #用户注册
         url(r'^login$',login),  #用户登录
         url(r'^logout$',logout), #用户登出
         url(r'^text$',text),
     ]
     

  6. 访问=http://127.0.0.1:8000/users/text=%E4%BC%9A%E8%B0%83%E7%94%A8text%E8%A7%86%E5%9B%BE%E5%87%BD%E6%95%B0%EF%BC%8C%E6%89%A7%E8%A1%8Cemail.delay()%EF%BC%8C%E4%BC%9A%E5%9C%A8redis%E4%B8%AD%E5%A2%9E%E5%8A%A0%E4%BB%BB%E5%8A%A1。
  7. 执行任务，下面命令会从redis中拿任务执行

  celery -A blog -P eventlet worker –loglevel=INFO –concurrency=4 -n worker@%n