教你如何使用 django + vuejs 快速構(gòu)建項(xiàng)目

1、教你如何使用 Django+Vue.js 快速構(gòu)建項(xiàng)目本篇手把手教你如何快速而優(yōu)雅的構(gòu)建前后端分離的項(xiàng)目，想直接上手請上滑 目錄DjangoVueJS？ 二、DjangoVueJSDjangoDjangoAppVueJSWebpackDjangoDjango開發(fā)環(huán)境生產(chǎn)環(huán)境（UCloud）我為什么要選擇 Django 與 VueJS？ 首先介紹一下我看重的點(diǎn)：Django(MVC 框 架 )- TheWebframeworkforperfectionistswithdeadlines-Python-ORM-簡單、清晰的配置-AdminappDjangoPython(SaltStackAnsib

2、le)，數(shù)據(jù)分析(Pandas)，任務(wù)隊(duì)列(Celery)，RestfulAPI(DjangoRESTframework)，HTTP 請求(requests)，再加上高度抽象的ORM，功能強(qiáng)大的QueryExpressions，簡單清晰的配置。著重提一下堪稱神器的自帶AppAdmin，有了它你再也不用將一些經(jīng)常變化的配置寫在文ORM生成的 API 來做到定制化的更新，比如直接讀某個 wiki 上的配置，自動的寫入數(shù)據(jù)庫，偽代碼如下：importpandasaspd/ settings=clean(settings) update(settings)個gitlabREADME或者某個redmin

3、ewiki)還可以使用 django-celery 的 celery-beat 按 Interval/crontab 的方式扔更新配置的任務(wù)到celeryDjangoAdmin)-Vue.js-數(shù)據(jù)雙向綁定-單文件組件-清晰的生命周期-學(xué)習(xí)曲線平滑-vue-cli前端是我的弱項(xiàng)，我需要一個MVVM 框架來提升交互和節(jié)約時(shí)間，在試過AngularJS， 之后我選擇了因?yàn)槲矣X得寫VueJS代碼的感覺非常接近寫Python。著重提一下單文件組件：特別清晰，一個文件包含且僅包含三塊： 1.前端渲染的模板2.專為此模板寫渲染邏輯的 3.專為此模板寫樣式的這樣可以達(dá)到什么效果呢？一個文件一個組件，每個組件

4、有它自己的邏輯與樣式，你不用關(guān)心什么 local 什么 global，CSS 樣式加載先后、覆蓋問題，因?yàn)樗情]包的，而且自給自足。當(dāng)然組件之間也是可以通信的，舉個例子，我有一個組件叫ListULB，使用表格展示了我擁有的所有 ULB(負(fù)載均衡)，ListULB 做了一件事，從 API 獲取 ULB 對象列表并 for 循環(huán)展現(xiàn)出來， ListULBAPI。ULB的寫法是將在 AddVServer 組件創(chuàng)建的時(shí)候，將 ULB 對象傳給 AddVServer 組件，這樣AddVServer 組件拿到這個對象，就可以直接根據(jù)對象的ID 等，創(chuàng)建出當(dāng)前行的ULB 的VServer 了，偽代碼如下：

5、for*ulb_object*inulbs_list:ulb_ulb_object.id注意雙星號包著的對象，在 ListULB 組件里面是每行的 ULB，傳給 AddServer 組件之后，變成了 current_ulb 對象，拿到 id 為 current_ulb.id 盡情的為它創(chuàng)建 VServer 吧。如果我要為指定 VServer 創(chuàng)建 RServer 呢，一樣的。動前端組件，棒嗎？誰不喜歡優(yōu)雅的代碼呢，Datadriveeverything多么的省腦細(xì)胞。 DjangoVueJSDjango 與 VueJS 是如何結(jié)合起來？首先我選擇了 VueJS 的前端渲染，自然放棄了 Djan

6、go 的后端模板引擎渲染。o（其實(shí)也就是前后端分離必要的條件。DjangoController(URLconf)來實(shí)現(xiàn)前端路由的父級路由，可以達(dá)到不同頁面使用不同的前端框架，頁面內(nèi)部使用各自獨(dú)有的前端路由的效果，萬一老大給你配了前端呢， ReactJS保留了Django的Model，前面說了Django的ORM太好用了，而且可以配合DjangoAdmin。所以綜合來說就是：M(Django)+C(Django)+MVVM(VueJS)=M+MVVM+C=MMVVMC（為了容易理解，并沒有使用 Django 自稱的 MTV 模式理解，感興趣看看我畫的圖）如:*changed*。DevOps，MV

