創(chuàng)建時(shí)間：20161223
本章小目標(biāo)
- 創(chuàng)建django項(xiàng)目
- 在django中使用react頁面
- 實(shí)現(xiàn)django和react的開發(fā)，編譯，提交自動(dòng)化對(duì)接
1 創(chuàng)建django項(xiàng)目
django的項(xiàng)目創(chuàng)建，網(wǎng)上有很多基礎(chǔ)教程，此處不再贅述。創(chuàng)建完成后，項(xiàng)目目錄結(jié)構(gòu)如下，我是用pycharm IDE直接操作的：
此時(shí)可以運(yùn)行django服務(wù)，應(yīng)該可以看到一個(gè)標(biāo)準(zhǔn)網(wǎng)頁頁面。
2 在django中使用react頁面
2.1 首先做一個(gè)訪問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), #默認(rèn)訪問地址入口
]
2.2 增加模板渲染方法
代碼文件：./weui_app/views.py
from django.shortcuts import render
# Create your views here.
def render_html(request):
return render(request, 'index.html') #很簡(jiǎn)單，返回一個(gè)html頁面
2.3 安置react編譯好的html，js等文件
在第1回中，已經(jīng)編譯生成好了4個(gè)文件，再回顧一下：
$ 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頁面默認(rèn)是去templates下尋找的，所以把html頁面直接拷貝到./templates
2.3.2 靜態(tài)資源js，css安置
django的靜態(tài)文件路徑，是通過settings文件來配置的。
編輯文件：./hi_weui/settings.py
STATIC_URL = '/static/' #在html頁面中可以用這個(gè)前綴找到靜態(tài)文件
STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static') #可搜集到一個(gè)目錄下，方便后續(xù)部署
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "common_static"), #公共靜態(tài)文件目錄，可以被搜集到上面的STATIC_ROOT下
)
將4個(gè)文件中剩下的js，css都拷貝到./common_static 目錄下。
2.3.3 讓html找到對(duì)應(yīng)的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>
現(xiàn)在目錄結(jié)構(gòu)變成這樣了：
運(yùn)行一下django服務(wù)，訪問：http://127.0.0.1:8000/
可以看到和第1回一樣的頁面。
3. 實(shí)現(xiàn)django下react的開發(fā)，編譯，運(yùn)行自動(dòng)化
前面只是把react的編譯結(jié)果文件手工拿過來，并實(shí)現(xiàn)了用django的方式訪問。這就說明，用react來做前端，并享有django強(qiáng)大的后臺(tái)能力是可行的。
接下來的內(nèi)容主要是為了讓django的開發(fā)更便捷一點(diǎn)。
3.1 在django項(xiàng)目中編寫react代碼
這個(gè)需求是顯而易見，哪怕是前后端分離，但還都是屬于同一個(gè)項(xiàng)目，所以放到一起，統(tǒng)一管理是必要的。
所以在項(xiàng)目根目錄下創(chuàng)建一個(gè)react目錄，并把hi_weui的react源碼挪進(jìn)來。
3.2 編譯與提交自動(dòng)化
思路如下：
Django項(xiàng)目中編輯代碼-》在react腳手架下完成編譯-》編譯結(jié)果派發(fā)到Django項(xiàng)目目錄-》啟動(dòng)運(yùn)行Django
這里說的自動(dòng)化其實(shí)就是針對(duì)上面這個(gè)過程，避免每次重復(fù)手工操作，通過執(zhí)行腳本來完成。
3.2.1 創(chuàng)建./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項(xiàng)目下寫react代碼，寫完后執(zhí)行腳本就可以進(jìn)行編譯了。
3.2.2 修改腳手架中的webpack.config.hi_weui.js配置文件
默認(rèn)情況下，打包的html文件中js和css路徑都是當(dāng)前路徑，需要按照django的靜態(tài)資源路徑要求進(jìn)行修改：
< filename: '/static/hi_weui.js'
< new ExtractTextPlugin('/static/weui.min.css'),
< new webpack.optimize.CommonsChunkPlugin('vendor', '/static/vendor.bundle.js'),
3.2.3 進(jìn)一步簡(jiǎn)化為“啟”和“?！?/h3>
更符合習(xí)慣的方式應(yīng)該是：寫代碼-》啟動(dòng)運(yùn)行。中間不應(yīng)該過多的人工操作。
所以再寫一個(gè)啟動(dòng)腳本start.sh，把中間所有的細(xì)節(jié)都屏蔽掉
啟動(dòng)腳本：
$ 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 測(cè)試一下效果
4.1 在django項(xiàng)目中修改代碼
修改按鈕顯示的內(nèi)容
4.2 執(zhí)行啟動(dòng)腳本啟動(dòng)服務(wù)
$ bash start.sh react
4.3 瀏覽器打開頁面訪問
訪問地址：http://127.0.0.1:8088/
可以看到react已經(jīng)集成到django中了，并且開發(fā)-》編譯-》運(yùn)行非常簡(jiǎn)單。
下一回預(yù)告：
在nginx中部署這個(gè)項(xiàng)目
