序
本篇文章主要是以django作为后端框架，将前端框架react集成进来，形成一种新型的WEB网站搭建模式。文章中仅贴出一些核心代码或模块名称，完整代码请见github
基础环境概述
连接外网：需要连接外网，方便pip和npm安装依赖软件包
python版本anaconda 4.3.1：Anaconda可以认为是一个python的发行版本，提供了版本管理和包管理的功能，并且已经预装了许多第三方软件包：如pip、zmq、numpy、pandas等。
django版本1.11.1：用anaconda会安装最新的版本的django，如果是django1.10之前的版本，可能在url配置上略有差异。
djangorestframework制作restfulapi：django中实现restfulapi的一个框架。
django-cors-headers解决跨域问题：CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
npm概述：NPM是随同NodeJS一起安装的包管理工具，react需要使用。
React 概述：三大优秀前端框架之一（Angularjs,React,Vue），起源于Facebook。
配置环境变量：在~/.bashrc中添加一句export CLUSTER=dev 项目发布会有用，本篇里用不到。
无数据库使用
具体实现方式
django部分
Django作为一站式的WEB框架，这里主要用到路由功能，template模板和static静态文件舍弃不用（前端框架react负责这部分工作），将Django退化为一个纯提供restful功能接口的工具。
创建项目和app
django-admin.py startproject django_react
django-admin.py startapp apis
urls.py中添加3个路由规则，前两个是网站的首页，第三个是restful的地址
urlpatterns = [
url('^$', views.react),
url('^index/$, views.react),
url('^index/rest_api/', include('apis.rest_api.urls')),
]
settings里常规配置，配好templates路径和static路径即可
安装djangorestframework，并将其注册到settings.py的INSTALLED_APPS里
pip install djangorestframework
INSTALLED_APPS = [
...
'rest_framework',
...
]
在apis/目录下创建rest_api目录，restful接口功能在这个目录下实现。djangorestframework提供了一种基于类来写api视图的方法，使用这种方式能够更清晰的分隔不同HTTP方法。这里不多说djangorestframework，代码如下。
django_react/apis/rest_api/urls.py
from django.conf.urls import url
from django.conf.urls import include
from rest_framework import routers
from apis.rest_api import views
#debug_router = routers.DefaultRouter()
#debug_router.register(r'debug', views.BasedClassView, base_name='debug')
urlpatterns = [
url(r'^debug/', views.ClassBasedView.as_view(), name='debug'),
]
django_react/apis/rest_api/views.py
from django.shortcuts import render_to_response
from django.http import HttpResponse
from rest_framework.views import APIView
class ClassBasedView(APIView):
def get(self, request):
html = 'I am ClassBasedview get func.'
return HttpResponse(html)
def post(self, request):
title = 'I am ClassBasedview post func.'
param1 = request.POST.get('mychoice')
html = title + " mychoice is: " + str(param1)
return HttpResponse(html)
接下来解决跨域访问的问题，django-cors-headers能够为我们解决此问题
pip install django-cors-headers
使用时很方便，在settings里增加配置项即可。
INSTALLED_APPS = [
...
'corsheaders'，
...
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware', #顺序不能错
...
]
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'*',
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = (
'accept',
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
'X-Custom-Header',
)
启动django并测试功能
python manage.py runserver 0.0.0.0:8080
测试get请求 curl http://0.0.0.0:8080/index/rest_api/debug/
测试post请求 curl -d "mychoice=1" http://172.20.180.22:8080/index/rest_api/debug/
至此，django部分完成。
react部分
在django目录下创建一个frontend目录，所有react代码将在这个目录下实现，现在，你可以认为你在写一个完整的新项目了，和之前的django无关
创建app：
首先执行create-react-app my-app创建一个app（很慢）
如果没有这条命令，执行npm install -g create-react-app
在my-app/src下创建目录components，在components中创建一个button并添加进App.js中
具体代码参考github中，文章里不再贴出，最终src目录如下图：
安装react需要的依赖包，会根据package.json里的内容安装（也很慢），然后启动服务
npm install
npm start
默认端口为3000，顺利启动后登录网站能看到2个按钮，分别点击GET和POST，能够成功的从django后台拿到数据，react部分完成。
如何结合
此时，我们已经做好了两个应用程序，后端的django和前端的react，现在要将react的代码集成到django框架中。
刚才在执行npm start的时候，会有段提示信息，其中有句话是：To create a production build, use npm run build.那么我们根据提示执行npm run build，将react前端的代码进行编译打包（比较慢），会得到一个名叫build的目录，将build目录的内容全部cp到django的templates/react目录里，再将templates/react/static目录放到django的static目录里，最后的目录结构如下图所示：
这时候，再启动django，通过django的路由就能够访问到templates/react/index.html这个带有两个button的页面了。
github地址
https://github.com/dsgdtc/django_react
结束语
1、特别感谢一位FE同事在React上给了我很多帮助。
2、django + react使用起来能够做到完全的前后端分离，好处自不用说。缺点有两个，一是你得学习一套前端框架，学习成本略高，如果只有一个人开发的话，会有一种左右手互搏的感觉；二是每次前端做修改后都需要重新编译，然后替换templates和static的文件，并且编译后的文件无法阅读。
3、项目里并没有打包测试发布部署等CI内容，仅仅是裸代码而已，CI内容会再开篇文章单独介绍。
