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 本课程内容总结