使⽤Django和React构建前后端分离的web应⽤
1．Django简介
Django是基于pyton语⾔的⼀个⽐较全⾯的框架，同样是mvc的架构模式，Django更关注于模型（Model）、模板(Template)和视图（Views），称为 MTV模式。各⾃职责如下：
层次职责
模型（Model），即数据存取层处理与数据相关的所有事务：如何存取、如何
验证有效性、包含哪些⾏为以及数据之间的关
系等。
视图（View），即表现层处理与表现相关的决定：如何在页⾯或其他类
型⽂档中进⾏显⽰。
模型与模板的桥梁。
模板(Template)，即业务逻辑层存取模型及调取恰当模板的相关逻辑。
从以上表述可以看出Django 视图不处理⽤户输⼊，⽽仅仅决定要展现哪些数据给⽤户，⽽Django 模板仅仅决定如何展现Django视图指定的数据。或者说, Django将MVC中的视图进⼀步分解为 Django视图和 Django模板两个部分，分别决定 “展现哪些数据” 和 “如何展现”，使得Django的模板可以根据需要随时替换，⽽不仅仅限制于内置的模板。⾄于MVC控制器部分，由Django框架的URLconf来实现。URLconf机制是使⽤正则表达式匹配URL，然后调⽤合适的Python函数。URLconf对于URL的规则没有任何限制，你完全可以设计成任意的URL风格，不管是传统的，RESTful的，或者是另类的。框架把控制层给封装了，⽆⾮与数据交互这层都是数据库表的读，写，删除，更新的操作.在写程序的时候，只要调⽤相应的⽅法就⾏了，感觉很⽅便。程序员把控制层东西交给Django⾃动完成了。只需要编写⾮常少的代码完成很多的事情。所以，它⽐MVC框架考虑的问题要深⼀步，因为我们程序员⼤都在写控制层的程序。现在这个⼯作交给了框架，仅需写很少的调⽤代码，⼤⼤提⾼了⼯作效率。
2. React简介
React作为Facebook和Instagram的前端利器，从⼀诞⽣就引发了重⼤关注，其思想在于将前端组件化，通过组件相互包含和组合的关系构成整个document。
React不是⼀个MVC架构的框架，或许仅仅对应MVC中的V试图层。React 都是关于构建可复⽤的组件。事实上，通过 React 你唯⼀要做的事情就是构建组件。得益于其良好的封装性，组件使代码复⽤、测试和关注分离（separation of concerns）更加简单。
⽬前React中⽂⽂档已经⽐较成熟，但是由于官⽅更新太快，⽹上查到的经常是之前各种版本的教程。不过只要理解了React的思想，对于使⽤不同的版本，就是配置的不同了。
3. Django与React相结合
之前提到的Django是MVC架构的，那么说明Django对于视图层是有⾃⼰的定义的，那么要将React加⼊到Django中，着实需要配置⼀些东西。
到现在为⽌，我们假设已经安装好了Django（教程随处可见），并能启动项⽬。下⾯我们逐渐加⼊前端的架构。
利⽤webpack对于Django的⼀个⼯具，我们就可以实现我们想要的加⼊我们⾃⼰的前端框架。⾸先，需要使⽤pip安装django-webpack-loader，
pip install django-webpack-loader，然后在setting.py中加⼊
INSTALLED_APPS = [
...
'webpack_loader',
]
就可以在项⽬中使⽤webpack-loader给我们带来的⽅便。
Webpack最后将所有资源⽂件打包，由于django对于前端侵⼊⽐较强嘛，所以只开放⼀个⽬录给前端公有访问，需要指定在setting.py中: STATIC_URL = '/static/' # change when production
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'app/static'), # change when production
]
主要指定django允许外界访问的资源⽬录。
然后我们编写webpack的config⽂件，将开发、部署、演⽰公⽤的config写在fig.js中，包括前端⼊⼝、使⽤插件、打包原则等等，具体可查看webpack官⽹。
为了让我们每次运⾏webpack指令后⽣成的⽂件能够直接被html⽂件引⽤，就要在html中添加如下代码
{% load staticfiles %}
{% load render_bundle from webpack_loader %}web前端的基本框架
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> </title>
</head>
<body>
<div id="app">
</div>
{% render_bundle 'vendors' %}
{% render_bundle 'app' %}
</body>
</html>
然后在setting.py中添加：
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/local/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-local.json'),
}
}
经过这样的配置，每次webpack⽣成的资源⽂件都可以⾃动被html⽂件加载。那么我们就可以在django框架上加⼊⾃⼰的前端架构了。