Vue3+Django4全新技术实战全栈项目完整版

前端开发

课程简介

《Vue3+Django4全新技术实战全栈项目完整版》前后端分离模式，从开发到上线，带你系统提升全栈技能，收获企业级上线项目实战经验【技能收获】学完可掌握：Python 编程、Vue / 前端工程化、Linux 运维、MySQL / 数据库。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生

已有 1 人浏览发布 2026-09-15 更新 2026-09-22

这套资料解决的是什么问题

前后端分离项目最容易被讲成两段互不相干的教程：前端部分在浏览器里调 mock 接口，后端部分在 Postman 里自测。真正动手做的时候，跨域、鉴权、状态保持、部署时的静态资源路径、数据库连接配置，这些衔接处才是耗时最多的地方。这套「Vue3 + Django4 全栈项目」的编排思路是以一个可上线的完整项目为主线，前端与后端围绕同一套业务模型推进，而不是各自演示语法。对于已经能写单独页面、但没独立完成过一次完整交付的开发者，这类结构清晰的资料比零散视频更有对照价值。

技术栈的组合方式

前端选 Vue3，意味着你会接触到组合式 API、setup语法、响应式数据组织，以及基于 Vite 的构建流程。后端选 Django4 而不是更轻的框架，带来的是一整套已成型的能力：ORM 与迁移、Admin 后台、中间件、认证体系。Django REST Framework 负责把模型暴露成接口，这样就省去了手写大量增删改查的时间，可以把精力放在业务逻辑与前后端字段约定上。

数据库用 MySQL，配合 Django 的迁移机制管理表结构。这条链路本身很常见，但对自学者来说，能从模型定义一直走到接口返回、再到前端渲染，是把抽象概念落地的关键一步。

项目结构里可以复用的部分

阅读这类项目，建议把注意力放在几处可迁移的结构上，而不是逐行抄代码：

后端的分层方式：模型、序列化器、视图、路由各司其职，理解清楚之后换成其他业务域也能照搬。
接口约定与错误返回格式：前端如何统一处理后端抛出的异常，是分离项目里最容易反复返工的点。
认证与登录态：Token 如何签发、前端如何存储、请求拦截器如何附加，这一套在很多项目里是通用的。
前端目录组织：页面、组件、接口请求、状态管理各自的位置，决定了项目做大之后会不会失控。
配置与部署：开发环境与生产环境的差异如何通过配置区分，静态文件如何处理。

这些部分建议独立抽出来，整理成自己的模板，下次起新项目时直接复用，比记住某个具体页面的写法有用得多。

从开发到上线这一段

多数教程止步于「本地能跑」，而部署环节恰恰是自学者的盲区。这套资料把上线纳入主线，会涉及 Linux 环境下的部署、服务进程管理、反向代理与静态资源托管。这部分内容不需要你成为运维专家，但需要能独立完成一次把本地项目放到服务器上跑通的过程。做完这一遍，对「前后端分离」的理解会完整很多，也更容易判断线上问题出在哪一层。

怎么用它自学

建议的节奏是：先快速通读一遍整体结构，知道各部分之间的调用关系，再回来逐模块动手敲。每完成一个模块，不要急着往下走，先自己复现一遍，把踩到的坑记下来。章节笔记可以用来对照复盘，但更有效的方式是拿它当检查清单——合上笔记，看自己能不能独立把这一部分从零写出来。

全部过完之后，比较有价值的做法是脱离原项目，自己定一个业务简单的题目，用同一套技术栈独立实现一遍并部署上去。这个过程会暴露你真正没掌握的地方。源码在这里的作用是参照物，用来对照自己的实现和成熟写法之间的差距，而不是照着抄一遍就算学完。

需要提醒的是，这套资料覆盖的技术面较宽，前端、后端、数据库、部署都有涉及，跟着做一遍能建立起整体认知，但每一块都还需要额外的深入练习才能真正熟练。把它当作一次完整的项目演练，而不是终点。

前后端分离模式，从开发到上线，带你系统提升全栈技能，收获企业级上线项目实战经验

课程推荐

视频目录（195 节）

* 1-1 课程介绍.mp4

* 2-1 Vue 概述.mp4

