〖课程介绍〗:

  •   现如今前端的边界在持续扩大，企业对于工具化、平台化、全栈化能力要求也越来越高。本课程将应用Vite2.0 + Vue3 + ElementPlus+Koa2+Mongo开发一个通用后台管理系统，带大家掌握全栈开发能力，及真正落地的综合技术能力。热门技术综合运用，提升全栈能力，打造职场竞争力



〖老师介绍〗:

  •   七年前端开发经验，先后曾任职于IBM开发组长、乐视海外商城前端Leader。现任松果出行前端架构师，主导H5、小程序、后台系统等各个一线系统产品研发。热爱编程、乐于分享。

〖课程目录〗:

  • 第1章 项目规划 7 节 | 74分钟


  • 本章将向大家介绍，一个常规项目在团队内的开发流程、成员分工以及如何理解通用后台，最后会给大家讲解Vue3核心知识点，带你做好储备。



    • 视频：1-1 课前须知，这里有你需要了解得一切 (13:00)

    • 视频：1-2 项目开发流程 (17:55)

    • 作业：1-3 【讨论题】你了解到的开发流程都有哪些？

    • 视频：1-4 如何理解通用后台 (11:33)

    • 视频：1-5 需求介绍 (13:17)

    • 视频：1-6 Vue3直通车 (17:19)

    • 图文：1-7 【知识点梳理】本章重难点总结


  • 第2章 前端架构设计 13 节 | 145分钟


  • 本章将向大家介绍，如何从0搭建标准的前端架构设计。会基于vite2.0构建，使用最新版本脚手架，同时也会涉及，项目构建时目录规范、路由封装、环境配置、axios高复用、主页结构布局等。



    • 视频：2-1 项目初始化–全局Vue脚手架&Vite创建项目 (16:41)

    • 视频：2-2 项目初始化–插件安装 (06:03)

    • 视频：2-3 目录结构规范 (11:45)

    • 视频：2-4 路由封装（上） (16:16)

    • 视频：2-5 路由封装（下） (07:04)

    • 视频：2-6 环境配置 (16:25)

    • 视频：2-7 axios二次封装（上） (15:11)

    • 视频：2-8 axios二次封装（下） (12:29)

    • 视频：2-9 storage二次封装 (20:02)

    • 视频：2-10 主页结构布局 (22:15)

    • 图文：2-11 【知识点梳理】本章重难点总结–环境配置&目录规范

    • 图文：2-12 【知识点梳理】本章重难点总结–路由封装

    • 作业：2-13 【讨论题】你接触到的前端架构设计包括哪些？


  • 第3章 Koa架构设计17 节 | 100分钟


  • 本章将带领大家完成，如何从0构建标准的Koa2项目。包含：Koa2初始化、项⽬分析、Mongo安装配置、Mongo语法讲解、接口文档设计、日志规范、工具函数封装等。



    • 图文：3-1 【资料梳理】Koa2项目初始化操作

    • 视频：3-2 项目结构分析 (11:29)

    • 视频：3-3 应用log4js进行日志规范封装（上） (05:16)

    • 视频：3-4 应用log4js进行日志规范封装（下） (22:02)

    • 视频：3-5 Window下Mongo安装和配置 (13:20)

    • 视频：3-6 Mac下Mongo安装和配置 (05:51)

    • 图文：3-7 【资料梳理】Windows下Mongo安装配置

    • 视频：3-8 Mongo基础入门 (12:28)

    • 图文：3-9 【资料梳理】数据库表结构

    • 视频：3-10 接口文档设计 (20:53)

    • 图文：3-11 【资料梳理】接口文档—用户管理

    • 图文：3-12 【资料梳理】接口文档—菜单管理

    • 图文：3-13 【资料梳理】接口文档—部门管理

    • 图文：3-14 【资料梳理】接口文档—角色管理

    • 图文：3-15 【资料梳理】接口文档—审批管理

    • 视频：3-16 工具函数封装 (08:11)

    • 图文：3-17 【资料梳理】Mac下Mongo安装配置


  • 第4章 用户登录前后台实现3 节 | 59分钟


  • 本章将带领大家一起来实现完整登录功能，包含前端、后台和联调实现。



    • 视频：4-1 登录布局开发 (13:36)

    • 视频：4-2 登录交互开发 (20:02)

    • 视频：4-3 用户登录后台实现 (24:38)


  • 第5章 前台首页实现8 节 | 81分钟


  • 本章中，我们一起来实现首页完整的功能。包含欢迎页面布局实现、侧边栏菜单功能、菜单递归算法、面包屑导航实现等等。



    • 视频：5-1 欢迎页面实现 (10:36)

    • 视频：5-2 首页菜单功能实现（上） (13:26)

    • 视频：5-3 首页菜单功能实现（下） (15:20)

    • 视频：5-4 菜单交互及递归实现（上） (11:56)

    • 视频：5-5 菜单交互及递归实现（下） (10:33)

    • 视频：5-6 面包屑实现 (12:54)

    • 视频：5-7 知识补充 (05:41)

    • 图文：5-8 【知识点梳理】本章重难点总结


  • 第6章 JWT方案讲解 4 节 | 50分钟


  • 本章将向大家介绍何为JWT，以及结合本项目JWT的整体实现和设计方案。



    • 视频：6-1 JWT理论介绍 (10:27)

    • 视频：6-2 通过jwt生成token (19:39)

    • 视频：6-3 Token拦截 (19:49)

    • 图文：6-4 【知识点梳理】本章重难点总结


  • 第7章 用户管理前后端实现12 节 | 216分钟


  • 本章将带领大家一起完成用户管理模块功能。包含：用户管理静态布局、交互，列表、删除/批量删除、新增、编辑等前后端功能实现，同时做好前后端接⼝联调。



    • 视频：7-1 用户管理列表实现（上） (14:52)

    • 视频：7-2 用户管理列表实现（下） (16:11)

    • 视频：7-3 用户列表交互实现 (20:56)

    • 视频：7-4 用户删除和批量删除 (19:38)

    • 视频：7-5 用户新增实现 (26:12)

    • 视频：7-6 用户新增交互实现 (30:52)

    • 视频：7-7 用户编辑交互实现 (07:45)

    • 视频：7-8 用户列表接口实现&联调 (32:47)

    • 视频：7-9 用户删除接口实现&联调 (15:38)

    • 视频：7-10 用户编辑接口实现&联调 (11:40)

    • 视频：7-11 用户新增接口实现 (19:29)

    • 图文：7-12 【知识点梳理】本章重难点总结


  • 第8章 菜单模块前后端实现8 节 | 117分钟


  • 本章中，我们一起来完成菜单模块前后端逻辑实现。包含菜单树结构组装、菜单列表、删除、新增、编辑功能前后端实现。



    • 视频：8-1 菜单列表实现 (25:06)

    • 视频：8-2 菜单新增实现（上） (15:40)

    • 视频：8-3 菜单新增实现（下） (15:44)

    • 视频：8-4 菜单编辑&删除实现 (09:02)

    • 视频：8-5 菜单编辑、删除、创建服务端实现 (22:19)

    • 视频：8-6 菜单列表递归实现（上） (13:32)

    • 视频：8-7 菜单列表递归实现（下） (14:59)

    • 图文：8-8 【知识点梳理】本章重难点总结


  • 第9章 ⻆色管理前后端实现9 节 | 127分钟


  • 本章中，我们将一起来完成⻆色管理模块前后端逻辑实现。包含：⻆色新建、编辑、删除、权限设置、权限点遍历等功能。



    • 视频：9-1 角色列表实现 (19:09)

    • 视频：9-2 角色操作（创建、编辑、删除） (17:31)

    • 视频：9-3 权限设置（上） (13:35)

    • 视频：9-4 权限设置（下） (15:07)

    • 视频：9-5 权限列表递归处理 (13:53)

    • 视频：9-6 角色列表后台实现 (23:10)

    • 视频：9-7 角色创建、编辑、删除后台实现 (14:38)

    • 视频：9-8 角色列表权限展示实现 (09:05)

    • 图文：9-9 【知识点梳理】本章重难点总结


  • 第10章 部门管理前后端实现6 节 | 78分钟


  • 本章中，我们一起来完成部门管理模块前后端逻辑实现。包含：部门新建、编辑、删除等功能。



    • 视频：10-1 部门列表实现 (14:21)

    • 视频：10-2 部门创建、编辑删除实现（上） (16:06)

    • 视频：10-3 部门创建、编辑删除实现（下） (14:55)

    • 视频：10-4 部门创建、编辑、删除后台实现 (21:27)

    • 视频：10-5 部门列表递归实现 (10:57)

    • 图文：10-6 【知识点梳理】本章重难点总结


  • 第11章 动态路由、导航守卫、按钮权限&工作流介绍9 节 | 108分钟


  • 本章中，将向大家介绍行业内常用的工作流形态以及本次课程所涉及到的审批流，工作流实现时需要掌握的理论知识、相关概念等，引导大家有一个全面的认识。



    • 视频：11-1 权限&工作流介绍 (12:06)

    • 视频：11-2 动态菜单渲染实现（上） (16:35)

    • 视频：11-3 动态菜单渲染实现（下） (14:04)

    • 视频：11-4 按钮权限控制实现 (24:37)

    • 视频：11-5 404页面开发 (08:20)

    • 视频：11-6 导航守卫 (07:40)

    • 视频：11-7 动态路由 (17:11)

    • 视频：11-8 章节总结 (06:50)

    • 图文：11-9 【知识点梳理】本章重难点总结


  • 第12章 休假申请前后端实现10 节 | 125分钟


  • 本章中，我们一起来完成休假申请模块前后端逻辑实现，并会结合部门管理菜单，设计一套标准的审批流。



    • 视频：12-1 休假申请列表实现（上） (16:11)

    • 视频：12-2 休假申请列表实现（下） (16:57)

    • 视频：12-3 创建 – 申请休假（上） (15:33)

    • 视频：12-4 创建 – 申请休假（下） (16:35)

    • 视频：12-5 休假详情&作废（上） (11:50)

    • 视频：12-6 休假详情&作废（下） (11:04)

    • 视频：12-7 后台列表实现 (14:43)

    • 视频：12-8 创建申请单后台实现（上） (13:38)

    • 视频：12-9 创建申请单后台实现（下） (08:23)

    • 图文：12-10 【知识点梳理】本章重难点总结


  • 第13章 待我审批前后端实现 6 节 | 74分钟


  • 在这一章中，我们一起来完成待审批模块前后端逻辑实现，并结合部门管理菜单，实现标准的审核功能。



    • 视频：13-1 审核列表前后端实现 (19:06)

    • 视频：13-2 审核通过、拒绝功能实现（上） (14:21)

    • 视频：13-3 审核通过、拒绝功能实现（中） (13:46)

    • 视频：13-4 审核通过、拒绝功能实现（下） (12:04)

    • 视频：13-5 待审核通知功能实现 (14:25)

    • 图文：13-6 【知识点梳理】本章重难点总结


  • 第14章 造轮子


  • 项目开发完成后，我们会重点讲解在人力短缺的工作中，如何提效，如何优化重构模块，我们会重点开发脚手架和低代码组件来实现降本增效。



  • 第15章 课程总结


  • 本章中，我们会针对课程中得重难点知识进行梳理、重点模块内容总结，进一步帮助大家理清思路。