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

正文引用如下

?

引言

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

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

目錄：

我為什么要選擇Django與VueJS？

Django和VueJS是如何結合起來的？

實操

創建 Django 項目

創建 Django App 做為后端

創建 VueJS 項目作為前端

使用 Webpack 處理前端代碼

配置 Django 模板的搜索路徑

配置 Django 靜態文件搜索路徑

開發環境

生產環境（部署到 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

著重提一下單文件組件：

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

<template></template > 前端渲染的模板

專為此模板寫渲染邏輯的 <script></script>

專為此模板寫樣式的 <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

至此，我的開發環境就搭建完成了

轉載于:https://www.cnblogs.com/atuotuo/p/11169485.html

總結

以上是生活随笔為你收集整理的转载： 我如何使用 Django + Vue.js 快速构建项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。