第2回-在Django中集成react项目
创建时间：20161223
本章小目标
- 创建django项目
- 在django中使用react页面
- 实现django和react的开发，编译，提交自动化对接
1 创建django项目
django的项目创建，网上有很多基础教程，此处不再赘述。创建完成后，项目目录结构如下，我是用pycharm IDE直接操作的：
image.png
此时可以运行django服务，应该可以看到一个标准网页页面。
2 在django中使用react页面
2.1 首先做一个访问url入口
在./hi_weui/urls.py中修改代码如下：
from django.conf.urls import url
from django.contrib import admin
from weui_app.views import render_html #新增模板渲染方法
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', render_html), #默认访问地址入口
]
2.2 增加模板渲染方法
代码文件：./weui_app/views.py
from django.shortcuts import render
# Create your views here.
def render_html(request):
return render(request, 'index.html') #很简单，返回一个html页面
2.3 安置react编译好的html，js等文件
在第1回中，已经编译生成好了4个文件，再回顾一下：
$ tree dist_hi_weui
dist_hi_weui
├── bundle.js
├── index.html
├── vendor.bundle.js
└── weui.min.css
0 directories, 4 files
2.3.1 html安置
django的html页面默认是去templates下寻找的，所以把html页面直接拷贝到./templates
2.3.2 静态资源js，css安置
django的静态文件路径，是通过settings文件来配置的。
编辑文件：./hi_weui/settings.py
STATIC_URL = '/static/' #在html页面中可以用这个前缀找到静态文件
STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static') #可搜集到一个目录下，方便后续部署
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "common_static"), #公共静态文件目录，可以被搜集到上面的STATIC_ROOT下
)
将4个文件中剩下的js，css都拷贝到./common_static 目录下。
2.3.3 让html找到对应的js，css
编辑html文件，修改文件路径为/static/*,如下：
<link href="/static/weui.min.css" rel="stylesheet"></head>
<script type="text/javascript" src="/static/vendor.bundle.js"></script>
<script type="text/javascript" src="/static/bundle.js"></script></body>
现在目录结构变成这样了：
image.png
运行一下django服务，访问：http://127.0.0.1:8000/
可以看到和第1回一样的页面。
3. 实现django下react的开发，编译，运行自动化
前面只是把react的编译结果文件手工拿过来，并实现了用django的方式访问。这就说明，用react来做前端，并享有django强大的后台能力是可行的。
接下来的内容主要是为了让django的开发更便捷一点。
3.1 在django项目中编写react代码
这个需求是显而易见，哪怕是前后端分离，但还都是属于同一个项目，所以放到一起，统一管理是必要的。
所以在项目根目录下创建一个react目录，并把hi_weui的react源码挪进来。
image.png
3.2 编译与提交自动化
思路如下：
Django项目中编辑代码-》在react脚手架下完成编译-》编译结果派发到Django项目目录-》启动运行Django
这里说的自动化其实就是针对上面这个过程，避免每次重复手工操作，通过执行脚本来完成。
3.2.1 创建./react/build2django.sh 如下：
$ cat react/build2django.sh
########################
react_kit_dir=/home/bit/git_app/react-weui
django_pro_dir=/home/bit/coding_app/hi_weui
pro_name=hi_weui
dist_dir=dist_$pro_name
########################
cp -rf $django_pro_dir/react/* $react_kit_dir/
cd $react_kit_dir/
cnpm run build:$pro_name
cp -f $dist_dir/*html $django_pro_dir/templates
cp -f $dist_dir/static/* $django_pro_dir/common_static
于是就可以在django项目下写react代码，写完后执行脚本就可以进行编译了。
3.2.2 修改脚手架中的webpack.config.hi_weui.js配置文件
默认情况下，打包的html文件中js和css路径都是当前路径，需要按照django的静态资源路径要求进行修改：
< filename: '/static/hi_weui.js'
< new ExtractTextPlugin('/static/weui.min.css'),
< new webpack.optimize.CommonsChunkPlugin('vendor', '/static/vendor.bundle.js'),
3.2.3 进一步简化为“启”和“停”
更符合习惯的方式应该是：写代码-》启动运行。中间不应该过多的人工操作。
所以再写一个启动脚本start.sh，把中间所有的细节都屏蔽掉
启动脚本：
$ cat start.sh
build_flag=$1
base_dir=`pwd`
today=`date +"%Y%m%d"`
echo ">>>stop if is running..."
bash ./stop.sh
if [ $build_flag = "react" ] ;then
echo ">>>build react codes..."
bash ./react/build2django.sh
fi
echo ">>>start django..."
python ./manage.py makemigrations
python ./manage.py migrate
python manage.py collectstatic --noinput
#python manage.py check_permissions
python ./manage.py runserver localhost:8088 >> ./server_${today}.log 2>&1 &
停止脚本：
$ cat stop.sh
user=`whoami`
echo `ps -fu ${user}| grep "manage.py runserver" | grep 8088 `
kill -9 `ps -fu ${user} | grep "manage.py runserver" | grep 8088 | awk '{print $2}'`
4 测试一下效果
4.1 在django项目中修改代码
image.png
修改按钮显示的内容
4.2 执行启动脚本启动服务
$ bash start.sh react
4.3 浏览器打开页面访问
访问地址：http://127.0.0.1:8088/
image.png
可以看到react已经集成到django中了，并且开发-》编译-》运行非常简单。
下一回预告：
在nginx中部署这个项目
