本文推薦給在工作中需要建構基于web項目的工程師們。例如測試平台、運維平台等，都可參考本文介紹的後端Django + 前端Vue.js的技術棧快速地搭建起一套web項目的架構。
1. 優點
Django是Python體系下最成熟的web架構之一，Django架構因其能夠快速開發網站應用的特性成為了中小型網站開發架構首選。且Django具備的資料分析(Pandas)、任務隊列(Celery)、DRF、ORM等一衆功能都使得使用者在面對任何建站需求時都能夠得心應手。
Vue.js是當下很火的一個JavaScript MVVM庫，它是以資料驅動群組件化的思想建構的。Vue.js支援雙向綁定、mustache标簽文法等特性，并提供了更加簡潔、更易于了解的API，使得我們能夠快速地上手并使用Vue.js。
本篇使用Vue.js作為前端架構，代替Django本身較為薄弱的模闆引擎，Django則作為服務端提供api接口，使得前後端實作完全分離，更适合單頁應用的開發建構。
2. 前期準備
Django系：
Python 3.6
Django 2
Mysql 5.7
Python的MySQLdb子產品等
Vue.js系：
Node.js 6.1
有關Vue的子產品(包括vue)我們都使用node自帶的npm包管理器安裝
3. 建構Django項目
1、建立project：
django-admin startproject firstproject
2、建立app
進入項目根目錄，建立一個app：
cd firstproject
python manage.py startapp firstapp
3、修改配置檔案
在firstproject下的settings.py配置檔案中，把預設的sqllite3資料庫換成我們的mysql資料庫：
# Database
# https://docs.djangoproject.com/en/2.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'firstproject',
'USER': 'root',
'PASSWORD': 'root',
'HOST': '127.0.0.1',
}
}
并把app加入到installed_apps清單裡：
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'firstapp',
]
4、建立model
在app目錄下的models.py裡我們簡單寫一個model如下：
# -*- coding: utf-8 -*-
from django.db import models
# Create your models here.
class Book(models.Model):
book_name = models.CharField(max_length=64)
add_time = models.DateTimeField(auto_now_add=True)
def __unicode__(self):
return self.book_name
隻有兩個字段，書名book_name和添加時間add_time。如果沒有指定主鍵的話django會自動新增一個自增id作為主鍵
5、實作接口方法
在app目錄下的views裡我們新增兩個接口，一個是show_books傳回所有的書籍清單（通過JsonResponse傳回能被前端識别的json格式資料），二是add_book接受一個get請求，往資料庫裡添加一條book資料：
from firstapp.models import Book
from django.views.decorators.http import require_http_methods
from django.http import JsonResponse
from django.core import serializers
import json
# Create your views here.
@require_http_methods(["GET"])
def add_book(request):
response = {}
try:
book = Book(book_name=request.GET.get('book_name'))
book.save()
response['msg'] = 'success'
response['error_num'] = 0
except Exception as e:
response['msg'] = str(e)
response['error_num'] = 1
return JsonResponse(response)
@require_http_methods(["GET"])
def show_books(request):
response = {}
try:
books = Book.objects.filter()
response['list'] = json.loads(serializers.serialize("json", books))
response['msg'] = 'success'
response['error_num'] = 0
except Exception as e:
response['msg'] = str(e)
response['error_num'] = 1
return JsonResponse(response)
可以看出，在ORM的幫忙下，我們的接口實際上不需要自己去組織SQL代碼
6、建立app的路由
1. 在app目錄下，新增一個urls.py檔案，把我們新增的兩個接口添加到路由裡：
from django.conf.urls import path,re_path
from firstapp import views
urlpatterns = [
re_path('add_book$', views.add_book),
re_path('show_books/', views.show_books),
]
2. 我們還要把app下的urls添加到firstproject下的urls中，才能完成路由：
from django.urls import include, re_path
from django.contrib import admin
from firstapp import urls
urlpatterns = [
re_path('admin/', admin.site.urls),
re_path('api/', include(urls)),
]
3. 在項目的根目錄，輸入指令：
# python manage.py makemigrations firstapp
Migrations for 'firstapp':
firstapp/migrations/0001_initial.py
- Create model Book
# python manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, contenttypes, firstapp, sessions
Running migrations:
Applying firstapp.0001_initial... OK
4. 查詢資料庫，看到firstapp_book表已經自動建立了：
5. 在項目的根目錄，輸入指令啟動服務：
python manage.py runserver
6. 通過curl測試一下我們剛才寫的兩個接口：
- add_book
curl -X GET -H "Content-Type: application/json" http://127.0.0.1:8000/api/add_book?book_name=test
{"msg": "success", "error_num": 0}
- show_books
curl -X GET -H "Content-Type: application/json" http://127.0.0.1:8000/api/show_books
四、建構Vue.js前端項目
1、安裝腳手架
先用npm安裝vue-cli腳手架工具（vue-cli是官方腳手架工具，能迅速幫你搭建起vue項目的架構）：
npm install -g vue-cli
安裝好後，在project項目根目錄下，建立一個前端工程目錄：
vue-init webpack appfront //安裝中把vue-router選上，我們需要它來做前端路由
2、安裝依賴
進入appfront目錄，運作指令：
npm install //安裝vue所需要的node依賴
3、新增元件
我們在src/component檔案夾下建立一個名為Library.vue的元件，通過調用之前在Django上寫好的api，實作添加書籍和展示書籍資訊的功能。在樣式元件上我們使用了餓了麼團隊推出的element-ui，這是一套專門比對Vue.js架構的功能樣式元件:
4、element-ui安裝使用
在指令行工具當中輸入
cnpm i element-ui -S
在main.js中引入element相關的js和css
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
5、啟動前端服務
在前端工程目錄下，輸入npm run dev啟動node自帶的伺服器，浏覽器會自動打開，或者在浏覽器輸入http:localhost:8080/#/，即可看到頁面。
6、解決跨域
如果發現頁面中清單抓取不到資料，可能是出現了跨域問題，打開浏覽器console确認：
這時候我們需要在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',
]
CORS_ORIGIN_ALLOW_ALL = True
注意中間件的添加順序
7、完成前端編寫
在前端工程目錄下，輸入npm run dev啟動node自帶的伺服器，浏覽器會自動打開， 我們能看到頁面：
嘗試新增書籍，新增的書籍資訊會實時反映到頁面的清單中，這得益于Vue.js的資料雙向綁定特性。
8、打包
在前端工程目錄下，輸入npm run build，如果項目沒有錯誤的話，就能夠看到所有的元件、css、圖檔等都被webpack自動打包到dist目錄下了：
五、整合Django和Vue.js
目前已經分别完成了Django後端和Vue.js前端工程的建立，但實際上它們是運作在各自的伺服器以及端口上，和我們的要求是不一緻的。是以我們需要把Django的TemplateView指向我們剛才生成的前端dist檔案即可。
1、更換首頁
找到firstproject目錄的urls.py，使用通用視圖建立最簡單的模闆控制器，通路 『/』時直接傳回 index.html:
from django.views.generic import TemplateView
urlpatterns = [
re_path('admin/', admin.site.urls),
re_path('api/', include(urls)), # vue前端擷取資料的url
re_path('^$', TemplateView.as_view(template_name="index.html")),
]
2、修改模闆配置
上一步使用了Django的模闆系統，是以需要配置一下模闆使Django知道從哪裡找到index.html。在firstproject目錄的settings.py下增加DIRS的值：
TEMPLATES = [
{
...
'DIRS': ['appfront/dist'],
...
]
3、修改靜态檔案路徑
我們還需要配置一下靜态檔案的搜尋路徑。同樣是project目錄的settings.py下：
# Add for vuejs
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "appfront/dist/static"),
]
4、啟動服務
配置完成，我們在firstproject目錄下輸入指令python manage.py runserver，前端頁面：
注意服務的端口已經是Django服務的8000而不是node服務的8080了。
參考文檔：https://cloud.tencent.com/developer/article/1005607
如有侵權，請聯系公衆号作者删除。
以上就是一個前後端分離的簡單web項目建構過程，希望大家可以有所收獲。
源碼在公衆号背景回複vue即可擷取。