Vue+Vite+Element+DRF前后端分离项目实战

Vue+Vite+Element+DRF前后端分离项目实战
共54节 1696人在学 课程详情
课程目录
讨论留言
  • 课程总体介绍

    • 前后端分离项目--学生管理系统总体介绍
  • 后端项目实现和Django REST Framework快速实现

    • 创建后端项目
    • 后端restful的接口规范
    • Drf的安装和快速实现
    • DRF增删改的接口测试
  • 实现Django REST Framework的过滤和查找接口

    • DRF中实现筛选
    • DRF中筛选的优化
    • DRF中实现搜索
  • 实现Django REST Framework的分页

    • DRF中实现分页
  • 使用Swagger实现后台项目接口的自动化文档

    • 自动化生成API文档
  • 使用Vite构建Vue3的项目

    • 使用Vite构建Vue3的项目
    • Vue3的项目目录结构
    • Package.json文件
    • 页面如何加载
  • Vue3项目使用ElementPlus前端UI

    • 使用ElementPlus
  • 使用vue-router实现路由

    • 使用vue-router
    • vue-router的案例演示
  • 学生管理系统后台主界面框架搭建

    • 后台系统主界面的搭建
    • 添加侧边栏的Logo部分
    • 动态生成侧边栏菜单
    • 为侧边栏菜单加图标
    • Header区域的基本布局
    • 侧边栏收缩的思路分析
  • 使用Vuex实现组件间的传值

    • vuex安装和store对象的创建、注册
    • 完成侧边栏收缩的功能
  • 使用vue-router实现侧边栏导航

    • 实现侧边栏的导航
  • 捕获路由信息自动生成面包屑导航

    • 自动生成面包屑导航
  • 学生信息页面的布局

    • 学生信息页面布局(1)
    • 学生信息页面布局(2)
    • 配置Element Plus国际化
  • 前台跨域获取后台接口数据并展示

    • 跨域获取所有学生信息
    • 优化学生信息的展示
  • Axios请求的模块化(上):request脚本和Api接口实现

    • 模块化axios请求01
    • 模块化axios请求02
  • 案例演示:实现院系信息和专业信息联级下拉框

    • 实现院系信息和专业信息填充到下拉框
  • Axios请求的模块化(中):使用面向对象的思维优化Api接口

    • 模块化axios请求03
  • 案例演示:实现院系信息和专业信息的数据的过滤

    • 实现查询和显示全部的功能
  • 配置Vue实例的全局引入

    • 配置全局变量
  • Axios请求的模块化(下):请求拦截器和响应拦截器

    • 模块化Axios请求(4)
  • 完成学生信息弹出层的布局和数据填充

    • 完成学生信息的弹出层
    • 优化弹出层的展示
    • 三种状态加载弹出层
    • 填充数据到弹出层
  • 使用Cascader 级联选择器实现院系信息和专业信息的选择

    • 使用级联选择器展示学院和专业信息
  • 表单提交前的校验

    • 表单提交前的校验
    • 校验学号是否存在
  • 实现学生信息的增删改

    • 完成学生的添加
    • 完成学生的修改
    • 完成学生的删除
  • 实现学生头像的上传和展示

    • 上传图片的基本介绍
    • 完成图片上传的后台接口
    • 上传图片的功能添加到api
    • 完成图片上传的功能
  • 课程总结

    • 课程总结
播放页问题反馈
视频学习中有任何产品建议都可由此反
馈,我们将及时处理!

课时介绍

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

课程介绍

本季课程把开发知识拆解到项目里,让你在项目情境里学知识。

这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。

平时不明白的知识点,放在项目里去理解就恍然大悟了。

 

 

一、融汇贯通

本视频采用了前后端分离的开发模式,前端使用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开发。


三、后续课程预告:Vue和Django REST Framework实现JWT登录认证

 

推荐课程

信息系统项目管理师自考笔记

李明 · 717人在学

python从0到1:期货量化交易系统(CTP实战,高频及合成K线数据

王先生 · 22082人在学

手把手搭建Java超市管理系统【附源码】(毕设)

汤小洋 · 4200人在学

Java毕设springboot外卖点餐系统 毕业设计毕设源码 使用教

黄菊华 · 787人在学

基于SSM酒店管理系统(毕设)

小尼老师 · 838人在学

java项目实战之购物商城(java毕业设计)

Long · 5152人在学

手把手搭建Java求职招聘系统【附源码】(毕设)

汤小洋 · 1506人在学

Python Django 深度学习 小程序

钟翔 · 2318人在学

城管局门前三包管理系统+微信小程序(vue+springboot)

赖国荣 · 598人在学

Vue+Uni-app(uniapp)入门与实战+赠送仿美团点餐小程序

李杰 · 3982人在学

正在试验
后自动删除环境
课程实验
本次实验时间已到期 00:00:00

    订阅失败

    Vue+Vite+Element+DRF前后端分离项目实战
    Vue+Vite+Element+DRF前后端分离项目实战 ...

    订阅列表已满,请先移出部分订阅内容。

    当前章节需购买后观看
    开通超级会员免费看!专家精选系列课程,满足你从入门到精通!更有问答月卡免费送,你的问题有问必答!
    提交答案

    购买课程

    扫码完成付费,可继续学习全部课程内容

    加载中...
    课件正在飞速打包中,请耐心等待几秒钟~