Vue+Vite+ElementPlus+Django REST framework前后端分离项目实战

课程老师

王进（iLync）Python开发讲师教学风格独特，以学员视角出发设计课程，难易适度，重点突出，架构清晰，将实战经验融合到教学中。讲授技术同时传递方法。得到广大学员的高度认可。

课程大纲

01.课程总体介绍（5节）

1.前后端分离项目–学生管理系统总体介绍

2.Studentv5.0—课程PPT2.9MB  |  pptx文件

3.StudentV5.0—数据库脚本文件24.0KB  |  sql文件

4.StudentV5.0 — 前台源码91.4KB  |  rar文件

5.StudentV5.0 — 后台源码0.8MB  |  rar文件

02.后端项目实现和Django REST Framework快速实现（4节）

1.创建后端项目2.后端restful的接口规范3.Drf的安装和快速实现4.DRF增删改的接口测试

03.实现Django REST Framework的过滤和查找接口（3节）

1.DRF中实现筛选试学2.DRF中筛选的优化3.DRF中实现搜索

04.实现Django REST Framework的分页（1节）

1.DRF中实现分页

05.使用Swagger实现后台项目接口的自动化文档（1节）

1.自动化生成API文档

06.使用Vite构建Vue3的项目（4节）

1.使用Vite构建Vue3的项目

2.使用Vite构建Vue3的项目

3.Package.json文件

4.页面如何加载

07.Vue3项目使用ElementPlus前端UI（1节）

1.使用ElementPlus

08.使用vue-router实现路由（2节）

1.使用vue-router

2.vue-router的案例演示

09.学生管理系统后台主界面框架搭建（6节）

1.学生管理系统后台主界面框架搭建

2.添加侧边栏的Logo部分

3.动态生成侧边栏菜单

4.为侧边栏菜单加图标

5.Header区域的基本布局

6.侧边栏收缩的思路分析

10.使用Vuex实现组件间的传值（2节）

1.vuex安装和store对象的创建、注册

2.完成侧边栏收缩的功能

11.完成侧边栏收缩的功能（1节）

1.实现侧边栏的导航

12.捕获路由信息自动生成面包屑导航（1节）

1.自动生成面包屑导航

13.学生信息页面的布局（3节）

1.学生信息页面布局(1)

2.学生信息页面布局(2)

3.配置Element Plus国际化

14.前台跨域获取后台接口数据并展示（2节）

1.跨域获取所有学生信息

2.优化学生信息的展示

15.Axios请求的模块化(上)：request脚本和Api接口实现（2节）

1.模块化axios请求

2.模块化axios请求

16.案例演示：实现院系信息和专业信息联级下拉框（1节）

1.实现院系信息和专业信息填充到下拉框

17.Axios请求的模块化(中)：使用面向对象的思维优化Api接口（1节）

18.案例演示：实现院系信息和专业信息的数据的过滤（1节）

1.实现查询和显示全部的功能

19.配置Vue实例的全局引入（1节）

1.配置全局变量

20.Axios请求的模块化(下)：请求拦截器和响应拦截器（1节）

1.模块化Axios请求(4)

21.完成学生信息弹出层的布局和数据填充（4节）

1.完成学生信息弹出层的布局和数据填充

2.优化弹出层的展示

3.三种状态加载弹出层

4.填充数据到弹出层

22.使用Cascader 级联选择器实现院系信息和专业信息的选择（1节）

1.使用级联选择器展示学院和专业信息

23.表单提交前的校验（2节）

1.表单提交前的校验

2.校验学号是否存在

24.实现学生信息的增删改（3节）

1.完成学生的添加

2.完成学生的修改

3.完成学生的删除

25.实现学生头像的上传和展示（4节）

1.上传图片的基本介绍

2.完成图片上传的后台接口

3.上传图片的功能添加到api

4.完成图片上传的功能

26.课程总结（1节）

课程详情

本季课程把开发知识拆解到项目里，让你在项目情境里学知识。这样的学习方式能让你保持兴趣、充满动力，时刻知道学的东西能用在哪、能怎么用。平时不明白的知识点，放在项目里去理解就恍然大悟了。

一、融汇贯通

本视频采用了前后端分离的开发模式，前端使用Vue.js+Element UI实现了Web页面的呈现，后端使用Python 的Django REST Framework框架实现了数据访问的接口，前端通过Axios访问后端接口获得数据。在学习完本章节后，真正理解前后端的各自承担的工作。

二、贴近实战

本课程为学生信息管理系统课程：Vue3 + Vite + ElementPlus + Django REST Framework项目实战本季课程主学生信息管理系统V5.0，内容包含：Django REST framework安装和项目初始化、数据的序列化、ViewSet视图集、DefaultRouter路由类、django-filter实现过滤、rest framework实现查找、rest framework实现分页、npm的使用、使用Vite构建vue3项目、Package.json解析、ElementPlus安装和应用、vue-router实现路由、使用Vuex的store对象、后台管理系统主界面的布局、axios组件的安装和请求、axios请求的模块化、请求拦截器和响应拦截器、使用el-select实现联级下拉、使用cascader实现联级选择、vue表单的验证、实现学生信息的添加、修改和删除、实现文件的上传等等功能本案例完整的演示了项目实现过程，虽然不复杂，但涉及的内容非常多，特别是前后端交互的时候，有诸多的坑等着你去踩，好在王老师全程代码呈现，带着大家一起填坑，大大提高学习效率的同时，也培养了大家良好的代码习惯，希望大家一起跟着王进老师学习Python开发。

适合人群：

1、有Python语言基础、web前端基础，想要深入学习Python Web框架的朋友；2、有Django基础，但是想学习企业级项目实战的朋友；3、有MySQL数据库基础的朋友4、希望进一步熟悉VUE前端框架使用的朋友们

项目展示