7、C不能滿足我們了，所以我選擇這樣構(gòu)建項(xiàng)目，代碼塊中的修改都會用爽星號括起來，比如:*changed*。本文為了精簡篇幅，默認(rèn)您已經(jīng)安裝了必要的命令行界面（CLI），比如 vue-cli 等。實(shí)際操作創(chuàng)建Django項(xiàng)目命令：django-adminstartprojectulb_manager結(jié)構(gòu)：manage.pyulb_manager init .pysettings.pyurls.pywsgi.py進(jìn)入項(xiàng)目根目錄，創(chuàng)建一個app 命令：cdulb_managerpythonmanage.pystartappbackend即：app 名叫做backend結(jié)構(gòu)：backend init .p

8、yadmin.pymigrations init .pymodels.pytests.pyviews.pymanage.pyulb_manager init .pysettings.pyurls.pywsgi.pyvue-clivuejsvue-initwebpackfrontend即：項(xiàng)目名叫 frontend結(jié)構(gòu)：backend init .pyadmin.pymigrations init .pymodels.pytests.pyviews.pyfrontendREADME.mdbuild.configdev.env.jsindex.jsprod.env.jstest.env.jsind

9、ex.htmlpackage.jsonsrcApp.vueassetslogo.pngcomponentsHello.vuemain.jsstatictest.manage.pyulb_manager init .pysettings.pyurls.pywsgi.py結(jié)構(gòu)總結(jié)可以看到項(xiàng)目根目錄有兩個新文件夾，一個叫 backend，一個叫 frontend，分別是：backendDjango 的一個 appfrontendVuejs 項(xiàng)目webpackVusJS命令：cdfrontend npminstall npmrunbuild 結(jié)構(gòu)：命令：我引入了一些包，比如 element-ui 等，

10、你的 static 里面的內(nèi)容會不同，沒關(guān)系 index.html和 static 文件夾相同就夠了。distindex.htmlstaticcssapp.42b821a6fd065652cb86e2af5bf3b5d2.cssapp.42b821a6fd065652cb86e2af5bf3b5d2.css.mapfontselement-icons.a61be9c.eotelement-icons.b02bdc1.ttfimgelement-icons.09162bc.svgjs0.8750b01fa7ffd70f7ba6.jsvendor.804853a3a7c622c4cb5b.jsve

