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

正文引用如下

?

引言

大U的技術(shù)課堂 的新年第一課，祝大家新的一年好好學(xué)習(xí)，天天向上：）

本篇將手把手教你如何快速而優(yōu)雅的構(gòu)建?前后端分離的項(xiàng)目?，想直接上手請往后翻！

目錄：

我為什么要選擇Django與VueJS？

Django和VueJS是如何結(jié)合起來的？

實(shí)操

創(chuàng)建 Django 項(xiàng)目

創(chuàng)建 Django App 做為后端

創(chuàng)建 VueJS 項(xiàng)目作為前端

使用 Webpack 處理前端代碼

配置 Django 模板的搜索路徑

配置 Django 靜態(tài)文件搜索路徑

開發(fā)環(huán)境

生產(chǎn)環(huán)境（部署到 UCloud）

正文：

我為什么要選擇Django與VueJS？

首先介紹一下我看重的點(diǎn)：

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

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

Django 僅因?yàn)?Python 的血統(tǒng)，就已經(jīng)站在了巨人的肩膀上，配置管理( SaltStack、Ansible )

，數(shù)據(jù)分析( Pandas )，任務(wù)隊(duì)列( Celery )，Restful API(?Django REST framework?)，HTTP請求( requests )，再加上高度抽象的ORM，功能強(qiáng)大的 Query Expressions，簡單清晰的配置，著重提一下堪稱神器的自帶App: Admin，有了它你再也不用將一些經(jīng)常變化的配置寫在文件里面，每次增刪改都重新發(fā)布一次，你只需要定義出配置的 data scheme ，只需要幾行代碼，Django Admin便為你提供美觀，并帶有權(quán)限控制的增刪改查界面，而且可以通過ORM為它生成的API來做到定制化的更新，比如直接讀某個(gè)wiki上的配置，自動(dòng)的寫入數(shù)據(jù)庫，偽代碼如下：

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

最后還可以使用 django-celery 的 celery-beat 按 Interval/crontab 的方式扔更新配置的任務(wù)到 celery 隊(duì)列里面，最最重要的是，這些都可以在Django Admin后臺直接配置哦，還不夠優(yōu)雅？請聯(lián)系我

VueJS (MVVM框架) -?Vue.js

• 數(shù)據(jù)雙向綁定
• 單文件組件
• 清晰的生命周期
• 學(xué)習(xí)曲線平滑
• vue-cli

前端是DevOps的弱項(xiàng)，我需要一個(gè) MVVM 框架來提升交互和節(jié)約時(shí)間，在試過 AngularJS ，ReactJS，VueJS之后我選擇了VueJS，因?yàn)槲矣X得寫 VueJS 代碼的感覺最接近寫 Python

著重提一下單文件組件：

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

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

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

專為此模板寫樣式的 <style></style>

這樣可以達(dá)到什么效果呢？一個(gè)文件一個(gè)組件，每個(gè)組件有它自己的邏輯與樣式，你不用關(guān)心什么 local 什么 global ，CSS樣式加載先后、覆蓋問題，因?yàn)樗恰洪]包』的，而且『自給自足』，不知道這樣說好不好理解

當(dāng)然組件之間也是可以通信的，舉個(gè)例子，我有一個(gè)組件叫 ListULB ，使用表格展示了我擁有的所有 ULB (負(fù)載均衡)，ListULB 做了一件事，從 API 獲取 ULB 對象列表并 for 循環(huán)展現(xiàn)出來， ListULB 可以放到某個(gè)頁面里，可以放到彈框里，放到模態(tài)框里，任何地方都可以，因?yàn)檫@個(gè)組件對外交互的只有API

如果我現(xiàn)在要寫一個(gè)組件叫 AddVServer ，功能是可以為任意一個(gè) ULB 對象添加VServer，我的寫法是將在 AddVServer 組件創(chuàng)建的時(shí)候，將 ULB 對象傳給 AddVServer 組件，這樣AddVServer 組件拿到這個(gè)對象，就可以直接根據(jù)對象的ID等，創(chuàng)建出當(dāng)前行的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 盡情的為它創(chuàng)建 VServer 吧

如果我要為指定 VServer 創(chuàng)建 RServer 呢，一樣的

看出來了吧，進(jìn)行開發(fā)之前，前端組件的結(jié)構(gòu)與數(shù)據(jù)的結(jié)構(gòu)對應(yīng)起來可以省好多時(shí)間，數(shù)據(jù)驅(qū)動(dòng)前端組件，棒嗎？

誰不喜歡優(yōu)雅的代碼呢， 『Data drive everything』 多么的省腦細(xì)胞

以上就是我選擇Python與VueJS的原因

Django與VueJS是如何結(jié)合起來？

