序

本篇文章主要是以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内容会再开篇文章单独介绍。