补齐前后端“各干各”的认知缺口

很多初学者卡在 Web 开发上，不是因为语法不会，而是搞不清后端和前端到底谁该干什么。这门课专门解决这个问题。它不单独讲 Django 也不单独讲 Vue，而是通过一个完整的学生管理系统，让你看到数据是怎么从数据库流向页面，再怎么被用户操作写回去的。

如果你之前学后端时只记得写 API，学前端时只记得调接口，但合在一起就不知道错在哪，那这门课就是给你准备的。它把抽象的“前后端分离”拆解成具体的步骤：后端怎么建项目、怎么定义接口规范、DRF 怎么快速实现增删改查；前端怎么配合这些接口工作。看完你会清楚，后端负责数据和规则，前端负责展示和交互，两边通过接口对话，互不干扰。

适合有基础但缺实战的你

课程明确要求你有 Python 语言和 Web 前端的基础。这不是劝退，而是提醒：如果你连 Python 的函数、类都不熟，或者 HTML、CSS、JavaScript 只会一点点，直接进前后端分离的项目会非常吃力。课程假设你已经能看懂基本代码，现在需要的是把它们串起来。

特别适合那些“学过 Django 又学过 Vue，但没做过一个完整项目”的人。平时看教程觉得都懂，一旦自己搭环境、配接口、联调，就到处报错。这门课的价值在于，它把一个真实项目的开发流程走一遍，让你在出错的地方停下来，搞清楚为什么。

建议先看第 1 章的总体介绍，建立全局观，知道整个系统长什么样。然后重点看第 2 章的后端部分，尤其是 DRF 的快速实现和接口规范这两节。这几节讲清楚了后端怎么快速搭起来、接口长什么样，这是后续所有开发的基础。如果跳过这部分，后面看前后端怎么对接时会很迷糊。

学完能独立做什么

完成这门课，你应该能独立搭建一个前后端分离的小型 Web 项目。具体来说，你能用 Django 配合 DRF 快速创建提供 RESTful 接口的后端，也能用 Vue3 构建对应的页面，并让两者正确通信。对于学生管理这种典型业务，你不再需要到处搜教程拼凑代码，而是知道每一步该做什么、为什么这么做。

资料包里的代码和配置请跟着视频动手敲，不要只看不练。Web 开发是手感活，复制粘贴来的代码永远不是你的。遇到报错是正常的，对照着检查每一行，这才是真正涨功夫的时候。课程没有承诺帮你找工作，但它给了你一把钥匙——前后端分离项目的开发思路。剩下能不能打开门，看你自己的练习量。

课程介绍

web6.png 2023-3-14 18:18 上传 适合人群： 有Python语言基础、web前端基础，想要深入学习VUE前端框架、Python Web框架的朋友 你将会学到： 理解前后端的各自承担的工作 课程简介： 本季课程把开发知识拆解到项目里，让你在项目情境里学知识。 这样的学习方式能让你保持兴趣、充满动力，时刻知道学的东西能用在哪、能怎么用。 平时不明白的知识点，放在项目里去理解就恍然大悟了。 课程目录： 第1章Vue3和Django前后端分离项目总体介绍(19分钟1节) 1-1课程总体介绍[19:57] 第2章后端项目创建和DRF的快速实现(1小时20分钟4节) 2-1后端项目创建和初始化[20:46] 2-2后端restful的接口规范介绍[22:15] 2-3DRF安装和快速实现[24:29] 2-4DRF增加、修改、删除、获取所有

课程目录

