轉載： 我如何使用 Django + Vue.js 快速構建項目

原文連接： https://www.ctolib.com/topics-109796.html

正文引用以下

 

引言

大U的技術課堂 的新年第一課，祝你們新的一年好好學習，每天向上：）

本篇將手把手教你如何快速而優雅的構建 先後端分離的項目 ，想直接上手請日後翻！

目錄：

1. 我爲何要選擇Django與VueJS？
2. Django和VueJS是如何結合起來的？
3. 實操
   1. 建立 Django 項目
   2. 建立 Django App 作爲後端
   3. 建立 VueJS 項目做爲前端
   4. 使用 Webpack 處理前端代碼
   5. 配置 Django 模板的搜索路徑
   6. 配置 Django 靜態文件搜索路徑
   7. 開發環境
   8. 生產環境（部署到 UCloud）

正文：

我爲何要選擇Django與VueJS？

首先介紹一下我看重的點：

Django (MVC框架) - The Web framework for perfectionists with deadlines

• Python
• ORM
• 簡單、清晰的配置
• Admin app

Django 僅由於 Python 的血統，就已經站在了巨人的肩膀上，配置管理( SaltStack、Ansible )

，數據分析( Pandas )，任務隊列( Celery )，Restful API( Django REST framework )，HTTP請求( requests )，再加上高度抽象的ORM，功能強大的 Query Expressions，簡單清晰的配置，着重提一下堪稱神器的自帶App: Admin，有了它你不再用將一些常常變化的配置寫在文件裏面，每次增刪改都從新發布一次，你只須要定義出配置的 data scheme ，只須要幾行代碼，Django Admin便爲你提供美觀，並帶有權限控制的增刪改查界面，並且能夠經過ORM爲它生成的API來作到定製化的更新，好比直接讀某個wiki上的配置，自動的寫入數據庫，僞代碼以下：

import pandas as pd settings = pd.read_html('http://某個gitlab的README 或者 某個redmine wiki') settings = clean(settings) update(settings)

最後還可使用 django-celery 的 celery-beat 按 Interval/crontab 的方式扔更新配置的任務到 celery 隊列裏面，最最重要的是，這些均可以在Django Admin後臺直接配置哦，還不夠優雅？請聯繫我

VueJS (MVVM框架) - Vue.js

• 數據雙向綁定
• 單文件組件
• 清晰的生命週期
• 學習曲線平滑
• vue-cli

前端是DevOps的弱項，我須要一個 MVVM 框架來提高交互和節約時間，在試過 AngularJS ，ReactJS，VueJS以後我選擇了VueJS，由於我以爲寫 VueJS 代碼的感受最接近寫 Python

着重提一下單文件組件：

 特別清晰，一個文件包含且僅包含三塊

1. <template></template > 前端渲染的模板
2. 專爲此模板寫渲染邏輯的 <script></script>
3. 專爲此模板寫樣式的 <style></style>

這樣能夠達到什麼效果呢？一個文件一個組件，每一個組件有它本身的邏輯與樣式，你不用關心什麼 local 什麼 global ，CSS樣式加載前後、覆蓋問題，由於它是『閉包』的，並且『自給自足』，不知道這樣說好很差理解

固然組件之間也是能夠通訊的，舉個例子，我有一個組件叫 ListULB ，使用表格展現了我擁有的全部 ULB (負載均衡)，ListULB 作了一件事，從 API 獲取 ULB 對象列表並 for 循環展示出來， ListULB 能夠放到某個頁面裏，能夠放到彈框裏，放到模態框裏，任何地方均可以，由於這個組件對外交互的只有API

若是我如今要寫一個組件叫 AddVServer ，功能是能夠爲任意一個 ULB 對象添加VServer，個人寫法是將在 AddVServer 組件建立的時候，將 ULB 對象傳給 AddVServer 組件，這樣AddVServer 組件拿到這個對象，就能夠直接根據對象的ID等，建立出當前行的ULB的VServer了，僞代碼以下：

<ListULB>
  for **ulb_object** in ulbs_list: {{ ulb_object.name }} {{ ulb_object.id }} <AddVServer :current_ulb='**ulb_object**'></AddVServer> </ListULB>

注意雙星號包着的對象，在 ListULB 組件裏面是每行的ULB，傳給AddServer組件以後，變成了 current_ulb 對象，拿到id爲 current_ulb.id 盡情的爲它建立 VServer 吧

若是我要爲指定 VServer 建立 RServer 呢，同樣的

看出來了吧，進行開發以前，前端組件的結構與數據的結構對應起來能夠省好多時間，數據驅動前端組件，棒嗎？

誰不喜歡優雅的代碼呢， 『Data drive everything』 多麼的省腦細胞

以上就是我選擇Python與VueJS的緣由

Django與VueJS是如何結合起來？

• 首先我選擇了VueJS的前端渲染，天然放棄了Django的後端模板引擎渲染
• 而後業務邏輯放到了前端，放棄了Django的View（其實也就是先後端分離必要的條件）
• 保留了Django的 C ontroller (URLconf) 來實現前端路由的父級路由，能夠達到不一樣頁面使用不一樣的前端框架， 頁面內部使用各自獨有的前端路由的效果，萬一老大給你配了前端呢，萬一前端只想寫 ReactJS 呢
• 保留了Django的 Model ，前面說了Django的ORM太好用了，並且能夠配合Django Admin

