參考網(wǎng)上一篇文章做了點(diǎn)細(xì)節(jié)補(bǔ)充。

本篇使用Vue.js作為前端框架，代替Django本身較為孱弱的模板引擎，Django則作為服務(wù)端提供api接口，使得前后端實(shí)現(xiàn)完全分離，更適合單頁(yè)應(yīng)用的開發(fā)構(gòu)建。

一、 環(huán)境準(zhǔn)備

安裝環(huán)境：

Django系：

Python 3.6 +

Django 1.11.13

Mysql 5.7

Python的MySQL相關(guān)模塊等

推薦python相關(guān)的模塊（包括Django）都使用python自帶的pip安裝器安裝。命令：pip install django即可安裝最新版本的django,或者pip install django==1.11.13安裝指定版本

Vue.js系：

Node.js 8.11.2

有關(guān)Vue的模塊(包括vue)可以使用node自帶的npm包管理器安裝。推薦使用淘寶的 cnpm  命令行工具代替默認(rèn)的 npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

二、 構(gòu)建Django項(xiàng)目

我們首先使用Django來(lái)搭建web后端api框架。

1、 先在終端敲入命令：

django-admin startproject myproject

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

2、 進(jìn)入項(xiàng)目根目錄，創(chuàng)建一個(gè)app：

python manage.py startapp myapp

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

3、 在myproject下的settings.py配置文件中，把默認(rèn)的sqllite3數(shù)據(jù)庫(kù)換成我們的mysql數(shù)據(jù)庫(kù)：

# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'testcon',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': '127.0.0.1',
    }
}

并把a(bǔ)pp加入到installed_apps列表里：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
     'myapp',
]

4、 在app目錄下的models.py里我們簡(jiǎn)單寫一個(gè)model如下：

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
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

只有兩個(gè)字段，書名book_name和添加時(shí)間add_time。如果沒(méi)有指定主鍵的話django會(huì)自動(dòng)新增一個(gè)自增id作為主鍵

5、 在app目錄下的views里我們新增兩個(gè)接口，一個(gè)是show_books返回所有的書籍列表（通過(guò)JsonResponse返回能被前端識(shí)別的json格式數(shù)據(jù)），二是add_book接受一個(gè)get請(qǐng)求，往數(shù)據(jù)庫(kù)里添加一條book數(shù)據(jù)：

from django.shortcuts import render
from django.views.decorators.http import require_http_methods
from django.core import serializers
from django.http import JsonResponse
import json
from .models import Book
# 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的幫忙下，我們的接口實(shí)際上不需要自己去組織SQL代碼

6、 在app目錄下，新增一個(gè)urls.py文件，把我們新增的兩個(gè)接口添加到路由里：

from django.conf.urls import url, includeimport views

urlpatterns = [url(r'add_book$', views.add_book, ),url(r'show_books$', views.show_books, ),]

1. 我們還要把a(bǔ)pp下的urls添加到project下的urls中，才能完成路由：

from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView
import myapp.urls
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(myapp.urls)),
    url(r'^$', TemplateView.as_view(template_name="index.html")),
]

1. 在項(xiàng)目的根目錄，輸入命令：

python manage.py makemigrations myapp

python manage.py migrate

查詢數(shù)據(jù)庫(kù)，看到book表已經(jīng)自動(dòng)創(chuàng)建了：

1. 在項(xiàng)目的根目錄，輸入命令：

python manage.py runserver

啟動(dòng)服務(wù)，通過(guò)postman測(cè)試一下我們剛才寫的兩個(gè)接口：

add_book

show_books

三、 構(gòu)建Vue.js前端項(xiàng)目

1、 先用npm安裝vue-cli腳手架工具（vue-cli是官方腳手架工具，能迅速幫你搭建起vue項(xiàng)目的框架）：

    `npm install -g vue-cli`

安裝好后，在project項(xiàng)目根目錄下，新建一個(gè)前端工程目錄：

    vue-init webpack appfront  //安裝中把vue-router選上，我們須要它來(lái)做前端路由

進(jìn)入appfront目錄，運(yùn)行命令：

    npm install //安裝vue所須要的node依賴

 npm install  vue-resource 

 npm install element-ui

現(xiàn)在我們可以看到整個(gè)文件目錄結(jié)構(gòu)是這樣的：

2、 在目錄src下包含入口文件main.js，入口組件App.vue等。后綴為vue的文件是Vue.js框架定義的單文件組件，其中標(biāo)簽中的內(nèi)容可以理解為是類html的頁(yè)面結(jié)構(gòu)內(nèi)容，標(biāo)簽中的是js的方法、數(shù)據(jù)方面的內(nèi)容，而則是css樣式方面的內(nèi)容：

3、 我們?cè)趕rc/component文件夾下新建一個(gè)名為Home.vue的組件，通過(guò)調(diào)用之前在Django上寫好的api，實(shí)現(xiàn)添加書籍和展示書籍信息的功能。在樣式組件上我們使用了餓了么團(tuán)隊(duì)推出的element-ui，這是一套專門匹配Vue.js框架的功能樣式組件。由于組件的 編碼涉及到了很多js、html、css的知識(shí)，并不是本文的重點(diǎn)，因此在此只貼出部分代碼：

4、 在src/router目錄的index.js中，我們把新建的Home組件，配置到vue-router路由中：

5、 如果發(fā)現(xiàn)列表抓取不到數(shù)據(jù)，可能是出現(xiàn)了跨域問(wèn)題，打開瀏覽器console確認(rèn)：

這時(shí)候我們須要在Django層注入header，用Django的第三方包django-cors-headers來(lái)解決跨域問(wèn)題：

       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

  注意中間件的添加順序

6、 在前端工程目錄下，輸入npm run dev啟動(dòng)node自帶的服務(wù)器，瀏覽器會(huì)自動(dòng)打開， 我們能看到頁(yè)面：

嘗試新增書籍，新增的書籍信息會(huì)實(shí)時(shí)反映到頁(yè)面的列表中，這得益于Vue.js的數(shù)據(jù)雙向綁定特性。

1. 在前端工程目錄下，輸入npm run build，如果項(xiàng)目沒(méi)有錯(cuò)誤的話，就能夠看到所有的組件、css、圖片等都被webpack自動(dòng)打包到dist目錄下了：

五、 整合Django和Vue.js

目前我們已經(jīng)分別完成了Django后端和Vue.js前端工程的創(chuàng)建和編寫，但實(shí)際上它們是運(yùn)行在各自的服務(wù)器上，和我們的要求是不一致的。因此我們須要把Django的TemplateView指向我們剛才生成的前端dist文件即可。

1、 找到project目錄的urls.py，使用通用視圖創(chuàng)建最簡(jiǎn)單的模板控制器，訪問(wèn) 『/』時(shí)直接返回 index.html:

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

2、 上一步使用了Django的模板系統(tǒng)，所以需要配置一下模板使Django知道從哪里找到index.html。在project目錄的settings.py下：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['appfront/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',
            ],
        },
    },
]

3、 我們還需要配置一下靜態(tài)文件的搜索路徑。同樣是project目錄的settings.py下：

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

4、 配置完成，我們?cè)趐roject目錄下輸入命令python manage.py runserver，就能夠看到我們的前端頁(yè)面在瀏覽器上展現(xiàn)：

注意服務(wù)的端口已經(jīng)是Django服務(wù)的8000而不是node服務(wù)的8080了

項(xiàng)目源碼：

https://github.com/HubDou/vue-django.git