web6.png   2023-3-14 18:18 上传 适合人群： 有Python语言基础、web前端基础，想要深入学习VUE前端框架、Python Web框架的朋友 你将会学到： 理解前后端的各自承担的工作 课程简介： 本季课程把开发知识拆解到项目里，让你在项目情境里学知识。 这样的学习方式能让你保持兴趣、充满动力，时刻知道学的东西能用在哪、能怎么用。 平时不明白的知识点，放在项目里去理解就恍然大悟了。 课程目录：
第1章Vue3和Django前后端分离项目总体介绍(19分钟1节) 1-1课程总体介绍[19:57]
第2章后端项目创建和DRF的快速实现(1小时20分钟4节) 2-1后端项目创建和初始化[20:46] 2-2后端restful的接口规范介绍[22:15] 2-3DRF安装和快速实现[24:29] 2-4DRF增加、修改、删除、获取所有、获取单个接口测试[12:52]
第3章实现DRF接口的过滤和查找功能(34分钟3节) 3-1DRF接口中实现过滤[12:58] 3-2DRF接口过滤的优化[11:15] 3-3DRF接口实现查找[09:55]
第4章实现DRF接口的分页功能(9分钟1节) 4-1DRF接口的分页[09:47]
第5章使用Swagger自动生成DRF接口文档(16分钟1节) 5-1Swagger自动生成DRF的API文档[16:22]
第6章使用Vite构建Vue3的项目(1小时5分钟4节) 6-1使用Vite构建Vue3项目[14:27] 6-2Vue3项目目录的介绍[13:35] 6-3Package.json文件介绍[17:12] 6-4Vue3的页面加载过程介绍[19:47]
第7章Vue3中安装和加载ElementPlus(10分钟1节) 7-1Vue3中使用ElementPlus[10:06]
第8章Vue3中的路由组件vue-router(29分钟2节) 8-1Vue3中安装和使用vue-router[13:15] 8-2Vue3中路由的案例演示[16:14]
第9章学生管理系统后台主界面框架搭建(1小时50分钟6节) 9-1后台管理系统主界面总体框架搭建[20:17] 9-2为主界面的侧边栏添加Logo[15:49] 9-3动态生成侧边栏菜单[28:11] 9-4为侧边栏添加icon图标[14:02] 9-5布局后台主界面的Header区域[17:28] 9-6实现侧边栏收缩的思路分析[14:48]
第10章使用Vuex实现组件间的传值(27分钟2节) 10-1vuex安装和store对象的创建、注册[10:17] 10-2完成侧边栏收缩的功能[17:40]
第11章使用vue-router实现侧边栏导航(18分钟1节) 11-1使用vue-router实现侧边栏的导航[18:52]
第12章捕获路由信息自动生成面包屑导航(20分钟1节) 12-1实现面包屑导航的自动生成[20:32]
第13章学生信息页面的布局(59分钟3节) 13-1学生信息页面布局(1)[21:34] 13-2学生信息页面布局(2)[35:34] 13-3配置Element Plus的国际化[02:29]
第14章前台跨域获取后台接口数据并展示(48分钟2节) 14-1跨域获取所有学生信息并展示在表格[29:45] 14-2优化学生信息在表格的展示[18:46]
第15章Axios请求的模块化(上)：request脚本和Api接口(23分钟2节) 15-1模块化axios请求01：request.ts[08:00] 15-2模块化axios请求02：API接口[15:55]
第16章案例演示：实现院系信息和专业信息联级下拉框(12分钟1节) 16-1实现院系信息和专业信息填充到下拉框[12:23]
第17章Axios请求的模块化(中)：使用面向对象的思维优化Api(15分钟1节) 17-1使用面向对象的思维模块化API接口[15:39]
第18章案例演示：实现院系和专业信息的数据过滤(16分钟1节) 18-1实现学生信息查询和显示全部的功能[16:45]
第19章配置Vue实例的全局引入(7分钟1节) 19-1配置Vue3的全局对象及组件中引入[07:38]
第20章Axios请求的模块化(下)：请求拦截器和响应拦截器(18分钟1节) 20-1请求拦截器和响应拦截器[18:23]
第21章完成学生信息弹出层的布局和数据填充(53分钟4节) 21-1完成学生信息的弹出层页面[09:31] 21-2优化学生详情弹出层的展示[18:56] 21-3三种状态加载弹出层[11:31] 21-4填充数据到弹出层[13:48]
第22章使用Cascader 级联选择器实现院系信息和专业信息的选择(25分钟1节) 22-1使用级联选择器展示学院和专业信息[25:03]
第23章表单提交前的校验(29分钟2节) 23-1表单提交前的校验[20:21] 23-2校验学号是否存在[09:24]
第24章实现学生信息的增删改(38分钟3节) 24-1完成学生的添加[20:17] 24-2完成学生的修改[09:59] 24-3完成学生的删除[07:52]
第25章实现学生头像的上传和展示(46分钟4节) 25-1上传图片的基本介绍[07:52] 25-2完成图片上传的后台接口[18:51] 25-3上传图片的功能添加到api[04:15] 25-4完成图片上传的功能[15:49]
第26章课程总结(12分钟1节) 26-1本课程内容总结开始学习