djang vue 搭建一體化前後端分離專案

4. 前後端的結合

專案實現資料的收錄以及統計，pdf的生成。以及新聞的展示。

專案採用語言為python3.6，django==2.0.5，djangorestframework==3.8.2。所用第三方包如下

本專案用pycharm新建乙個django專案，安裝所需包之後，除自己所需的專案檔案之外，專案目錄如圖所示：

本機需安裝node.js>=10.4.1 npm>=6.1，所需安裝教程，自行搜尋。

3.1 使用vue-cli建立乙個vuejs專案作為專案前端

進入專案檔案輸出命令

vue-init webpack frontend

專案分為兩大模組，

4.1 前端構建

將前後端需求完成後首先進入前端：

cd frontend npm install npm run build

構建完成會生成乙個資料夾名字叫dist，裡面有乙個 index.html 和乙個資料夾static 。

4.2 使用django的通用檢視templateview

找到專案根 urls.py (即ulb_manager/urls.py)，使用通用檢視建立最簡單的模板控制器，訪問『/』時直接返回 index.html

urlpatterns = [
# path(r'^', include(rounter.urls)),
path('', templateview.as_view(template_name='index.html')),
path('admin/', admin.site.urls),]
urlpatterns += static(settings.media_url, document_root=settings.media_root)

4.3 配置django專案的模板搜尋路徑

在settings裡面設定django找到vue專案裡的index.html，找到templates配置項，修改如下:

templates = [,},
]

注意這裡的 frontend 是vuejs專案目錄，dist則是執行 npm run build 構建出的index.html與靜態資料夾 static 的父級目錄

這時啟動django專案，訪問 / 則可以訪問index.html，但是還有問題，靜態檔案都是404錯誤，下一步我們解決這個問題

4.4 配置靜態檔案搜尋路徑

static_url = '/static/'
staticfiles_dirs = [
os.path.join(base_dir, "frontend/dist/static"),
]static_root = os.path.join(base_dir, 'static')
media_url = '/media/'
media_root = os.path.join(base_dir, 'media')

這樣django不僅可以將/ulb 對映到index.html，而且還可以順利找到靜態檔案

此時訪問 /ulb 我們可以看到使用django作為後端的vuejs helloworld

4.5 開發環境

每次部署需要將vue編譯即

npm run build

單獨執行vue專案時，需解決django的跨域問題，有兩種方法解決，一種是在vuejs層上做**（proxytable），另一種是在django層注入header，這裡我使用後者，用django的第三方包 django-cors-headers 來解決跨域問題

安裝pip install django-cors-headers

配置（兩步）

settings.py 修改

middleware = [ 'django.middleware.security.securitymiddleware', 'django.contrib.sessions.middleware.sessionmiddleware', 'corsheaders.middleware.corsmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware',

]

這裡要注意中介軟體載入順序，列表是有序的哦

settings.py 新增

cors_origin_allow_all = true

至此開發環境已經完成。

djang vue 搭建一體化前後端分離專案

前向一體化後向一體化縱向一體化的含義

企業如何搭建一體化資料整合平台？

狀態列一體化

djang vue 搭建一體化前後端分離專案

前向一體化 後向一體化 縱向一體化的含義

企業如何搭建一體化資料整合平台？

狀態列一體化

相關推薦

前向一體化後向一體化縱向一體化的含義