11、ndor.804853a3a7c622c4cb5b.js.map構(gòu)建完成會生成一個文件夾名字叫 dist，里面有一個 index.html 和一個文件夾 static。DjangoTemplateView找到項(xiàng)目根 urls.py(即 ulb_manager/urls.py)，使用通用視圖創(chuàng)建比較簡單的模板控制器，訪問/時(shí)直接返回 index.html。urlpatterns=url(radmin/,admin.site.urls),*url(r$,TemplateView.as_view(template_name=index.html),* url(rapi/,include(backen

12、d.urls,namespace=api)Django上一步使用了Django的模板系統(tǒng)，所以需要配置一下模板使Django知道從哪里找到index.html，打開 settings.py(ulb_manager/settings.py)，找到 TEMPLATES 配置項(xiàng)，修改如下:TEMPLATES=BACKEND:django.template.backends.django.DjangoTemplates, #DIRS:,*DIRS:frontend/dist*, APP_DIRS:True, OPTIONS:context_processors: django.template.con

13、text_processors.debug, django.template.context_processors.request, django.contrib.auth.context_processors.auth, django.contrib.messages.context_processors.messages,注意這里的 frontend 是 VueJS 項(xiàng)目目錄，dist 則是運(yùn)行 npmrunbuild 構(gòu)建出的 index.html與靜態(tài)文件夾 static 的父級目錄。這時(shí)啟動 Django 項(xiàng)目，訪問/則可以訪問 index.html，但是還有問題，靜態(tài)文件都是 40

14、4 錯誤，下一步我們解決這個問題。配置靜態(tài)文件搜索路徑打開 settings.py(ulb_manager/settings.py)，找到 STATICFILES_DIRS 配置項(xiàng)，配置如下:#Addforvuejs STATICFILES_DIRS=os.path.join(BASE_DIR,frontend/dist/static),這樣oblDjangoVueJShelloworld。開發(fā)環(huán)境因?yàn)槲覀兪褂昧?Django 作為后端，每次修改了前端之后都要重新構(gòu)建（你可以理解為不編譯不能運(yùn)行），除了使用 Django 作為后端，我們還可以在 dist 目錄下面運(yùn)行以下命令來看效果：hs(即

15、:httpserver)但是問題依然沒有解決，我想過檢測文件變化來自動構(gòu)建，但是構(gòu)建是秒級的，太慢了，所以我但是問題依然沒有解決，我想過檢測文件變化來自動構(gòu)建，但是構(gòu)建是秒級的，太慢了，所以我VueJSnpmrundev:VueJSDjangoDjango出現(xiàn)了跨域問題，有兩種方法解決，一種是在 VueJS 層上做轉(zhuǎn)發(fā)（proxyTable），另一種是Djangoheader，Djangodjango-cors-headers 來解決跨域問題。安裝pipinstalldjango-cors-headers配 置 （ 兩 步 ） 1.settings.py 修改MIDDLEWARE=django

16、.middleware.security.SecurityMiddleware,django.contrib.sessions.middleware.SessionMiddleware,*corsheaders.middleware.CorsMiddleware,* mon.CommonMiddleware, django.middleware.csrf.CsrfViewMiddleware, django.contrib.auth.middleware.AuthenticationMiddleware, django.contrib.messages.middleware.MessageMi

17、ddleware, django.middleware.clickjacking.XFrameOptionsMiddleware,這里要注意中間件加載順序，列表是有序的哦。2.settings.py 添加CORS_ORIGIN_ALLOW_ALL=True至此，我的開發(fā)環(huán)境就搭建完成了。生產(chǎn)環(huán)境部署（UCloud）接下來我們嘗試將項(xiàng)目部署到 UCloud 云主機(jī)上，主機(jī)管理列表，如下所示：*這里注意記住你的外網(wǎng) IP，下面的 IP 替換成你的*環(huán)境搭建與部署登錄主機(jī)，用你剛填寫的密碼： HYPERLINK mailto:sshroot120.132 sshroot120.132.*.75Cen

18、tOS 系統(tǒng)可以使用 yum 安裝必要的包#如果你使用 git 來托管代碼的話yuminstallgit#如果你要在服務(wù)器上構(gòu)建前端yuminstallnodejs yuminstallnpm yuminstallnginx我們使用 uwsgi 來處理 Django 請求，使用 nginx 處理 static 文件（即之前 build 之后 dist 里面的 static，這里默認(rèn)前端已經(jīng)打包好了，如果在服務(wù)端打包前端需要安裝 nodejs，npm 等）。安 裝 uWsgi yuminstalluwsgi #或者pipinstalluwsgi我們使用配置文件啟動 uwsgi，比較清楚。uwsg

19、i 配 置 文 件 ： uwsgi socket=:9292 stats=:9293workers=4 #項(xiàng)目根目錄chdir=/opt/inner_ulb_managertouch-reload=/opt/inner_ulb_manager py-auto-reload=1#在項(xiàng)目跟目錄和項(xiàng)目同名的文件夾里面的一個文件module=inner_ulb_manager.wsgi pidfile=/var/run/inner_ulb_manager.pid daemonize=/var/log/inner_ulb_manager.lognginx 配置文件：server listen8888;s

20、erver_name120.132.*.75; root/opt/inner_ulb_manager; access_log/var/log/nginx/access_narwhals.log; error_log/var/log/nginx/error_narwhals.log; location/uwsgi_pass:9292; include/etc/nginx/uwsgi_params;location/static/ root/opt/inner_ulb_manager/; access_logoff;location/admin/ uwsgi_pass:9292;include/e

21、tc/nginx/uwsgi_params;/opt/inner_ulb_manager/static即為靜態(tài)文件目錄， 那么現(xiàn)在我們靜態(tài)文件還在frontend/dist 怎么辦，不怕，Django 給我們提供了命令： 先 去 settings 里 面 配 置 ： STATIC_ROOT=os.path.join(BASE_DIR,static)然后在存在 manage.py 的目錄，即項(xiàng)目跟目錄執(zhí)行：pythonmanage.pycollectstatic這樣 frontend/dist/static 里面的東西就到了項(xiàng)目根目錄的 static 文件夾里面了。dist/staticDjangoApp： admin 也有一些