* 2-2 Vue 项目创建初体验.mp4

* 2-3 认识一下什么是 npm.mp4

* 2-4 解决 npm 安装慢的网络问题.mp4

* 2-5 npm 的基本使用与配置文件的说明.mp4

* 3-1 什么是 webpack？.mp4

* 3-2 忘记 Vue，进行 webpack 的单独安装与体验.mp4

* 3-3 webpack 基本理念与配置说明.mp4

* 3-4 多入口多出口模式配置.mp4

* 3-5 HTML 资源打包与压缩.mp4

* 3-6 CSS 资源打包与文件提取.mp4

* 3-7 开发服务器配置.mp4

* 4-1 Axios 网络请求库概述.mp4

* 4-2 理解 ES6 promise 原理.mp4

* 4-3 Axios 发送 get 请求.mp4

* 4-4 Axios 发送 post 请求.mp4

* 4-5 Axios 并发请求处理.mp4

* 4-6 Axios 全局配置应用.mp4

* 4-7 优雅的进行 Axios 实例封装.mp4

* 4-8 Axios 中拦截器的应用.mp4

* 5-1 什么是 Vue 脚手架.mp4

* 5-2 手动创建 Vue 项目与参数介绍.mp4

* 5-3 脚手架配置扩展.mp4

* 5-4 理解数据定义与 MVVM 模式.mp4

* 6-1 Python 基础环境搭建.mp4

* 6-2 Pycharm的使用说明.mp4

* 6-3 虚拟环境的应用场景和安装方法.mp4

* 6-4 虚拟环境基本使用.mp4

* 6-5 Linux 系统安装与配置.mp4

* 6-6 xshell 远程连接 Linux 系统.mp4

* 6-7 多平台 MySQL 数据库安装.mp4

* 6-8 数据库连接工具 Navicat 安装.mp4

* 6-9 Navicat 远程连接 MySQL 数据库.mp4

* 7-1 全面认识 Django 并确定开发版本.mp4

* 7-2 动手搭建 Django 开发环境.mp4

* 7-3 开始第一个程序并解析 Django 各目录的基本作用.mp4

* 8-1 慕西商城项目工程初始化.mp4

* 8-2 项目需求分析.mp4

* 8-3 数据表结构设计.mp4

* 8-4 MySQL 数据库配置.mp4

* 8-5 models 模型类自动生成数据库表.mp4

* 8-6 根据表结构自动生成 models 模型类.mp4

* 9-1 DRF 概述及环境安装.mp4

* 9-2 Django原生开发基于类的视图模式实现商品分类菜单接口开发（一）.mp4

* 9-3 Django原生开发基于类的视图模式实现商品分类菜单接口开发（二）.mp4

* 9-4 Django原生开发基于类的视图模式实现商品分类菜单接口开发（三）.mp4

* 9-5 View 视图类的执行过程源码分析.mp4

* 9-6 apiview 继承实现商品类型接口开发.mp4

* 9-7 序列化器实现商品详情数据查询接口.mp4

* 9-8 购物车接口开发--实现数据的添加.mp4

* 9-9 购物车接口开发--数据的查询.mp4

* 9-10 购物车查询接口 Bug 修复及数据逻辑删除.mp4

* 10-1 用户注册接口开发.mp4

* 10-2 应用 ModelSerializer 对注册接口进行封装.mp4

* 10-3 用户个人中心获取用户信息接口开发.mp4

* 10-4 订单逻辑梳理与表的创建.mp4

* 10-5 基于GenericAPIView视图调用逻辑实现创建订单商品接口开发（一）.mp4

* 10-6 基于GenericAPIView视图调用逻辑实现创建订单商品接口开发（二）.mp4

* 10-7 基于GenericAPIView视图调用逻辑实现获取订单商品接口开发.mp4

* 10-8 应用 Mixin 混合类进行收货地址接口开发（一）.mp4

* 10-9 应用 Mixin 混合类进行收货地址接口开发（二）.mp4

* 10-10 梳理 Mixin 混合类关系图.mp4

* 10-11 viewsets 视图集与 router 路由实现评论接口开发.mp4

* 10-12 viewsets 路由原理解析.mp4

* 10-13 viewsets 继承树解析.mp4