• 首先我選擇了VueJS的前端渲染，自然放棄了Django的后端模板引擎渲染
• 然后業(yè)務(wù)邏輯放到了前端，放棄了Django的View（其實(shí)也就是前后端分離必要的條件）
• 保留了Django的?C?ontroller (URLconf) 來實(shí)現(xiàn)前端路由的父級路由，可以達(dá)到不同頁面使用不同的前端框架， 頁面內(nèi)部使用各自獨(dú)有的前端路由的效果，萬一老大給你配了前端呢，萬一前端只想寫 ReactJS 呢
• 保留了Django的 Model ，前面說了Django的ORM太好用了，而且可以配合Django Admin

所以綜合來說就是:

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

（為了容易理解，并沒有使用Django自稱的MTV模式理解，感興趣看看我畫的圖）

總結(jié)：作為以改變世界為己任的 DevOps ，MVC框架后端渲染的柔弱表現(xiàn)力與繁雜的交互已經(jīng)不能滿足我們了，.....省略1000子.....，所以我選擇這樣構(gòu)建項(xiàng)目，嗯...

好吧，也該開始了

代碼塊中的修改都會(huì)用爽星號括起來，比如: **changed**

本文為了精簡篇幅，默認(rèn)您已經(jīng)安裝了必要的 命令行界面（CLI），比如 vue-cli等

1. 創(chuàng)建Django項(xiàng)目

命令：

django-admin startproject ulb_manager

結(jié)構(gòu)：

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

2. 進(jìn)入項(xiàng)目根目錄，創(chuàng)建一個(gè) app 作為項(xiàng)目后端

命令：

cd ulb_manager python manage.py startapp backend

即：app 名叫做 backend

結(jié)構(gòu)：

. ├── 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創(chuàng)建一個(gè)vuejs項(xiàng)目作為項(xiàng)目前端

命令：

vue-init webpack frontend

即：項(xiàng)目名叫 frontend

結(jié)構(gòu)：

. ├── 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

結(jié)構(gòu)總結(jié)：

可以看到項(xiàng)目根目錄有兩個(gè)新文件夾，一個(gè)叫 backend ，一個(gè)叫 frontend，分別是：

• backend Django的一個(gè)app
• frontend Vuejs項(xiàng)目

4. 接下來我們使用 webpack 打包Vusjs項(xiàng)目

命令：

cd frontend npm install npm run build

結(jié)構(gòu)：

我引入了一些包，比如element-ui等，你的static里面的內(nèi)容會(huì)不同，沒關(guān)系 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

構(gòu)建完成會(huì)生成一個(gè) 文件夾名字叫dist，里面有一個(gè) index.html 和一個(gè) 文件夾static ，

5. 使用Django的通用視圖?TemplateView

找到項(xiàng)目根 urls.py (即ulb_manager/urls.py)，使用通用視圖創(chuàng)建最簡單的模板控制器，訪問 『/』時(shí)直接返回 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項(xiàng)目的模板搜索路徑

上一步使用了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.context_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)行 npm run build 構(gòu)建出的index.html與靜態(tài)文件夾 static 的父級目錄

這時(shí)啟動(dòng)Django項(xiàng)目，訪問 / 則可以訪問index.html，但是還有問題，靜態(tài)文件都是404錯(cuò)誤，下一步我們解決這個(gè)問題

7. 配置靜態(tài)文件搜索路徑

打開 settings.py (ulb_manager/settings.py)，找到 STATICFILES_DIRS 配置項(xiàng)，配置如下:

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

這樣Django不僅可以將/ulb 映射到index.html，而且還可以順利找到靜態(tài)文件

此時(shí)訪問 /ulb 我們可以看到使用Django作為后端的VueJS helloworld

ALL DONE.

8. 開發(fā)環(huán)境

因?yàn)槲覀兪褂昧薉jango作為后端，每次修改了前端之后都要重新構(gòu)建（你可以理解為不編譯不能運(yùn)行）

除了使用Django作為后端，我們還可以在dist目錄下面運(yùn)行以下命令來看效果：

hs(即: http server)

?但是問題依然沒有解決，我想過檢測文件變化來自動(dòng)構(gòu)建，但是構(gòu)建是秒級的，太慢了，所以我直接使用VueJS的開發(fā)環(huán)境來調(diào)試

npm run dev

?毫秒，但是有個(gè)新問題，使用VueJS的開發(fā)環(huán)境脫離了Django環(huán)境，訪問Django寫的API，出現(xiàn)了跨域問題，有兩種方法解決，一種是在VueJS層上做轉(zhuǎn)發(fā)（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

至此，我的開發(fā)環(huán)境就搭建完成了

轉(zhuǎn)載于:https://www.cnblogs.com/atuotuo/p/11169485.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。