本教程是一个面向入门者的前后端分离模式开发个人博客的教程，目的是快速搭建现代化的个人博客网站。

教程基于 Django 3 和 Vue 3。

于 Win 10 系统开发。用 Mac 或 Linux 也 OK。

什么是 Django/Vue

Django 是一个由 Python 写成的开源 Web 后端框架，你可以用它以更高的效率、更少的代码，搭建高性能的网站。

具体来说，本教程主要讲解基于 Django 的库：django rest framework。

Vue 是一个组件化、现代化的前端框架。相比其他主流前端框架，它上手平缓且功能强大。从 Vue 3 开始支持组合式 API 等重要新功能，使得 Vue 在处理从微型到大型项目都更加得心应手。

正是由于 Django 和 Vue 均易于学习、功能强大、相性佳，因此非常适合作为前后端分离开发的搭档，是新手快速上线自己的个性化网站的绝佳选择。

什么是前后端分离

传统的开发协作模式一般是这样的：

  • 前端写好静态的HTML页面交付给后端开发。
  • 后端使用模板引擎去套模板，同时内嵌模板变量和逻辑。
  • 前后端集成对接，遇到问题前台后台都返工。
  • 集成调试，直至成功。

这种模式的问题在于：

  • 前端调试要安装完整的后端开发工具，并且遇到问题需要后端开发帮忙调试。
  • 前后端耦合，甚至还要求后端人员会 Javascript 等前端语言。
  • 前端页面里嵌入后端的代码，一旦后端换了语言，简直就要重做。

对于大项目来说，这样的模式增加了沟通成本，前后端的开发进度相互影响，从而降低了开发效率。

而在前后端分离模式下，前端和后端只通过简单的接口（API）进行数据交流，而不用像模板将数据藏在某个 div 里。前后端工程师约定好数据接口，并行开发互不影响。即使其中一方的需求发生变更，只要接口不变，对方就不需要更改代码。

前后端分离模式摆脱了笨重的模板引擎，是当前 web 开发的大趋势之一，花时间学了绝对不亏。

教程特点

  • 教程全中文、全免费
  • 代码、教程全开源
  • 基于 Django 3 和 Vue 3

开发环境

教程用到的环境如下：

  • 后端：Django 3.1.3
  • 前端：Vue 3
  • 系统：Win 10

读者学习时保持大版本号相同就没太大问题，即 Django 3 和 Vue 3 即可。

面向人群

学习本教程需要一定的基础：

  • 具备 Django 传统开发基础知识
  • 具备 Javascript 语法基础知识

总之，本教程的面向人群：掌握 Django 基础和 Javascript 语法基础的入门开发者。

如果你是老读者，那么应该已经看过我的 Django 传统开发入门教程了：

微信公众号也同步更新，搜“杜赛说编程”即可。
PythonDjango
本教程的重点在于介绍前后端分离开发，因此不会深究 Django 的基础知识。
Javascript

除此之外，如果你能浏览一遍 Vue 3的官方指南就更好了。

准备好以上知识储备后，你就可以继续阅读了。

有的读者喜欢边学边查，这样也可以，请根据自身习惯调整。

资源列表

本教程的代码托管在 Github：django-vue-tutorial

建议读者将代码克隆到本地，作为学习过程的参照，也感谢你顺手给一个 Star。

学习过程中需要经常查询的文档有：

加入社区

一个人的学习是孤单的。欢迎扫码 Django 交流QQ群、公众号、TG群组，和大家一起进步吧。



致谢

由于笔者水平有限，为避免误人子弟，特别邀请了两位资深大佬对本教程进行审稿，并提出很多宝贵的意见。

在此表示感谢：

开始你的表演

说了这么多，相信你已经迫不及待了。让我们赶紧开始旅程吧！

许可协议

本教程（包括且不限于文章、代码、图片等内容）遵守 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 协议。协议内容如下。

您可以自由地：

  • 共享 — 在任何媒介以任何形式复制、发行本作品。
  • 演绎 — 修改、转换或以本作品为基础进行创作。

只要你遵守许可协议条款，许可人就无法收回你的这些权利。

惟须遵守下列条件：

  • 署名 — 您必须给出适当的署名，提供指向本许可协议的链接，同时标明是否（对原始作品）作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可人为您或您的使用背书。
  • 非商业性使用 — 您不得将本作品用于商业目的。
  • 没有附加限制 — 您不得适用法律术语或者技术措施从而限制其他人做许可协议允许的事情。
适当的署名：您必须提供创作者和署名者的姓名或名称、版权标识、许可协议标识、免责标识和作品链接。
商业目的：主要目的为获得商业优势或金钱回报。