优质文章，第一时间送达！

752282de36f6b1333cb32e01925d28d9.png

学习全文大概需要 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 系统，在前后端不分离时架构设计是什么样的。

27d88e0c0e366697f0917c155b7ae57c.png

用户在浏览器上发送请求，服务器端接收到请求，根据 Header 中的 token 进行用户鉴权，从数据库取出数据，处理后将结果数据填入 HTML 模板，返回给浏览器，浏览器将 HTML 展现给用户。

而采用前后端分离之后，分离的是人员职责，人员职责分离了，因此架构也发生变化。

ca4e3b8cb775a3ab32b77e8f730d3593.png

前后端分离后，前端人员和后端人员约定好接口，前端人员不用再关心业务处理是怎么回事，他只需要把界面做好就可以了，后端人员也不用再关系前端界面是什么样的，他只需要做好业务逻辑处理即可。

小结一下，前后端分离是什么？

前后端分离是一种架构模式，或者说是最佳实践，它主张将前端开发人员和后端开发人员的工作进行解耦，尽量减少他她们之间的交流成本，帮助他她们更能专注于自己擅长的工作。

PS: 本篇实战示例，使用Vue.js作为前端框架，代替Django本身自带的模板引擎，Django则作为服务端提供API接口，从而实现前后端分离。

3. 环境准备

本实战示例，基础环境对应安装版本如下：

  • Python 3.7.4

  • Mysql 5.7

  • Pycharm (建议专业版)

  • Node

PS: 其中Python、Mysql、Pycharm、Node安装过程皆较为简单，不是本文介绍重点，读者可直接参考官网安装方法。

4. 新建独立的虚拟开发环境

1、创建一个用于Django项目开发的独立虚拟环境，切换到本地开发目录，输入如下命令：

python3 -m venv venv

2、创建完成后，目录结构如下：

➜ venv tree -L 2.├── bin│ ├── activate│ ├── activate.csh│ ├── activate.fish│ ├── easy_install│ ├── easy_install-3.7│ ├── pip│ ├── pip3│ ├── pip3.7│ ├── python -> python3│ └── python3 -> /usr/local/bin/python3├── include├── lib│ └── python3.7└── pyvenv.cfg4 directories, 11 files

3、进入到bin目录，输入命令source activate 命令，激活虚拟环境。

1fde06b59cec9cff8799b743f8a79bd6.png

4、虚拟环境激活后，如上图所示。接下来，在虚拟环境安装Django库。

安装Django (最新版本为3.0)

(venv) ➜ pip install Django

Django 项目源码：

https://github.com/django/django

Django3.0 版本特性可查阅官网：

https://docs.djangoproject.com/en/3.0/releases/3.0/

5、安装完成后，可检查一下版本信息：

(venv) ➜ pythonPython 3.7.4 (default, Jul 9 2019, 18:15:00)[Clang 10.0.0 (clang-1000.11.45.5)] on darwinType "help