如果你已经能写一些 Python,也大致看得懂 HTML、CSS 和 JavaScript,但一到“前后端怎么配合”就卡住,这门课值得先了解一下。它用一套学生管理系统把 Vue 3、Vite、Element Plus 和 Django REST Framework 串起来,重点不在讲语法,而在讲一个请求从页面发出、到后端处理、再回到页面刷新的完整过程。
它解决的是“会写页面,但接不上后端”的问题
很多人学前端时照着文档能做出静态页面,学 Django 时也能跟着教程建模型、写视图,可一旦要把两边连起来,问题就集中出现:接口地址写在哪、跨域怎么处理、Token 怎么带、分页和搜索参数怎么传、后端返回的错误前端怎么提示。这门课围绕学生管理系统展开,把增删改查、登录鉴权、列表分页、条件筛选这些常见场景逐个落地。你学到的不是孤立的 API 用法,而是一套前后端约定接口、各自实现、联调排错的做事方式。
学完能独立做出什么
按课程推进,最终可以独立完成一个带登录、带权限控制、带数据表格和表单校验的管理后台。具体来说,前端部分能自己组织 Vue 组件、配置 Vite 开发代理、用 Element Plus 搭建表格与弹窗表单;后端部分能用 DRF 定义序列化器、视图集和路由,处理认证与权限。更重要的是,你能说清楚哪些逻辑该放在前端、哪些必须由后端兜底,而不是把校验和业务规则随意堆在某一层。这个判断力,比记住某个组件的属性更有迁移价值。
资料适合什么基础的人
- 适合:学过 Python 基础语法,能写简单的 Django 视图;前端方面了解变量、函数、数组操作,看得懂基本的 DOM 和事件。不要求你之前用过 Vue 或 DRF,课程会从项目搭建讲起。
- 不太适合:完全没有编程经验,或者只想学 Vue 单点知识、不关心后端怎么配合的人。课程是前后端一起推进的,跳过任何一侧都会影响联调环节的理解。
- 需要留意:如果对 JavaScript 的异步请求、箭头函数、解构赋值完全陌生,建议先补一下这部分,否则在接口调用和数据处理处容易卡住。
怎么用这套资料效率更高
建议不要按“先看完前端再看完后端”的顺序学。前后端分离项目的难点在衔接,最好跟着章节节奏,前端写到调用接口时,立刻去后端把对应接口实现出来,然后马上联调。遇到报错先自己看浏览器网络面板和后端日志,再对照讲解,这样排错经验才留得住。每完成一个模块,可以试着把“学生”换成“课程”或“订单”,自己改一遍模型和接口,检验是否真的理解结构,而不是只记住了操作步骤。
整体来看,这是一门以项目串联技术栈的实战课,价值集中在“把两边接通”这件事上。如果你正缺一个完整项目来打通前后端协作的流程,它可以作为参考;如果你已经独立做过类似管理后台,只是想把某一块替换成 Vue 3 或 Vite,那么按需查看对应章节即可,不必从头跟做。
课程目录
课程目录61 条
- 01 Vue3和Django前后端分离项目总体介绍
- 01 课程总体介绍
- 02 后端项目创建和DRF的快速实现
- 01 后端项目创建和初始化
- 02 后端restful的接口规范介绍
- 03 DRF安装和快速实现 04 DRF增加、修改、删除、获取所有、获取单个接口测试
- 03 实现DRF接口的过滤和查找功能
- 01 DRF接口中实现过滤
- 02 DRF接口过滤的优化
- 03 DRF接口实现查找
- 04 实现DRF接口的分页功能
- 01 DRF接口的分页
- 05 使用Swagger自动生成DRF接口文档
- 01 Swagger自动生成DRF的API文档 06 使用Vite构建Vue3的项目 01 使用Vite构建Vue3项目 02 Vue3项目目录的介绍
- 03 Package.json文件介绍 04 Vue3的页面加载过程介绍 07 Vue3中安装和加载ElementPlus 01 Vue3中使用ElementPlus 08 Vue3中的路由组件vue-router 01 Vue3中安装和使用vue-router 02 Vue3中路由的案例演示
- 09 学生管理系统后台主界面框架搭建
- 01 后台管理系统主界面总体框架搭建
- 02 为主界面的侧边栏添加Logo
- 03 动态生成侧边栏菜单
- 04 为侧边栏添加icon图标
- 05 布局后台主界面的Header区域
- 06 实现侧边栏收缩的思路分析
- 10 使用Vuex实现组件间的传值
- 01 vuex安装和store对象的创建、注册
- 02 完成侧边栏收缩的功能
- 11 使用vue-router实现侧边栏导航
- 01 使用vue-router实现侧边栏的导航
- 12 捕获路由信息自动生成面包屑导航
- 01 实现面包屑导航的自动生成
- 13 学生信息页面的布局 01 学生信息页面布局(1) 02 学生信息页面布局(2)
- 03 配置Element Plus的国际化
- 14 前台跨域获取后台接口数据并展示
- 01 跨域获取所有学生信息并展示在表格
- 02 优化学生信息在表格的展示 15 Axios请求的模块化(上):request脚本和Api接口 01 模块化axios请求01:request.ts 02 模块化axios请求02:API接口
- 16 案例演示:实现院系信息和专业信息联级下拉框
- 01 实现院系信息和专业信息填充到下拉框 17 Axios请求的模块化(中):使用面向对象的思维优化Api
- 01 使用面向对象的思维模块化API接口
- 18 案例演示:实现院系和专业信息的数据过滤
- 01 实现学生信息查询和显示全部的功能
- 19 配置Vue实例的全局引入 01 配置Vue3的全局对象及组件中引入 20 Axios请求的模块化(下):请求拦截器和响应拦截器
- 01 请求拦截器和响应拦截器
- 21 完成学生信息弹出层的布局和数据填充
- 01 完成学生信息的弹出层页面
- 02 优化学生详情弹出层的展示
- 03 三种状态加载弹出层
- 04 填充数据到弹出层
- 22 使用Cascader 级联选择器实现院系信息和专业信息的选择
- 01 使用级联选择器展示学院和专业信息
- 23 表单提交前的校验
- 01 表单提交前的校验
- 02 校验学号是否存在
- 24 实现学生信息的增删改
- 01 完成学生的添加
- 02 完成学生的修改
- 03 完成学生的删除
- 25 实现学生头像的上传和展示
- 01 上传图片的基本介绍
- 02 完成图片上传的后台接口
- 03 上传图片的功能添加到api
- 04 完成图片上传的功能
- 26 课程总结 01 本课程内容总结






