Vue+Vite+Element+DRF前后端分离项目实战:学生管理系统V5.0
课程详情
课程标题:Vue+Vite+Element+DRF前后端分离项目实战:学生管理系统V5.0
本课程旨在帮助学员深入理解前后端各自承担的工作,通过实战项目掌握Vue前端框架、Vite构建工具、Element UI组件库以及Django Rest Framework(DRF)后端框架的使用。
- 适合人群:
- 具备Python语言基础和web前端基础的学习者
- 希望深入学习VUE前端框架和Python Web框架的开发者
学习收获:
- 熟练掌握Vue+Vite+Element+DRF技术栈
- 理解前后端分离的架构设计
- 具备独立开发前后端分离项目的实战能力
课程亮点:
- 实战项目驱动,从零开始构建学生管理系统V5.0
- 深入讲解Vue、Vite、Element UI和DRF的核心概念和用法
- 结合实际业务场景,提升项目开发效率
课程目录
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 本课程内容总结






