u
本教程是一个面向新手的前后端分离模式开发个人博客的教程，目的是快速搭建现代化的个人博客网站。
教程基于 Django 3 和 Vue 3 。
于 Win 10 系统开发。用 Mac 或 Linux 也 OK。
学习本教程需要：
总之，本教程的面向人群：掌握 Django 基础和 Javascript 语法基础的入门开发者。
如果你是老读者，那么应该已经看过我的 Django 传统开发入门教程了：
微信公众号也同步更新，搜“杜赛说编程”即可。
恭喜你，后端章节的 Python 和 Django 部分的基础知识就足够了。没看过的读者可以先浏览一遍（重点看 Model 和 View 部分，Template 可以适当跳过）。
Python
Django
本教程的重点在于介绍前后端分离开发，因此不会深究 Django 的基础知识。
前端章节你需要预先学习 Javascript 语法基础，推荐读物如下：
Javascript
除此之外，如果你能浏览一遍 Vue 3的官方指南就更好了。
准备好以上知识储备后，你就可以继续阅读本教程了。
有的读者喜欢边学边查，这样也可以，请根据自身习惯调整。
一个人的学习是孤单的。欢迎扫码 Django 交流QQ群（107143175）、微信公众号、TG群组，和大家一起进步吧。
01 - 前言
02 - 搭建开发环境
03 - drf初识
04 - 序列化器与视图函数
05 - 基于类的视图
06 - 限制用户权限
07 - 文章关联用户
08 - 超链接与分页
09 - 视图集
10 - 过滤文章
11 - 文章分类
12 - 文章标签
13 - Markdown正文
14 - 文章标题图
15 - 评论
16 - 评论的评论
17 - JWT身份验证
18 - 用户管理
19 - 前端开发准备
20 - 文章列表
21 - 文章详情
22 - 翻页与监听
23 - 搜索文章
24 - 用户注册
25 - 用户登录
26 - 资料更新与异步
27 - 资料删除与组件通信
28 - 发表文章
29 - 文章更新与删除
30 - 标题图的提交
31 - 发布评论
32 - 组合式API
33 - 部署
34 - 结语
博客首页片段：
博客详情页片段：
首先确保你的电脑已经安装 Python 3.8 、npm 6.14 或以上的版本。
下载项目后，修改配置文件 drf_vue_blog/settings.py ：
drf_vue_blog/settings.py
# drf_vue_blog/settings.py ... # 修改为 True DEBUG = True ...
在 PowerShell 命令行中进入项目目录，并创建虚拟环境：
python -m venv venv
若上述方法不成功，则可以通过 virtualenv 库创建虚拟环境，效果相同。具体方法请搜索。
virtualenv
运行虚拟环境（Windows环境）:
venv\Scripts\activate.bat
或（Linux环境）：
source venv/bin/activate
自动安装所有依赖项：
pip install -r requirements.txt
然后进行数据迁移：
python manage.py migrate
运行后端服务器：
python manage.py runserver
新创建一个 PowerShell 命令行窗口，进入项目的 frontend/ 目录，安装前端依赖项：
frontend/
npm install
运行前端服务器：
npm run serve
至此前后端开发服务器就都启动了。
浏览器中输入地址 http://localhost:8080/ 访问博客界面，输入 http://127.0.0.1:8000/api/ 访问接口数据。
http://localhost:8080/
http://127.0.0.1:8000/api/
数据库文件 db.sqlite3 以及媒体文件夹 media 中的内容是方便读者查看示例效果而存在的。
db.sqlite3
media
管理员账号：dusai 密码：admin123456
如果你想清除所有数据及媒体文件，将它们直接删除，并运行：
python manage.py createsuperuser
即可重新创建管理员账号。
由于笔者水平有限，为避免误人子弟，特别邀请了两位资深大佬对本教程进行审稿，并提出很多宝贵的意见。
在此表示感谢：
本教程（包括且不限于文章、代码、图片等内容）遵守 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 协议。协议内容如下。
您可以自由地：
只要你遵守许可协议条款，许可人就无法收回你的这些权利。
惟须遵守下列条件：
署名 — 您必须给出适当的署名，提供指向本许可协议的链接，同时标明是否（对原始作品）作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
没有附加限制 — 您不得适用法律术语或者技术措施从而限制其他人做许可协议允许的事情。
适当的署名：您必须提供创作者和署名者的姓名或名称、版权标识、许可协议标识、免责标识和作品链接。 商业目的：主要目的为获得商业优势或金钱回报。
适当的署名：您必须提供创作者和署名者的姓名或名称、版权标识、许可协议标识、免责标识和作品链接。
商业目的：主要目的为获得商业优势或金钱回报。
©Copyright 2023 CCF 开源发展委员会 Powered by Trustie& IntelliDE 京ICP备13000930号
Django-Vue 搭建博客教程
本教程是一个面向新手的前后端分离模式开发个人博客的教程，目的是快速搭建现代化的个人博客网站。
教程基于 Django 3 和 Vue 3 。
教程特点
适合人群
学习本教程需要：
总之，本教程的面向人群：掌握 Django 基础和 Javascript 语法基础的入门开发者。
如果你是老读者，那么应该已经看过我的 Django 传统开发入门教程了：
恭喜你，后端章节的
Python和Django部分的基础知识就足够了。没看过的读者可以先浏览一遍（重点看 Model 和 View 部分，Template 可以适当跳过）。前端章节你需要预先学习
Javascript语法基础，推荐读物如下：除此之外，如果你能浏览一遍 Vue 3的官方指南就更好了。
准备好以上知识储备后，你就可以继续阅读本教程了。
加入社区
一个人的学习是孤单的。欢迎扫码 Django 交流QQ群（107143175）、微信公众号、TG群组，和大家一起进步吧。
教程导航
01 - 前言
02 - 搭建开发环境
03 - drf初识
04 - 序列化器与视图函数
05 - 基于类的视图
06 - 限制用户权限
07 - 文章关联用户
08 - 超链接与分页
09 - 视图集
10 - 过滤文章
11 - 文章分类
12 - 文章标签
13 - Markdown正文
14 - 文章标题图
15 - 评论
16 - 评论的评论
17 - JWT身份验证
18 - 用户管理
19 - 前端开发准备
20 - 文章列表
21 - 文章详情
22 - 翻页与监听
23 - 搜索文章
24 - 用户注册
25 - 用户登录
26 - 资料更新与异步
27 - 资料删除与组件通信
28 - 发表文章
29 - 文章更新与删除
30 - 标题图的提交
31 - 发布评论
32 - 组合式API
33 - 部署
34 - 结语
教程快照
博客首页片段：
博客详情页片段：
运行示例代码
首先确保你的电脑已经安装 Python 3.8 、npm 6.14 或以上的版本。
下载项目后，修改配置文件
drf_vue_blog/settings.py：在 PowerShell 命令行中进入项目目录，并创建虚拟环境：
运行虚拟环境（Windows环境）:
或（Linux环境）：
自动安装所有依赖项：
然后进行数据迁移：
运行后端服务器：
新创建一个 PowerShell 命令行窗口，进入项目的
frontend/目录，安装前端依赖项：运行前端服务器：
至此前后端开发服务器就都启动了。
浏览器中输入地址
http://localhost:8080/访问博客界面，输入http://127.0.0.1:8000/api/访问接口数据。数据库文件
db.sqlite3以及媒体文件夹media中的内容是方便读者查看示例效果而存在的。管理员账号：dusai 密码：admin123456
如果你想清除所有数据及媒体文件，将它们直接删除，并运行：
即可重新创建管理员账号。
致谢
由于笔者水平有限，为避免误人子弟，特别邀请了两位资深大佬对本教程进行审稿，并提出很多宝贵的意见。
在此表示感谢：
许可协议
本教程（包括且不限于文章、代码、图片等内容）遵守 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 协议。协议内容如下。
您可以自由地：
只要你遵守许可协议条款，许可人就无法收回你的这些权利。
惟须遵守下列条件：
署名 — 您必须给出适当的署名，提供指向本许可协议的链接，同时标明是否（对原始作品）作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
没有附加限制 — 您不得适用法律术语或者技术措施从而限制其他人做许可协议允许的事情。