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前端框架使用的朋友们

项目展示

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

标签