简介

我们的应用将使用前后端分离，前端使用react框架，后端使用django。

 这里可以清晰的看见，前后端分离时， 后端api 与 前端react如何结合。

4.1 全局环境创建

后端环境初始化，如果需要在新建的backend 虚拟化环境进行操作，重新安装django，否则django-admin 无效

 pip install install django~=3.1.0
 django-admin startproject config .

 python manage.py startapp todos
 python manage.py migrate

注册到全局配置

 config/setting.py
 	# Local
	INSTALLED_APPS = ['todos', # new]

创建models，todos/models.py
from django.db import models
class Todo(models.Model):
title = models.CharField(max_length=200)
body = models.TextField()
def str(self):
return self.title

更新库,创建迁移。

生成的单个迁移文件将包含两个应用程序上的数据。这只会增加调试难度。尽量减少迁移

python manage.py makemigrations todos
python manage.py makemigrations  # 不指定app时，将迁移所有有改动的app
python manage.py migrate  

如果我们进入管理员不会立即显示我们的Todos应用程序。我们需要更改todos/admin.py文件如下
创建3个todos，然后为它们创建 web 页面，这需要新建 urls，views，templates

注册应用

INSTALLED_APPS = [ # 3rd party
				'rest_framework',
				'todos', 
					]

• 设置权限为 允许全部

隐式设计默认设置是为了使开发人员可以进入并开始在本地快速工作开发环境。但是，默认设置不适用于生产。

所以通常，我们会在项目过程中对它们进行一些更改

REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': [
			'rest_framework.permissions.AllowAny', ] }

AllowAny是其中之一，这意味着当我们显式设置它时，与上面的操作一样，其效果与没有DEFAULT_PERMISSION_CLASSES配置的情况完全相同 。

后端api服务 需要三个部分 urls.py, views.py, and serializers.py
不需要 template

4.2 urls, views, serializers

全局urls

# config/urls.py
	from django.contrib import admin
	from django.urls import include, path # new
		urlpatterns = [
			path('admin/', admin.site.urls),
			path('api/', include('todos.urls')), # new
			]

应用app的 路由配置

# todos/urls.py
	from django.urls import path
	from .views import ListTodo, DetailTodo
	urlpatterns = [
			path('<int:pk>/', DetailTodo.as_view()),
			path('', ListTodo.as_view()),
	]

我们引用的还有两个尚未创建的视图：ListTodo和DetailTodo。

但是，路由已完成。空字符串’'处将有所有待办事项的列表，其他api/上的单词。每个待办事项都将在其主键上可用，这是一个值Django会在每个数据库表中自动设置。第一个条目是1，第二个条目是2，依此类推。

因此，我们的第一个待办事项最终将位于API端点api/1/

现在，我们需要将模型中的数据转换为JSON，在URL上输出。

因此，我们需要一个序列化器restful框架有强大的内建序列化类 serializers

# todos/serializers.py
	from rest_framework import serializers
	from .models import Todo
	class TodoSerializer(serializers.ModelSerializer):
		class Meta:
			model = Todo
			fields = ('id', 'title', 'body',)

我们正在指定要使用的模型以及具体的我们要公开的字段。请记住，id是由Django自动创建的。

因此我们没有必须在我们的Todo模型中定义它，但是我们将在细节视图中使用它。

• Views

views.py 在 django中 是将数据发送到 templates，在rest框架中 其值将被发送到序列化操作类中。

Django REST Framework视图的语法故意与常规Django视图非常相似就像常规Django一样，Django REST Framework附带了通用视图以供通用案件。这就是我们在这里使用的。

我们将使用两个视图来展示数据 ListAPIView 显示所有的 todos ，
RetrieveAPIView显示单个实例

这里有重复每个视图的queryset和serializer_class的代码，即使扩展的通用视图是不同的。
在 后面，我们将学习解决该问题的视图集和路由器，并允许我们使用更少的代码来创建相同的API视图和URL

下一节解决，跨域调用api的资源共享。

4.3 跨域资源共享 CORS Cross-Origin Resource Sharing

当用户从不同站点或 同一个站点的不同位置访问时，需要配置此项。否则造成访问错误。
比如mysite.com vs yousite.cn, 或者 localhost:2000 vs localhost:3000

启用配置：
使用django-rest-framwork 中间件 django-cors-headers
1.在全局配置文件中添加相关配置即可。

config/settings.py

添加corsheaders 到 INSTALLED_APPS

在MIDDLEWARE的CommonMiddleWare上方添加CorsMiddleware
这个位置很重要，因为加载是从上到下加载

2，创建白名单：

CORS_ORIGIN_WHITELIST = ( 
    'http://192.168.3.12:3000',
    'http://localhost:8000',)

5 小结

从传统Django需要的唯一组件是models.py文件，urls.py路由。 views.py和serializers.py文件完全是Django REST Framework

重要的是 通过配置 CORS headers 白名单只允许两个域访问我们的api，这是新手最简单重要的方式。
然后添加一点Django REST Framework的序列化器和视图提供的魔力。