django+react一种新型强大的WEB应用程序

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容