Django与Vue.js前后端分离项目搭建实战指南

在撰写本文的过程中，笔者也同步学习了Markdown的基本用法。

作为一个初学者，笔者目前处于自主摸索阶段，尚未形成系统的知识体系。本文的核心目的是演示如何实现项目的前后端分离架构。

此处假设您的计算机已预先安装好Django和Vue.js环境。若尚未安装，请参考后文关于Vue.js的安装流程。关于Django的安装，鉴于此前已有相关介绍，此处不再赘述。

一、标准前后端分离项目搭建流程

1. 创建Django项目

执行以下命令：

django-admin startproject ulb_manager

生成的目录结构如下：

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

2. 进入项目根目录，创建用于后端逻辑的App

执行以下命令：

cd ulb_manager
python manage.py startapp backend

此时的目录结构相比基础版本，多出了一个backend文件夹。

3. 利用vue-cli创建Vue.js项目作为前端部分

执行以下命令：

vue-init webpack frontend

界面交互如下：

Project name:（直接按回车键使用默认值）

Project description：（直接按回车键使用默认值）

Auther：（输入您的姓名，可随意填写）

...：（保持默认选项Yes并按回车键。由于笔者处于入门阶段，对部分选项理解有限且未查询到相关说明，因此全部选择默认或Yes。）

目录结构中新增了一个frontend文件夹。

结构总结：

项目根目录下新增了两个文件夹：backend和frontend。其中，backend为Django的一个App，frontend为Vue.js项目。

4. 使用Webpack打包Vue.js项目

执行以下命令：

cd frontend
npm install
npm run build

5. 利用Django的通用视图TemplateView

在项目根目录下的urls.py（即ulb_manager/urls.py）中，使用通用视图创建最基础的模板控制器。

代码如下：

urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^$',TemplateView.as_view(template_name="index.html")),
  #url(r'^api/',include('backend.urls', namespace='api'))
  #最后一行代码我注释掉，因为运行报错：Error:No module named 'backend.urls',暂时解决不掉，但是我运行的时候，注释掉这行代码，是能正常运行的。
]

6. 配置Django项目的模板搜索路径

打开settings.py（即ulb_manager/settings.py），定位到TEMPLATES配置项，并按以下方式修改：

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

注：在之前学习Django时，需要在settings.py的INSTALLED_APPS配置项中添加App名称，因此笔者在此处也添加了'backend'。

7. 配置静态文件搜索路径

打开settings.py（ulb_manager/settings.py），定位到STATICFILES_DIRS配置项，并按以下方式配置：

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

若该配置项不存在，请手动添加。

至此，运行Django项目即可正常启动。运行后的界面如下：

运行界面

二、Vue.js环境安装指南

若您的计算机未安装Vue.js，请参考以下安装步骤：

1. Node.js

Vue.js推荐的运行环境为Node.js，因此笔者首先安装了Node.js。

访问Node.js官网，下载最新的v6.11.1版本。

2. npm

npm已集成于Node.js中，无需单独安装。

3. cnpm

在命令行中输入以下命令：

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

等待安装过程完成。

4. 安装vue-cli脚手架构建工具

在命令行中输入以下命令：

npm install -g vue-cli

等待安装结束。

至此，vue-cli安装完毕。

注：目前尚不清楚如何在Markdown中展示文件的目录树结构。

内容有所调整，因为完全照搬原版代码无法直接运行。笔者编写了一个最基础的框架，过程如同无头苍蝇般摸索（此外，由于负担不起云主机费用，新手阶段确实无需购买）。

使用Markdown感觉十分自由，且能够调用部分HTML指令，颇具趣味。尽管笔者尚未完全掌握其能调用的所有指令范围……

以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家多多支持本站。