使用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框架考虑的问题要深一步，因为我们程序员大都在写控制层的程序。现在这个工作交给了框架，仅需写很少的调用代码，大大提高了工作效率。

更多的Django介绍及文档请参见官方：https://www.Djangoproject.com/

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，能够将前端文件进行打包、压缩、混淆等操作的工具，具体可查看官网：http://webpack.github.io/

利用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写在webpack.base.config.js中，包括前端入口、使用插件、打包原则等等，具体可查看webpack官网。

为了让我们每次运行webpack指令后生成的文件能够直接被html文件引用，就要在html中添加如下代码

{% load staticfiles %}

{% load render_bundle from webpack_loader %}

<!doctype html>

<head>

</head>

<body>

</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框架上加入自己的前端架构了。

posted on 2016-07-26 14:45 markrui 阅读(1073) 评论(0) 收藏举报