* 11-1 概述 cookie、session 与t oken 的区别.mp4

* 11-2 JWT--JsonWebToken 实现原理.mp4

* 11-3 基于 JWT 的认证原理代码实现.mp4

* 11-4 DRF-JWT 用户登录认证实现（一）.mp4

* 11-5 DRF-JWT 用户登录认证实现（二）.mp4

* 11-6 DRF-JWT 头信息传递的token验证.mp4

* 11-7 DRF-JWT-Token 的全局配置.mp4

* 12-1 距离慕西商城项目的落地还有多远？.mp4

* 12-2 项目资源准备与说明.mp4

* 12-3 封装基础网络请求，前后端联调请求后端接口.mp4

* 12-4 配置基础 router 信息.mp4

* 13-1 慕西商城首页核心功能有哪些？实现思路是什么？.mp4

* 13-2 慕西商城首页顶层标题栏开发.mp4

* 13-3 慕西商城首页头部结构开发.mp4

* 13-4 慕西商城首页头部搜索框开发.mp4

* 13-5 Element-Plus 简介与安装.mp4

* 13-6 慕西商城首页头部我的购物车开发.mp4

* 13-7 导航菜单栏结构代码实现.mp4

* 13-8 导航菜单栏样式开发.mp4

* 13-9 导航菜单栏接口数据渲染.mp4

* 13-10 二级菜单栏的显示与隐藏.mp4

* 13-11 二级菜单栏的代码开发骨架结构搭建.mp4

* 13-12 二级菜单栏的代码开发页面样式渲染.mp4

* 13-13 二级菜单栏的接口数据渲染.mp4

* 13-14 首页 Banner 图效果开发.mp4

* 14-1 发现好物场景讲解及接口实现.mp4

* 14-2 发现好物后端接口数据获取.mp4

* 14-3 vue3-seamless-scroll 滚动插件.mp4

* 14-4 发现好物前端样式开发.mp4

* 14-5 首页分类选项卡的实现思路与基本效果.mp4

* 14-6 首页分类选项卡样式渲染.mp4

* 14-7 首页分类选项卡商品列表数据拉取.mp4

* 14-8 首页分类选项卡商品列表前端样式开发（一）.mp4

* 14-9 首页分类选项卡商品列表前端样式开发（二）.mp4

* 14-10 滚动翻页加载数据的实现原理及代码开发.mp4

* 14-11 回到顶部功能实现.mp4

* 15-1 商品搜索列表页该如何设计和实现？功能有哪些？.mp4

* 15-2 基于原生 SQL 的执行开发商品搜索列表页接口.mp4

* 15-3 商品搜索列表页面前端布局与基本样式实现（一）.mp4

* 15-4 商品搜索列表页面前端布局与基本样式实现（二）.mp4

* 15-5 多种排序的实现.mp4

* 15-6 商品搜索列表页后端数据获取.mp4

* 15-7 商品搜索列表页商品样式开发（一）.mp4

* 15-8 商品搜索列表页商品样式开发（二）.mp4

* 15-9 商品分页代码实现.mp4

* 15-10 完善主页搜索功能.mp4

* 16-1 商品详情页功能划分与实现思路梳理.mp4

* 16-2 商品详情页基本布局与商品接口数据请求.mp4

* 16-3 商品详情页商品信息页面布局.mp4

* 16-4 商品评论相关接口开发.mp4

* 16-5 商品评论前端数据获取.mp4

* 16-6 商品评论前端基本布局与数据渲染.mp4

* 16-7 商品评论前端样式渲染.mp4

* 16-8 评论翻页功能实现.mp4

* 16-9 完善商品详情页面跳转.mp4

* 17-1 用户登录页面骨架开发.mp4

* 17-2 用户登录页面样式渲染（一）.mp4

* 17-3 用户登录页面样式渲染（二）.mp4

* 17-4 登录功能网络请求封装与基本实现.mp4

* 17-5 vuex + LocalStroge 进行登录状态管理.mp4

* 17-6 头部登录状态更新.mp4

* 17-7 退出登录功能开发.mp4

* 17-8 导航守卫登录权限验证与拦截器的 token 添加.mp4

* 18-1 购物车业务逻辑和实现思路该如何设计.mp4

