使用 Django，Vue.js 搭建 Web 项目

1. 下文中所有路径均从根目录 root 开始。
2. > 为终端提示符。当前路径一般会标识在 > 前方的括号内，如果命令较多，则标识在代码段头部。
3. >>> 为 Python 提示符。

准备工作

---

安装 Django

笔者的 Python 版本是 3.5.2 。

> pip install django #安装Djando
> python
>>> import django
>>> print(django.get_version()) #获取Django版本号，验证安装

笔者安装的 Django 的版本是 1.11.4 。

安装 Node.js

参考文章 安装 Node.js 。

搭建项目

---

创建 Django 项目

创建 Django 项目 mysite，并在其下创建 app：backend 。

(root) > django-admin startproject mysite #创建项目
(root) > cd mysite
(root/mysite) > python manage.py startapp backend #创建app

配置 Django 项目

编辑 root/mysite/backend/views.py 文件。添加示例 API：index。

from django.shortcuts import render
from django.http import HttpResponse #添加

# Create your views here.

def index(request): #添加示例API
    return HttpResponse("Hello API !") #添加

在 root/mysite/backend/ 目录中新建 urls.py 文件，内容如下。将无子路径的请求均链接到示例 API：index 。

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'), #链接示例API
]

编辑 root/mysite/mysite/urls.py 文件。将路径起始处为 /api/ 的访问分配至 app：backend 处理。

""" ...... """
from django.conf.urls import url
from django.contrib import admin
from django.conf.urls import include #添加

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include('backend.urls', namespace='api')), #添加
]

编辑 root/mysite/mysite/settings.py 文件。添加 backend app 。

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'backend', #添加
]

创建超级用户。

(root/mysite)
> python manage.py migrate
> python manage.py createsuperuser

按照提示输入用户名、邮箱、密码等内容，完成超级用户的创建。

至此，完成 backend 的配置。在终端输入：(root/mysite) > python manage.py runserver，然后在浏览器中输入 http://localhost:8000/api/ 即可看到 “Hello API !”，然后在浏览器中输入 http://localhost:8000/admin/ 即可登陆超级用户。

创建 Vue.js 项目

(root/mysite)
> npm install --global vue-cli #全局安装
> vue init webpack frontend #创建项目
cd frontend
(root/mysite/frontend)
npm install #安装依赖
npm run build #构建

配置 Django 连接到 Vue.js

编辑 root/mysite/mysite/urls.py 文件。将对 /的访问链接到 index.html 。

""" ...... """
from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView #添加
from django.conf.urls import include

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

编辑 root/mysite/mysite/settings.py 文件。配置模板（即 index.html）所在路径与静态文件所在路径。

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',
            ],
        },
    },
]

#在文件末尾添加如下内容
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

至此，完成 frontend 的配置。在终端输入：(root/mysite) > python manage.py runserver，然后在浏览器中输入 http://localhost:8000/ 即可看到 Vue.js 的欢迎界面（如下图）。