因此綜合來講就是:

M(Django) + C(Django) + MVVM (VueJS) = M + MVVM + C = MMVVMC

（爲了容易理解，並無使用Django自稱的MTV模式理解，感興趣看看我畫的圖）

總結：做爲以改變世界爲己任的 DevOps ，MVC框架後端渲染的柔弱表現力與繁雜的交互已經不能知足咱們了，.....省略1000子.....，因此我選擇這樣構建項目，嗯...

好吧，也該開始了

代碼塊中的修改都會用爽星號括起來，好比: **changed**

本文爲了精簡篇幅，默認您已經安裝了必要的 命令行界面（CLI），好比 vue-cli等

1. 建立Django項目

命令：

django-admin startproject ulb_manager

結構：

.
├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py

2. 進入項目根目錄，建立一個 app 做爲項目後端

命令：

cd ulb_manager
python manage.py startapp backend

即：app 名叫作 backend

結構：

.
├── backend
│   ├── __init__.py │ ├── admin.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py ├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py

3. 使用vue-cli建立一個vuejs項目做爲項目前端

命令：

vue-init webpack frontend

即：項目名叫 frontend

結構：

.
├── backend
│   ├── __init__.py │ ├── admin.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py ├── frontend │ ├── README.md │ ├── build │ │ └── .... │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ ├── prod.env.js │ │ └── test.env.js │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── Hello.vue │ │ └── main.js │ ├── static │ └── test │ └── ... ├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py

結構總結：

能夠看到項目根目錄有兩個新文件夾，一個叫 backend ，一個叫 frontend，分別是：

• backend Django的一個app
• frontend Vuejs項目

4. 接下來咱們使用 webpack 打包Vusjs項目

命令：

cd frontend
npm install
npm run build

結構：

我引入了一些包，好比element-ui等，你的static裏面的內容會不一樣，不要緊 index.html 和 static 文件夾相同就夠了

dist
├── index.html └── static ├── css │ ├── app.42b821a6fd065652cb86e2af5bf3b5d2.css │ └── app.42b821a6fd065652cb86e2af5bf3b5d2.css.map ├── fonts │ ├── element-icons.a61be9c.eot │ └── element-icons.b02bdc1.ttf ├── img │ └── element-icons.09162bc.svg └── js ├── 0.8750b01fa7ffd70f7ba6.js ├── vendor.804853a3a7c622c4cb5b.js └── vendor.804853a3a7c622c4cb5b.js.map

構建完成會生成一個 文件夾名字叫dist，裏面有一個 index.html 和一個 文件夾static ，

5. 使用Django的通用視圖 TemplateView

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

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    **url(r'^$', TemplateView.as_view(template_name="index.html")),** url(r'^api/', include('backend.urls', namespace='api')) ]

6. 配置Django項目的模板搜索路徑

上一步使用了Django的模板系統，因此須要配置一下模板使Django知道從哪裏找到index.html

打開 settings.py (ulb_manager/settings.py)，找到TEMPLATES配置項，修改以下:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates', # 'DIRS': [], **'DIRS': ['frontend/dist']**, 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]

注意這裏的 frontend 是VueJS項目目錄，dist則是運行 npm run build 構建出的index.html與靜態文件夾 static 的父級目錄

這時啓動Django項目，訪問 / 則能夠訪問index.html，可是還有問題，靜態文件都是404錯誤，下一步咱們解決這個問題

7. 配置靜態文件搜索路徑

打開 settings.py (ulb_manager/settings.py)，找到 STATICFILES_DIRS 配置項，配置以下:

# Add for vuejs
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"), ]

這樣Django不只能夠將/ulb 映射到index.html，並且還能夠順利找到靜態文件

此時訪問 /ulb 咱們能夠看到使用Django做爲後端的VueJS helloworld

ALL DONE.

8. 開發環境

由於咱們使用了Django做爲後端，每次修改了前端以後都要從新構建（你能夠理解爲不編譯不能運行）

除了使用Django做爲後端，咱們還能夠在dist目錄下面運行如下命令來看效果：

hs(即: http server)

 可是問題依然沒有解決，我想過檢測文件變化來自動構建，可是構建是秒級的，太慢了，因此我直接使用VueJS的開發環境來調試

npm run dev

 毫秒，可是有個新問題，使用VueJS的開發環境脫離了Django環境，訪問Django寫的API，出現了跨域問題，有兩種方法解決，一種是在VueJS層上作轉發（proxyTable），另外一種是在Django層注入header，這裏我使用後者，用Django的第三方包 django-cors-headers 來解決跨域問題

安裝

pip install django-cors-headers

配置（兩步）

1. 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', ]

這裏要注意中間件加載順序，列表是有序的哦

2. settings.py 添加

CORS_ORIGIN_ALLOW_ALL = True

至此，個人開發環境就搭建完成了