* 18-2 关于 token 认证的改造.mp4

* 18-3 重写获取购物车商品接口.mp4

* 18-4 购物车页面网络请求与前端骨架开发.mp4

* 18-5 购物车页面数据渲染.mp4

* 18-6 购物车页面样式渲染.mp4

* 18-7 修改商品数量逻辑实现.mp4

* 18-8 实现商品全选与取消全选的逻辑.mp4

* 18-9 计算商品件数与总价格.mp4

* 18-10 单个选中商品的计算逻辑.mp4

* 18-11 添加购物车的逻辑实现（一）.mp4

* 18-12 添加购物车的逻辑实现（二）.mp4

* 18-13 购物车徽章数量变化的实现.mp4

* 18-14 购物车徽章数量变化 bug 修复.mp4

* 18-15 购物车商品批量删除功能的实现.mp4

* 18-16 清空购物车与商品数量的计算.mp4

* 18-17 购物车页面 bug 修复.mp4

* 18-18 去结算--创建订单接口开发.mp4

* 18-19 去结算--创建订单前端功能开发.mp4

* 18-20 去结算--创建订单功能测试.mp4

* 19-1 为什么先开发个人中心模块？.mp4

* 19-2 个人中心前端静态页面布局设计与结构开发.mp4

* 19-3 个人中心分类菜单前端开发.mp4

* 19-4 应用 component 动态组件进行内容切换.mp4

* 19-5 component 动态组件不显示的问题解决.mp4

* 19-6 个人中心基本信息页面开发.mp4

* 19-7 个人中心安全设置页面开发.mp4

* 19-8 个人中心地址管理页面结构开发.mp4

* 19-9 个人中心地址管理页面样式渲染.mp4

* 19-10 新增收获地址弹框功能开发.mp4

* 19-11 新增收获地址接口功能开发.mp4

* 19-12 新增收获地址前端功能开发.mp4

* 19-13 收获地址列表展示前后端功能开发.mp4

* 19-14 编辑收获地址信息前后端开发（一）.mp4

* 19-15 编辑收获地址信息前后端开发（二）.mp4

* 19-16 获取订单信息接口开发（一）.mp4

* 19-17 获取订单信息接口开发（二）.mp4

* 19-18 前端进行订单数据获取与基本结构开发.mp4

* 19-19 完成我的订单基本结构开发.mp4

* 19-20 我的订单页面样式渲染（一）.mp4

* 19-21 我的订单页面样式渲染（二）.mp4

* 19-22 动态行合并计算与样式完善.mp4

* 20-1 订单支付流程设计.mp4

* 20-2 订单详情接口数据请求及开发.mp4

* 20-3 订单详情前端页面骨架开发（一）.mp4

* 20-4 订单详情前端页面骨架开发（二）.mp4

* 20-5 订单详情前端页面页面样式渲染（一）.mp4

* 20-6 订单详情前端页面页面样式渲染（二）.mp4

* 20-7 订单详情前端页面页面样式渲染（三）.mp4

* 20-8 订单详情页收货地址切换功能完善.mp4

* 20-9 初探支付宝沙箱环境，理解支付业务.mp4

* 20-10 支付宝支付代码开发前的准备.mp4

* 20-11 支付宝支付-提交订单逻辑代码解读.mp4

* 20-12 提交订单前后端逻辑开发.mp4

* 20-13 收银台前后端逻辑开发.mp4

* 20-14 支付宝支付成功的回调处理.mp4

* 20-15 完善我的订单--订单状态筛选功能.mp4

* 20-16 完善我的订单--订单状态修改功能.mp4

* 20-17 完善我的订单--再次购买及订单删除.mp4

* 21-1 准备Linux服务器.mp4

* 21-2 完成Linux服务器准备，并指定Python版本安装.mp4

* 21-3 Django项目多环境配置文件说明与pip指定版本安装的补充说明.mp4

* 21-4 Linux环境部署Django后端程序.mp4

* 21-5 Vue项目多环境配置文件区分.mp4

* 21-6 应用Nginx进行前端工程部署.mp4

* 22-1 课程总结.mp4

课程目录

课程目录195 集

Vue3+Django4全新技术实战全栈项目 完整版