優質文章，第一時間送達！
學習全文大概需要 12分鐘，內容實戰性較強。
1. 前言
本篇將基於Python 3.7+Django 3.0結合Vue.js前端框架，為大家介紹如何基於這三者的技術棧來實現一個前端後離的Web開發項目。為了簡化，方便讀者理解，本文將以開發一個單體頁面應用作為實戰演示。
2. 先搞清楚什麼是前後端分離
在正式開始實戰示例之前，我們有必要先弄清楚一個概念：什麼是前後端分離?
前後端分離目前已成為互聯網項目開發的業界標準使用方式，在聊前後端分離之前，相信也有很多讀者，對如何區分前端還是後端，還搞不清楚（是不是讓我戳中了你的痛處了）。本著“致良知”，先科譜一下知識。
通常情況下，我們說的前端，大多是指瀏覽器這一端，一般是用Html+CSS+JS來實現的，所以通常會引申為用Html+CSS+JS寫的大部分程序都是前端，包括App，小程序，H5等。
PS: 在NodeJS出現之後，用NodeJS寫的後端部分，也會被人歸類為前端，為了區分之前的前端，就給他們起了一個名字，叫做“大前端”。
久而久之，人們習慣把Html+CSS+JS，運行在瀏覽器端執行的，稱之為前端。
而Java，C，Python，PHP這些運行在服務器端的，統一稱之為後端。
但，這種以語言為分界點去區分前後端，真的合理麼？顯然不合理！
前後端的定義，不應該是以語言來定義，而是應該以它的運行環境，如果是在服務器端，就應該被稱之為後端，代表著你看不見，摸不著。而如果運行在用戶端，就應該被稱之為前端，代表你是可以看得到的。
在不分前後端的時候，無論是Java還是JS，全都是一個人來寫。
為什麼現在很多互聯網公司在項目開發時，都建議要進行前後端分離 ，或者說前後端分離能帶來哪些優勢？（好處多多，這裡僅提兩個點）
第一個，並行開發、獨立部署、實現前後端解耦，前後端的進度互不影響，在過去，前後端不分離的情況下，項目代碼耦合嚴重相互影響，且前後端人員工作量分佈不均。
第二個，術業有專攻（開發人員分離），以前的JavaWeb項目大多數都是Java程序員又當爹又當媽，又搞前端，又搞後端。前後端分離之後，前端工程師只管前端的事情，後端工程師只管後端的事情。
我們先看看一個 Web 系統，在前後端不分離時架構設計是什麼樣的。
用戶在瀏覽器上發送請求，服務器端接收到請求，根據 Header 中的 token 進行用戶鑑權，從數據庫取出數據，處理後將結果數據填入 HTML 模板，返回給瀏覽器，瀏覽器將 HTML 展現給用戶。
而採用前後端分離之後，分離的是人員職責，人員職責分離了，因此架構也發生變化。
前後端分離後，前端人員和後端人員約定好接口，前端人員不用再關心業務處理是怎麼回事，他只需要把界面做好就可以了，後端人員也不用再關係前端界面是什麼樣的，他只需要做好業務邏輯處理即可。
小結一下，前後端分離是什麼？
前後端分離是一種架構模式，或者說是最佳實踐，它主張將前端開發人員和後端開發人員的工作進行解耦，儘量減少他她們之間的交流成本，幫助他她們更能專注於自己擅長的工作。
PS: 本篇實戰示例，使用Vue.js作為前端框架，代替Django本身自帶的模板引擎，Django則作為服務端提供API接口，從而實現前後端分離。
3. 環境準備
本實戰示例，基礎環境對應安裝版本如下：
Python 3.7.4
Mysql 5.7
Pycharm （建議專業版）
Node
PS: 其中Python、Mysql、Pycharm、Node安裝過程皆較為簡單，不是本文介紹重點，讀者可直接參考官網安裝方法。
4. 新建獨立的虛擬開發環境
1、創建一個用於Django項目開發的獨立虛擬環境，切換到本地開發目錄，輸入如下命令：
<code>python3 -m venv venv/<code>
2、創建完成後，目錄結構如下：
<code>➜ venv tree -L 2/<code><code>./<code><code>├── bin/<code><code>│ ├── activate/<code><code>│ ├── activate.csh/<code><code>│ ├── activate.fish/<code><code>│ ├── easy_install/<code><code>│ ├── easy_install-3.7/<code><code>│ ├── pip/<code><code>│ ├── pip3/<code><code>│ ├── pip3.7/<code><code>│ ├── python -> python3/<code><code>│ └── python3 -> /usr/local/bin/python3/<code><code>├── include/<code><code>├── lib/<code><code>│ └── python3.7/<code><code>└── pyvenv.cfg/<code>
<code>4 directories, 11 files/<code>
3、進入到bin目錄，輸入命令source activate 命令，激活虛擬環境。
4、虛擬環境激活後，如上圖所示。接下來，在虛擬環境安裝Django庫。
安裝Django （最新版本為3.0）
<code>(venv) ➜ pip install Django/<code>
Django 項目源碼：
https://github.com/django/django
Django3.0 版本特性可查閱官網：
https://docs.djangoproject.com/en/3.0/releases/3.0/
5、安裝完成後，可檢查一下版本信息：
<code>(venv) ➜ python/<code><code>Python 3.7.4 (default, Jul 9 2019, 18:15:00)/<code><code>[Clang 10.0.0 (clang-1000.11.45.5)] on darwin/<code><code>Type "help", "copyright", "credits" or "license" for more information./<code><code>>>> import django/<code><code>>>> print(django.get_version)/<code><code>3.0/<code>
可以發現，在虛擬環境中已經成功安裝好了Django 3.0。
5. 創建Django後端項目
1、創建Django項目，採用Pycharm或者命令行創建皆可。此處，以命令行方式作為演示，項目名為django_vue。
<code>(venv) ➜ django-admin startproject django_vue/<code>
2. Django項目創建完成後，目錄結構如下所示。
<code>├── django_vue/<code><code>│ ├── django_vue/<code><code>│ │ ├── __init__.py/<code><code>│ │ ├── asgi.py/<code><code>│ │ ├── settings.py/<code><code>│ │ ├── urls.py/<code><code>│ │ └── wsgi.py/<code><code>│ └── manage.py/<code>
3、執行同步數據庫文件(Django默認數據庫為db.sqlite3)，執行同步過程如下：
<code>(venv) ➜ python manage.py migrate/<code><code>Operations to perform:/<code><code> Apply all migrations: admin, auth, contenttypes, sessions/<code><code>Running migrations:/<code><code> Applying contenttypes.0001_initial... OK/<code><code> Applying auth.0001_initial... OK/<code><code> Applying admin.0001_initial... OK/<code><code> Applying admin.0002_logentry_remove_auto_add... OK/<code><code> Applying admin.0003_logentry_add_action_flag_choices... OK/<code><code> Applying contenttypes.0002_remove_content_type_name... OK/<code><code> Applying auth.0002_alter_permission_name_max_length... OK/<code><code> Applying auth.0003_alter_user_email_max_length... OK/<code><code> Applying auth.0004_alter_user_username_opts... OK/<code><code> Applying auth.0005_alter_user_last_login_... OK/<code><code> Applying auth.0006_require_contenttypes_0002... OK/<code><code> Applying auth.0007_alter_validators_add_error_messages... OK/<code><code> Applying auth.0008_alter_user_username_max_length... OK/<code><code> Applying auth.0009_alter_user_last_name_max_length... OK/<code><code> Applying auth.0010_alter_group_name_max_length... OK/<code><code> Applying auth.0011_update_proxy_permissions... OK/<code><code> Applying sessions.0001_initial... OK/<code>
4、啟動Django Server ，驗證默認配置是否正常。
<code>(venv) ➜ python manage.py runserver 0.0.0.0:8000/<code><code>Watching for file changes with StatReloader/<code><code>Performing system checks.../<code>
<code>System check identified no issues (0 silenced)./<code><code>December 15, 2019 - 08:36:28/<code><code>Django version 3.0, using settings 'django_vue.settings'/<code><code>Starting development server at http://0.0.0.0:8000//<code><code>Quit the server with CONTROL-C./<code>
5、打開瀏覽器，訪問http://localhost:8000，一切正常的話，可見到如下界面。
6. 將Django數據庫更換為Mysql
1、假設在前面，我們已經安裝配置好了Mysql，輸入如下命令進入到Mysql。
<code>mysql -u root -p/<code>
2、創建數據庫，數據庫取名為django_vue_db，並設置字符集為utf-8。
<code>mysql> CREATE DATABASE django_vue_db CHARACTER SET utf8;/<code><code>Query OK, 1 row affected (0.01 sec)/<code>
3、安裝myslqclient庫
<code>(venv) ➜ pip install mysqlclient/<code>
4、配置settings.py文件，配置Mysql數據庫引擎。
<code>```python/<code>
<code>DATABASES = {/<code><code> 'default': {/<code><code> 'ENGINE': 'django.db.backends.mysql',/<code><code> 'NAME': 'django_vue_db',/<code><code> 'USER': 'root',/<code><code> 'PASSWORD': 'xxxxxxx',/<code><code> 'HOST': '127.0.0.1',/<code><code> }/<code><code>}/<code><code>```/<code>
5、執行同步操作，將數據遷移到Mysql。
<code>python manage.py migrate/<code>
6、驗證是否切庫成功，進入到Mysql客戶端，查看django初化表是否有生成。
<code>mysql> use django_vue_db;/<code><code>Database changed/<code><code>mysql> show tables;/<code><code>+----------------------------+/<code><code>| Tables_in_django_vue_db |/<code><code>+----------------------------+/<code><code>| auth_group |/<code><code>| auth_group_permissions |/<code><code>| auth_permission |/<code><code>| auth_user |/<code><code>| auth_user_groups |/<code><code>| auth_user_user_permissions |/<code><code>| django_admin_log |/<code><code>| django_content_type |/<code><code>| django_migrations |/<code><code>| django_session |/<code><code>+----------------------------+/<code><code>10 rows in set (0.00 sec)/<code>
7、運行Django Server，重新訪問http://localhost:8000。
<code>python manage.py runserver 0.0.0.0:8000/<code>
如果能正常訪問，過程沒有報錯，說明切換數據庫已經成功了。
7. 創建Django實戰項目App
1、創建Django App，進入django_vue項目主目錄，輸入如下命令：
<code>(venv) ➜ python manage.py startapp api_test/<code>
2、App創建完成後，目錄結構如下所示：
<code>├── api_test/<code><code>│ ├── __init__.py/<code><code>│ ├── admin.py/<code><code>│ ├── apps.py/<code><code>│ ├── migrations/<code><code>│ │ └── __init__.py/<code><code>│ ├── models.py/<code><code>│ ├── tests.py/<code><code>│ └── views.py/<code>
並把api_test加入到settings文件中的installed_apps列表裡：
<code>```python/<code><code>INSTALLED_APPS = [/<code><code> 'django.contrib.admin',/<code><code> 'django.contrib.auth',/<code><code> 'django.contrib.contenttypes',/<code><code> 'django.contrib.sessions',/<code><code> 'django.contrib.messages',/<code><code> 'django.contrib.staticfiles',/<code><code> 'api_test',/<code><code>]/<code><code>```/<code>
3、 在api_test目錄下的models.py裡我們簡單寫一個model如下：
<code>```python/<code><code># -*- coding: utf-8 -*-/<code><code>from __future__ import unicode_literals/<code><code>from django.db import models/<code><code>class Book(models.Model):/<code><code> book_name = models.CharField(max_length=128)/<code><code> add_time = models.DateTimeField(auto_now_add=True)/<code>
<code> def __unicode__(self):/<code><code> return self.book_name/<code><code>```/<code>
只有兩個字段，書名book_name和添加時間add_time。如果沒有指定主鍵的話Django會自動新增一個自增id作為主鍵。
4、在api_test目錄下的views裡我們新增兩個接口，一個是show_books返回所有的書籍列表（通過JsonResponse返回能被前端識別的json格式數據），二是add_book接受一個get請求，往數據庫裡添加一條book數據。
<code>```python/<code><code>from django.shortcuts import render/<code><code>from django.views.decorators.http import require_http_methods/<code><code>from django.core import serializers/<code><code>from django.http import JsonResponse/<code><code>import json/<code>
<code>from .models import Book/<code>
<code>@require_http_methods(["GET"])/<code><code>def add_book(request):/<code><code> response = {}/<code><code> try:/<code><code> book = Book(book_name=request.GET.get('book_name'))/<code><code> book.save/<code><code> response['msg'] = 'success'/<code><code> response['error_num'] = 0/<code><code> except Exception as e:/<code><code> response['msg'] = str(e)/<code><code> response['error_num'] = 1/<code><code> return JsonResponse(response)/<code>
<code>@require_http_methods(["GET"])/<code><code>def show_books(request):/<code><code> response = {}/<code><code> try:/<code><code> books = Book.objects.filter/<code><code> response['list'] = json.loads(serializers.serialize("json", books))/<code><code> response['msg'] = 'success'/<code><code> response['error_num'] = 0/<code><code> except Exception as e:/<code><code> response['msg'] = str(e)/<code><code> response['error_num'] = 1/<code><code> return JsonResponse(response)/<code><code>```/<code>
可以看出，在ORM的幫忙下，我們的接口實際上不需要自己去組織SQL代碼。
5、在api_test目錄下，新增一個urls.py文件，把我們新增的兩個接口添加到路由裡：
<code>from django.conf.urls import url, include/<code><code>from .views import */<code>
<code>urlpatterns = [/<code><code> url(r"add_book$", add_book, ),/<code><code> url(r"show_books$", show_books, ),/<code><code>]/<code><code>```/<code>
6、我們還要把api_test下的urls添加到項目django_vue下的urls中，才能完成路由：
<code>```python/<code><code>from django.contrib import admin/<code><code>from django.urls import path/<code><code>from django.conf.urls import url, include/<code><code>from django.contrib import admin/<code><code>from django.views.generic import TemplateView/<code><code>import api_test.urls/<code>
<code>urlpatterns = [/<code><code> url(r"^admin/", admin.site.urls),/<code><code> url(r'^api/', include(api_test.urls)),/<code><code>]/<code><code>```/<code>
7、在項目的根目錄，輸入命令：
<code>python manage.py makemigrations api_test/<code><code>python manage.py migrate/<code>
8、查詢數據庫，看到book表已經自動創建了：
<code>mysql> show tables;/<code><code>+----------------------------+/<code><code>| Tables_in_django_vue_db |/<code><code>+----------------------------+/<code><code>| api_test_book |/<code><code>| auth_group |/<code><code>| auth_group_permissions |/<code><code>| auth_permission |/<code><code>| auth_user |/<code><code>| auth_user_groups |/<code><code>| auth_user_user_permissions |/<code><code>| django_admin_log |/<code><code>| django_content_type |/<code><code>| django_migrations |/<code><code>| django_session |/<code><code>+----------------------------+/<code><code>11 rows in set (0.00 sec)/<code><code>mysql> desc api_test_book;/<code><code>+-----------+--------------+------+-----+---------+----------------+/<code><code>| Field | Type | | Key | Default | Extra |/<code><code>+-----------+--------------+------+-----+---------+----------------+/<code><code>| id | int(11) | NO | PRI | | auto_increment |/<code><code>| book_name | varchar(128) | NO | | | |/<code><code>| add_time | datetime(6) | NO | | | |/<code><code>+-----------+--------------+------+-----+---------+----------------+/<code><code>3 rows in set (0.01 sec)/<code><code>mysql>/<code><code>```/<code>
Django生成的表名將以app名加上model中的類名組合而成。
9、在項目的根目錄，輸入命令：
<code>python manage.py runserver 0.0.0.0:800/<code>
啟動服務，通過httpie測試一下我們剛才寫的兩個接口。
10、通過調用接口向Django App中添加兩條書名記錄。
<code>```shell/<code><code>➜ http http://127.0.0.1:8000/api/add_book\\?book_name\\=mikezhou_talk/<code><code>HTTP/1.1 200 OK/<code><code>Content-Length: 34/<code><code>Content-Type: application/json/<code><code>Date: Sun, 15 Dec 2019 09:11:12 GMT/<code><code>Server: WSGIServer/0.2 CPython/3.7.4/<code><code>X-Content-Type-Options: nosniff/<code><code>X-Frame-Options: DENY/<code><code>{/<code><code> "error_num": 0,/<code><code> "msg": "success"/<code><code>}/<code>
<code> ➜ http http://127.0.0.1:8000/api/add_book\\?book_name\\=測試開發技術/<code><code>HTTP/1.1 200 OK/<code><code>Content-Length: 34/<code><code>Content-Type: application/json/<code><code>Date: Sun, 15 Dec 2019 09:11:44 GMT/<code><code>Server: WSGIServer/0.2 CPython/3.7.4/<code><code>X-Content-Type-Options: nosniff/<code><code>X-Frame-Options: DENY/<code><code>{/<code><code> "error_num": 0,/<code><code> "msg": "success"/<code><code>}/<code><code>```/<code>11、通過調用接口，顯示Django App中所有書名列表：
<code>```shell/<code><code>➜ http http://127.0.0.1:8000/api/show_books/<code><code>HTTP/1.1 200 OK/<code><code>Content-Length: 305/<code><code>Content-Type: application/json/<code><code>Date: Sun, 15 Dec 2019 09:13:48 GMT/<code><code>Server: WSGIServer/0.2 CPython/3.7.4/<code><code>X-Content-Type-Options: nosniff/<code><code>X-Frame-Options: DENY/<code><code>{/<code><code> "error_num": 0,/<code><code> "list": [/<code><code> {/<code><code> "fields": {/<code><code> "add_time": "2019-12-15T09:11:12.673Z",/<code><code> "book_name": "mikezhou_talk"/<code><code> },/<code><code> "model": "api_test.book",/<code><code> "pk": 1/<code><code> },/<code><code> {/<code><code> "fields": {/<code><code> "add_time": "2019-12-15T09:11:44.305Z",/<code><code> "book_name": "測試開發技術"/<code><code> },/<code><code> "model": "api_test.book",/<code><code> "pk": 2/<code><code> }/<code><code> ],/<code><code> "msg": "success"/<code><code>}/<code><code>```/<code>8. 新建Vue.js前端項目
1、有關Vue的模塊(包括vue)可以使用node自帶的npm包管理器安裝。推薦使用淘寶的 cnpm 命令行工具代替默認的 npm。
<code>npm install -g cnpm --registry=https://registry.npm.taobao.org/<code>
2、先用cnpm安裝vue-cli腳手架工具（vue-cli是官方腳手架工具，能迅速幫你搭建起vue項目的框架）：
<code>cnpm install -g vue-cli/<code>
3、安裝好後，在django_vue項目根目錄下，新建一個前端工程目錄：
<code>vue-init webpack frontend/<code>
在創建項目的過程中會彈出一些與項目相關的選項需要回答，按照真實情況進行輸入即可。
4、安裝 vue 依賴模塊
<code>cd frontend/<code><code>cnpm install/<code><code>cnpm install vue-resource/<code><code>cnpm install element-ui/<code>
5、現在我們可以看到整個文件目錄結構是這樣的：
本文為了讀者方便查看，是直接將vue前端工程放在django項目目錄下，實際多人協作開發過程中，完全是可以放在不同代碼倉庫下面的。
6、在frontend目錄src下包含入口文件main.js，入口組件App.vue等。後綴為vue的文件是Vue.js框架定義的單文件組件，其中標籤中的內容可以理解為是類html的頁面結構內容。
7、在src/component文件夾下新建一個名為Home.vue的組件，通過調用之前在Django上寫好的api，實現添加書籍和展示書籍信息的功能。在樣式組件上我們使用了餓了麼團隊推出的element-ui，這是一套專門匹配Vue.js框架的功能樣式組件。由於組件的編碼涉及到了很多js、html、css的知識，並不是本文的重點，因此在此只貼出部分代碼：
Home.vue文件代碼：
<code>```vue/<code>
<code><template>/<code><code><code><el-row>/<code><code><el-input>/<code><code><el-button>新增/<el-button>/<code><code><code><el-row>/<code><code><el-table>/<code><code><el-table-column>/<code><code><template> {{ scope.row.pk }} /<template>/<code><code><code><el-table-column>/<code><code><template> {{ scope.row.fields.book_name }} /<template>/<code><code><code><el-table-column>/<code><code><template> {{ scope.row.fields.add_time }} /<template>/<code><code><code><code> /<code><code> /<code>/<code><code>
<code><script>/<code><code>export default {/<code><code> name: 'home',/<code><code> data {/<code><code> return {/<code><code> input: '',/<code><code> bookList: /<code><code> }/<code><code> },/<code><code> mounted: function {/<code><code> this.showBooks/<code><code> },/<code><code> methods: {/<code><code> addBook {/<code><code> this.$http.get('http://127.0.0.1:8000/api/add_book?book_name=' + this.input)/<code><code> .then((response) => {/<code><code> var res = JSON.parse(response.bodyText)/<code><code> if (res.error_num === 0) {/<code><code> this.showBooks/<code><code> } else {/<code><code> this.$message.error('新增書籍失敗，請重試')/<code><code> console.log(res['msg'])/<code><code> }/<code><code> })/<code><code> },/<code><code> showBooks {/<code><code> this.$http.get('http://127.0.0.1:8000/api/show_books')/<code><code> .then((response) => {/<code><code> var res = JSON.parse(response.bodyText)/<code><code> console.log(res)/<code><code> if (res.error_num === 0) {/<code><code> this.bookList = res['list']/<code><code> } else {/<code><code> this.$message.error('查詢書籍失敗')/<code><code> console.log(res['msg'])/<code><code> }/<code><code> })/<code><code> }/<code><code> }/<code><code>}/<code><code>
<code>/<code><code><style>/<code><code> h1, h2 {/<code><code> font-weight: normal;/<code><code> }/<code>
<code> ul {/<code><code> list-style-type: none;/<code><code> padding: 0;/<code><code>}/<code>
<code>li {/<code><code> display: inline-block;/<code><code> margin: 0 10px;/<code><code>}/<code>
<code>a {/<code><code> color: #42b983;/<code><code>}/<code><code><code>```/<code>
8、在src/router目錄的index.js中，我們把新建的Home組件，配置到vue-router路由中：
<code>```js/<code><code>import Vue from 'vue'/<code><code>import Router from 'vue-router'/<code><code>// import HelloWorld from '@/components/HelloWorld'/<code><code>import Home from '@/components/Home'/<code><code>Vue.use(Router)/<code><code>export default new Router({/<code><code> routes: [/<code><code> {/<code><code> path: '/',/<code><code> name: 'Home',/<code><code> component: Home/<code><code> }/<code><code> ]/<code><code>})/<code><code>```/<code> 9、在src/main.js文件中，導入element-ui、vue-resource庫。
<code>```js/<code><code>import Vue from 'vue'/<code><code>import App from './App'/<code><code>import router from './router'/<code><code>import ElementUI from 'element-ui'/<code><code>import VueResource from 'vue-resource'/<code><code>import 'element-ui/lib/theme-chalk/index.css'/<code><code>Vue.use(ElementUI)/<code><code>Vue.use(VueResource)/<code><code>Vue.config.productionTip = false/<code>
<code>/* eslint-disable no-new *//<code><code>new Vue({/<code><code> el: '#app',/<code><code> router,/<code><code> components: { App },/<code><code> template: ''/<code><code>})/<code><code>```/<code>
10、如果出現跨域問題，需要在Django層注入header，用Django的第三方包<code>django-cors-headers/<code>來解決跨域問題：
<code>pip install django-cors-headers/<code>
settings.py 修改：
<code>```python/<code><code>MIDDLEWARE = [/<code><code> 'django.middleware.security.SecurityMiddleware',/<code><code> 'django.contrib.sessions.middleware.SessionMiddleware',/<code><code> 'corsheaders.middleware.CorsMiddleware',/<code><code> 'django.middleware.common.CommonMiddleware',/<code><code> 'django.middleware.csrf.CsrfViewMiddleware',/<code><code> 'django.contrib.auth.middleware.AuthenticationMiddleware',/<code><code> 'django.contrib.messages.middleware.MessageMiddleware',/<code><code> 'django.middleware.clickjacking.XFrameOptionsMiddleware',/<code><code>]/<code>
<code>CORS_ORIGIN_ALLOW_ALL = True/<code><code>```/<code>
PS: 注意中間件的添加順序。
12、在前端工程frontend目錄下，輸入<code>npm run dev/<code>啟動node自帶的服務器，瀏覽器會自動打開， 我們能看到頁面：
13、嘗試新增書籍，如填入：“自動化測試實戰寶典”，新增的書籍信息會實時反映到頁面的列表中，這得益於Vue.js的數據雙向綁定特性。
14、在前端工程frontend目錄下，輸入<code>npm run build/<code>，如果項目沒有錯誤的話，就能夠看到所有的組件、css、圖片等都被webpack自動打包到dist目錄下了：
9. 整合Django和Vue.js前端
目前我們已經分別完成了Django後端和Vue.js前端工程的創建和編寫，但實際上它們是運行在各自的服務器上，和我們的要求是不一致的。因此我們須要把Django的<code>TemplateView指向我們剛才生成的前端dist文件即可。/<code>
<code>1、 找到project目錄的urls.py，使用通用視圖創建最簡單的模板控制器，訪問 『/』時直接返回 index.html:/<code>
<code>```python/<code><code>urlpatterns = [/<code><code> url(r"^admin/", admin.site.urls),/<code><code> url(r'^api/', include(api_test.urls)),/<code><code> url(r'^$', TemplateView.as_view(template_name="index.html")),/<code><code>]/<code><code>```/<code>
2、上一步使用了Django的模板系統，所以需要配置一下模板使Django知道從哪裡找到index.html。在project目錄的settings.py下：
<code>```python/<code><code>TEMPLATES = [/<code><code> {/<code><code> 'BACKEND': 'django.template.backends.django.DjangoTemplates',/<code><code> 'DIRS':['frontend/dist'],/<code><code> 'APP_DIRS':True,/<code><code> 'OPTIONS': {/<code><code> 'context_processors': [/<code><code> 'django.template.context_processors.debug',/<code><code> 'django.template.context_processors.request',/<code><code> 'django.contrib.auth.context_processors.auth',/<code><code> 'django.contrib.messages.context_processors.messages',/<code><code> ],/<code><code> },/<code><code> },/<code><code>]/<code><code>```/<code>3、 我們還需要配置一下靜態文件的搜索路徑。同樣是project目錄的settings.py下：
<code>```python/<code><code># Add for vuejs/<code><code>STATICFILES_DIRS = [/<code><code> os.path.join(BASE_DIR, "frontend/dist/static"),/<code><code>]/<code><code>```/<code>
4、 配置完成，我們在project目錄下輸入命令<code>python manage.py runserver/<code>，就能夠看到我們的前端頁面在瀏覽器上展現：
注意此時服務的端口已經是Django服務的8000而不是node服務的8080了，說明我們已經成功通過Django集成了Vue前端工程。
該實戰示例為大家充分展示了現在主流的前後端分離方式，由前端框架，如Vue.js來構建實現前端界面，再通過後端框架，如Django來實現API數據提供，兩者通過接口進行通訊、相輔相成、最終實現一個完整Web項目。
閱讀更多 編程派 的文章
