django vue前后端分离

django vue前后端分离

---

1. 前言

本篇基于Python 3.7 + Django 3.0 + Vue.js。

1.1. 什么是前后端分离

什么是前端/后端
通常而言的前端指浏览器端，一般用Html+CSS+JS实现，所以引申为用Html+CSS+JS写的大部分程序都是前端，包括App，小程序，H5等。

NodeJS出现后，用NodeJS写的后端部分，也被归类为前端，为了区分之前的前端，给他们重命名为大前端。

久而久之，人们习惯把Html+CSS+JS，运行在浏览器端执行的，称之为前端。
而Java，C，Python，PHP这些运行在服务器端的，统一称之为后端。

但，这种以语言为分界点去区分前后端，真的合理么？显然不合理！
前后端的定义，不应该是以语言来定义，而是应该以它的运行环境，如果是在服务器端，就应该被称之为后端，代表着你看不见，摸不着。而如果运行在用户端，就应该被称之为前端，代表你是可以看得到的。
在不分前后端的时候，无论是Java还是JS，全都是一个人来写。

前后端分离能带来哪些优势？
第一个，并行开发、独立部署、实现前后端解耦；在前后端不分离的情况下，项目代码耦合严重相互影响，且前后端人员工作量分布不均。

第二个，术业有专攻（开发人员分离），以前的JavaWeb项目大多数都是Java程序员又当爹又当妈，又搞前端，又搞后端。前后端分离之后，前端工程师只管前端的事情，后端工程师只管后端的事情。

一个Web系统在前后端不分离时架构设计如下图：

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

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

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

1.2. 小结，前后端分离是什么？

前后端分离是一种架构模式/最佳实践，它将前端开发人员和后端开发人员的工作进行解耦，尽量减少两者之间的交流成本，各自专注于自己擅长的工作。
简单来说，前后端分离之前html主要由服务器端生成；
分离后html主要在浏览器端组合，服务器端更多的的是返回基础html页面，js脚本，json数据等。或者说把django中模板解释器的主要工作交由前端处理；具体到实现工具/方法上就是ajax,json,jwt等。

案例：

上例中的网页内容完全由js向后端请求加载。