“2023全新升级,基于Vue3新标准,打造后台综合解决方案教程”是一个面向开发者的课程,旨在通过使用Vue3新标准来构建后台综合解决方案。
课程将涵盖以下内容:
1. Vue3新标准介绍:详细介绍Vue3相对于Vue2的新特性和改进,包括Composition API、更好的性能优化和响应式系统等。
2. 后台综合解决方案概述:了解后台综合解决方案的概念和目标,掌握如何构建一个完整的后台管理系统。
3. 项目结构和搭建:学习如何规划和搭建一个基于Vue3的后台综合解决方案项目,包括文件结构、依赖管理和构建工具的选择与配置。
4. 前端UI框架:探索并选择适合后台管理系统的UI框架,如Element Plus等,并学习如何使用和定制UI组件。
5. 路由管理和权限控制:学习使用Vue Router来管理路由,实现页面导航和权限控制,保证不同用户角色的访问权限。
6. 状态管理:使用Vue3新的响应式系统和状态管理模式,学习如何管理复杂的应用状态,提高代码的可维护性。
7. 表单验证和数据处理:掌握表单验证的原理和实践,学习如何处理和提交表单数据,确保数据的准确性和安全性。
8. 数据展示和交互:学习如何使用Vue3的Composition API来处理数据和交互逻辑,实现数据的展示和交互功能。
9. 接口调用和数据交互:学习如何通过接口调用来获取和提交后台数据,包括使用axios或其他HTTP库进行数据交互。
10. 部署和优化:学习如何将项目部署到服务器上,并进行性能优化和安全加固,提高项目的可用性和稳定性。
通过参加该课程,开发者将能够全面掌握Vue3的新特性和标准,了解后台综合解决方案的构建流程和技巧,掌握构建高效、稳定的后台管理系统的能力。
课程截图:
目录大纲: 第1章 课程介绍(了解本课程必看) 试看2 节 | 13分钟 本章中,将会对课程的内容做介绍说明,总览课程中涉及到的知识点和学习方向。 收起列表 视频: 1-1 导学 (12:20) 试看 图文: 1-2 课程脑图 第2章 标准化大厂编程规范解决方案之ESLint + Git Hooks16 节 | 82分钟 在一线大厂或明星开源项目中,对 代码格式与 Git 提交均有严格的规范要求,不符合规范的代码将无法被提交到 git 仓库。想要晋升大厂高软,第一步先剔除你的“坏习惯” 收起列表 视频: 2-1 为什么需要编程规范? (04:14) 图文: 2-2 使用 vue-cli 创建项目 图文: 2-3 升级最新的 vue 版本以支持 script setup 语法 视频: 2-4 大厂编程规范一:代码检测工具 ESLint 你了解多少? (12:34) 视频: 2-5 大厂编程规范二:你知道代码格式化 Prettier 吗? (03:18) 视频: 2-6 ESLint 与 Prettier 配合解决代码格式问题 (10:17) 作业: 2-7 代码格式——讨论题 视频: 2-8 大厂编程规范三:git 提交规范解析 (05:33) 视频: 2-9 Commitizen助你规范化提交代码 (14:42) 视频: 2-10 什么是 Git Hooks (03:46) 视频: 2-11 使用 husky + commitlint 检查提交描述是否符合规范要求 (15:19) 视频: 2-12 通过 pre-commit 检测提交时代码规范 (05:17) 视频: 2-13 lint-staged 自动修复格式错误 (05:05) 图文: 2-14 关于 `vetur` 检测 `template` 的单一根元素的问题 作业: 2-15 git——讨论题 视频: 2-16 总 结 (01:26) 第3章 项目架构之搭建登录架 构解决方案与实现24 节 | 177分钟 明星项目之所以被人追捧,并具备长期可维护、可扩展的能力与项目的基础架构是分不开的。那么如何构建一个明星项目的基础架构,我们在这里将分成两个章节来为你详细介绍! 收起列表 视频: 3-1 前 言 (01:46) 视频: 3-2 vue3 项目结构解析 (05:44) 图文: 3-3 初始化项目结构 视频: 3-4 vue3 新特性介绍【技术选择?是否使用TS,看这里】 (18:35) 试看 视频: 3-5 全新的提案语法:script setup (04:20) 图文: 3-6 导入 element-plus 视频: 3-7 构建登录页面 ui 结构 (10:10) 视频: 3-8 美化登录页面样式 (10:20) 视频: 3-9 Icon 图标处理方案:SvgIcon (16:36) 视频: 3-10 处理内部 svg 图标显示 (11:16) 视频: 3-11 使用 svg-sprite-loader 处理 svg 图标 (06:49) 视频: 3-12 Vue3.2 响应式优化对应用层的改变 (04:30) 视频: 3-13 完善登录表单校验 (10:43) 视频: 3-14 密码框状态通用处理 (06:51) 视频: 3-15 通用后台登录方案解析 (02:43) 视频: 3-16 配置环境变量封装 axios 模块 (07:12) 图文: 3-17 重要-icode获取方法 视频: 3-18 封装请求动作 (09:01) 视频: 3-19 登录触发动作 (14:21) 视频: 3-20 本地缓存处理方案 (11:08) 视频: 3-21 响应数据的统一处理 (07:23) 视频: 3-22 登录后操作 (02:53) 视频: 3-23 登录鉴权解决方案 (12:31) 视频: 3-24 总 结 (01:39) 第4章 项目架构之搭建Layout架构 解决方案与实现27 节 | 198分钟 明星项目之所以被人追捧,并具备长期可维护、可扩展的能力与项目的基础架构是分不开的。那么如何构建一个明星项目的基础架构,我们在这里将分成两个章节来为你详细介绍! 收起列表 视频: 4-1 前 言 (03:21) 视频: 4-2 创建基于 Layout 的基础架构-1 (17:49) 视频: 4-3 创建基于 Layout 的基础架构-2 (07:11) 视频: 4-4 获取用户基本信息 (14:48) 视频: 4-5 渲染用户头像菜单 (09:39) 视频: 4-6 退出登录方案实现 (05:48) 视频: 4-7 用户被动退出方案解析 (01:50) 视频: 4-8 用户被动退出解决方案之主动处理 (13:16) 视频: 4-9 用户被动退出解决方案之被动处理 (06:19) 视频: 4-10 创建页面组件,使用临时 menu 菜单 (06:22) 视频: 4-11 动态menu菜单处理方案解析 (04:14) 视频: 4-12 业务落地:生成项目页面组件 (02:57) 视频: 4-13 业务落地:创建结构路由表 (14:23) 视频: 4-14 业务落地:解析路由表,获取结构化数据 (23:04) 视频: 4-15 业务落地:生成动态 menu 菜单 (11:10) 视频: 4-16 业务落地:修复最后残余问题 (04:56) 视频: 4-17 动画逻辑,左侧菜单伸缩功能实现 (13:06) 视频: 4-18 SidebarHeader 处理 (07:07) 视频: 4-19 全新 vue 能力:组件状态驱动的动态 CSS 值 (03:36) 视频: 4-20 动态面包屑方案分析 (02:34) 视频: 4-21 业务落地:渲染基本的面包屑组件 (04:21) 视频: 4-22 业务落地:动态计算面包屑结构数据 (08:31) 视频: 4-23 业务落地:依据动态数据,渲染面包屑 (06:06) 视频: 4-24 vue3 动画处理 (03:18) 作业: 4-25 任务题 作业: 4-26 解决方案——讨论题 视频: 4-27 总结 (01:41) 第5章 后台项目前端综合解决方案之通用功能开发50 节 | 306分钟 后台项目中通常会具备很多通用的业务功能,比如:功能引导、国际化、动态换肤、面包屑、HeaderSearch、screenfull 等,这些功能的实现方案,在本章都会进行详解,让你真正成为 《后台前端技术专家》 收起列表 视频: 5-1 开篇 (02:04) 视频: 5-2 国际化实现原理 (06:36) 视频: 5-3 基于 vue-i18n V9 的国际化实现方案分析 (08:36) 视频: 5-4 方案落地:封装 langSelect 组件 (18:57) 视频: 5-5 方案落地:element-plus 国际化处理 (11:54) 视频: 5-6 方案落地:自定义语言包国际化处理 (02:59) 视频: 5-7 方案落地:处理项目国际化内容 (12:40) 视频: 5-8 方案落地:sidebar 与 面包屑 区域的国际化处理 (05:13) 视频: 5-9 方案落地:国际化缓存处理 (03:28) 视频: 5-10 国际化方案总结 (02:41) 作业: 5-11 国际化 ——任务题 视频: 5-12 动态换肤原理分析 (04:35) 视频: 5-13 动态换肤实现方案分析 (02:10) 视频: 5-14 方案落地:创建 ThemeSelect 组件 (08:15) 视频: 5-15 方案落地:创建 SelectColor 组件-1 (12:10) 视频: 5-16 方案落地:创建 SelectColor 组件-2 (09:57) 视频: 5-17 方案落地:处理 element-plus 主题变更原理与步骤分析 (06:28) 视频: 5-18 方案落地:处理 element-plus 主题变更 (29:32) 视频: 5-19 方案落地:element-plus 新主题的立即生效 (02:54) 视频: 5-20 方案落地:自定义主题变更 (08:23) 视频: 5-21 自定义主题方案总结 (02:56) 作业: 5-22 主题方案——任务题 视频: 5-23 screenfull 原理及方案分析 (03:06) 视频: 5-24 方案落地:screenfull (06:15) 作业: 5-25 screenfull——任务题 视频: 5-26 headerSearch 原理及方案分析 (03:56) 视频: 5-27 方案落地:创建 headerSearch 组件 (09:12) 视频: 5-28 方案落地:检索数据源,路由表数据处理 (02:39) 视频: 5-29 方案落地:对检索数据源进行模糊搜索 (07:46) 视频: 5-30 方案落地:数据源重处理,生成 searchPool (12:04) 视频: 5-31 方案落地:渲染检索数据 (03:30) 视频: 5-32 方案落地:剩余问题处理 (09:24) 视频: 5-33 headerSearch 方案总结 (01:57) 作业: 5-34 headerSearch 方案——任务题 视频: 5-35 tagsView 原理及方案分析 (04:07) 视频: 5-36 方案落地:创建 tags 数据源 (11:23) 视频: 5-37 方案落地:生成 tagsView (09:45) 视频: 5-38 方案落地:tagsView 国际化处理 (05:29) 视频: 5-39 方案落地:contextMenu 展示处理 (12:25) 视频: 5-40 方案落地:contextMenu 事件处理 (08:58) 视频: 5-41 方案落地:处理 contextMenu 的关闭行为 (01:57) 视频: 5-42 方案落地:处理基于路由的动态过渡 (06:00) 视频: 5-43 tagsView 方案总结 (01:40) 作业: 5-44 tagsView 方案——任务题 视频: 5-45 guide 原理及方案分析 (02:58) 作业: 5-46 Guide 业务——任务题 作业: 5-47 后台解决方案——讨论题 视频: 5-48 方案落地:生成 Guide (01:55) 视频: 5-49 方案落地:Guide 业务逻辑处理 (15:09) 视频: 5-50 总结 (01:47) 第6章 vue3 + element plus 综合实现解决方案与个人中心页面实现10 节 | 55分钟 基于 vue 全新特性的组件化与 element-plus 的综合实例。 收起列表 视频: 6-1 开篇 (02:14) 视频: 6-2 个人中心模块基本布局 (06:49) 视频: 6-3 创建 PanThumb 头像组件 (14:47) 视频: 6-4 element-plus:项目介绍模块开发 (13:21) 视频: 6-5 接口国际化:处理接口国际化问题 (05:52) 视频: 6-6 element-plus:功能模块开发 (03:31) 视频: 6-7 element-plus:章节模块开发 (03:11) 视频: 6-8 element-plus:作者模块开发 (03:26) 作业: 6-9 vue——讨论题 视频: 6-10 总结 (01:02) 第7章 excel 、zip 与前端结合解决方案之用户管理页面实现25 节 | 166分钟 权限架构的前置处理,结合 Excel 导入、导出的综合实例。让你在了解权限基础的同时,掌握更多的后台解决方案。 收起列表 视频: 7-1 开篇 (02:27) 视频: 7-2 用户列表分页展示-1 (12:03) 视频: 7-3 用户列表分页展示-2 (08:58) 视频: 7-4 全局属性处理时间展示问题 (08:21) 视频: 7-5 excel 导入原理与实现分析 (03:31) 视频: 7-6 业务落地:提供两种文件导入形式 (09:17) 视频: 7-7 业务落地:文件选择之后的数据解析处理 (17:13) 视频: 7-8 业务落地:文件拖入之后的数据解析处理 (07:29) 视频: 7-9 业务落地:传递解析后的 excel 数据 (09:21) 视频: 7-10 业务落地:处理剩余 bug (10:26) 视频: 7-11 excel 导入功能总结 (01:29) 视频: 7-12 辅助业务之用户删除 (06:20) 视频: 7-13 excel 导出原理与实现分析 (03:09) 视频: 7-14 业务落地:Export2Excel 组件 (07:25) 视频: 7-15 业务落地:导出前置业务处理 (04:59) 视频: 7-16 业务落地:实现 excel 导出逻辑 (15:55) 视频: 7-17 业务落地:excel 导出时的时间逻辑处理 (02:02) 视频: 7-18 excel 导出功能总结 (01:38) 作业: 7-19 excel 导出功能——任务题 视频: 7-20 局部打印详情原理与实现分析 (02:50) 视频: 7-21 业务落地:获取展示数据 (07:45) 视频: 7-22 业务落地:渲染详情结构 (13:50) 视频: 7-23 业务落地:局部打印功能实现 (06:33) 视频: 7-24 局部打印功能总结 (00:52) 视频: 7-25 总结 (01:35) 第8章 权限控制解决方案与角色、权限控制功能实现16 节 | 128分钟 基于 RBAC 权限控制体系的综合解决方案,包含了权限控制、动态权限、页面权限、功能权限等全方面的可完全商用的权限控制体系 收起列表 视频: 8-1 开篇 (01:47) 视频: 8-2 权限理论:RBAC 权限控制体系【看过来—>解决你的权限困扰】 (07:31) 视频: 8-3 辅助业务:角色列表展示 (06:30) 视频: 8-4 辅助业务:权限列表展示 (10:27) 视频: 8-5 辅助业务:为用户分配角色-1 (14:22) 视频: 8-6 辅助业务:为用户分配角色-2 (14:29) 视频: 8-7 辅助业务:为角色指定权限 (19:57) 视频: 8-8 基于 RBAC 的权限控制体系原理与实现分析 (09:52) 视频: 8-9 业务落地:定义页面权限控制动作,实现页面权限受控-1 (13:57) 视频: 8-10 业务落地:定义页面权限控制动作,实现页面权限受控-2 (13:00) 作业: 8-11 权限——任务题 视频: 8-12 业务落地:重置路由表数据 (05:11) 视频: 8-13 业务落地:创建功能受控指令 (09:21) 作业: 8-14 创建功能——任务题 作业: 8-15 权限控制——讨论题 视频: 8-16 总结 (01:12) 第9章 列表排序解决方案与实现热门文章排名功能16 节 | 89分钟 动态表格与拖拽排序是企业级后台项目中常见的表格业务,这一章为你彻底解决企业中表格相关的综合业务实例。 收起列表 视频: 9-1 开篇 (02:02) 视频: 9-2 辅助业务:文章排名页面渲染 (12:59) 视频: 9-3 相对时间与时间国际化处理 (06:50) 视频: 9-4 动态表格原理与实现分析 (03:37) 视频: 9-5 方案落地:动态列数据构建 (13:51) 视频: 9-6 方案落地:实现动态表格能力 (07:13) 视频: 9-7 动态表格实现总结 (00:43) 视频: 9-8 拖拽排序原理与实现分析 (03:19) 视频: 9-9 方案落地:实现表格拖拽功能 (09:53) 视频: 9-10 方案落地:完成拖拽后的排序 (13:35) 视频: 9-11 拖拽排序方案总结 (00:39) 视频: 9-12 辅助业务:文章删除 (05:15) 视频: 9-13 辅助业务:文章详情展示 (07:46) 作业: 9-14 表格——讨论题 作业: 9-15 文章详情——任务题 视频: 9-16 总结 (00:41) 第10章 文章编辑解决方案与实现创建文章功能10 节 | 60分钟 在现在市面中充斥着各种编辑器轮子的情况下,我们应该如何选择合适我们当前业务的编辑器,以及如何学习和使用它们呢?这一章帮你打通编辑器的任督二脉。 收起列表 视频: 10-1 开篇 (01:45) 视频: 10-2 辅助业务:创建文章基本结构实现 (04:37) 视频: 10-3 编辑库选择标准 (10:38) 视频: 10-4 新建文章:markdown 实现 (10:01) 视频: 10-5 新建文章:markdown 文章提交 (08:01) 视频: 10-6 新建文章:markdown 文章编辑 (11:03) 视频: 10-7 新建文章:富文本 实现 (12:50) 作业: 10-8 富文本——讨论题 作业: 10-9 富文本——任务题 视频: 10-10 总结 (00:56) 第11章 项目发布解决方案之构建与发布8 节 | 42分钟 域名、DNS、公网IP、服务器、Nginx是很多前端开发者的薄弱环节,本章节带你彻底补齐你的短板,上线你的项目。 收起列表 视频: 11-1 开篇 (01:18) 视频: 11-2 项目构建过程分析与实现 (04:52) 视频: 11-3 域名、DNS、公网IP、服务器、Nginx之间的关系 (03:39) 视频: 11-4 阿里云服务器购买指南 (06:05) 视频: 11-5 服务器连接方式 (03:58) 视频: 11-6 Nginx 环境处理 (18:33) 视频: 11-7 项目发布 (02:08) 视频: 11-8 总结 (00:47) 第12章 课程总结1 节 | 4分钟 课程总结 收起列表 视频: 12-1 课程总结 (03:32) 第13章 element-plus 升级9 节 | 37分钟 element-plus 升级到了 最新的 2.0.0 版本之后,项目出现了一些小问题,现在老师将这些问题整理了下,更新了部分内容哦。 收起列表 视频: 13-1 升级说明及涉及到的内容变化 (02:15) 视频: 13-2 处理Can’t reexport the named export ‘xxx’ ..- (05:06) 视频: 13-3 element-plus 的国际化问题 (04:16) 视频: 13-4 icons 使用问题 (03:43) 视频: 13-5 样式错误问题 (05:37) 视频: 13-6 解决文章排名报错与button组件警告 (04:07) 视频: 13-7 `menu` 菜单图标显示的问题 (05:47) 视频: 13-8 全局主题替换按钮颜色的替换问题 (02:34) 视频: 13-9 替换主题之后,按钮 `active` 状态下的样式处理 (03:26) 第14章 数据可视化解决方案(ECharts + AntV) 试看26 节 | 269分钟 针对于 “后台应用的数据可视化” 功能,提供了专属解决方案,使用了国内最流行的两大数据可视化框架,并且结合 “百度地图 API” 实现了多种常见的后台数据可视化解决方案,课程还结合了实际开发时的各种场景,实现了 “可交互的多图联动的交互效果”,致力于为大家提供:实际开发中 “后台前端数据可视化解决方案… 收起列表 视频: 14-1 前言 (04:43) 试看 视频: 14-2 明确需要导入的资源 (07:23) 视频: 14-3 数据可视化大解析 (14:06) 视频: 14-4 构建基础模块结构(1) (14:16) 视频: 14-5 累计收益-模块划分 (03:33) 视频: 14-6 累计收益-数据模块渲染 (15:59) 视频: 14-7 countup – 让你的数据动起来 (10:02) 视频: 14-8 ECharts 使用指南与学习方案(1) (11:37) 视频: 14-9 累计收益-柱状图与曲线图的混合渲染-1 (15:37) 视频: 14-10 累计收益-柱状图与曲线图的混合渲染-2 (10:48) 视频: 14-11 累计收益-混合图表的国际化处理 (04:59) 视频: 14-12 日历模块-日历数据基础渲染 (10:48) 视频: 14-13 日历模块-定制数据可视化处理 (11:34) 视频: 14-14 日金额分析-横向与负坐标图表构建 (19:05) 视频: 14-15 非父子组件之间进行交互的三种方式 (06:53) 视频: 14-16 跨组件通讯-日历图与柱状图联动处理 (05:19) 视频: 14-17 大区营销-饼图图表构建 (13:01) 视频: 14-18 文档云图-WordCloud 基础渲染(1) (13:16) 视频: 14-19 文档云图-基于图形轮廓的绘制 (03:38) 视频: 14-20 地图可视化:百度地图 API 大解析(1) (05:50) 视频: 14-21 地图可视化:百度地图 + ECharts 完成可视化渲染 (23:41) 视频: 14-22 大区营销数据分析-基础结构渲染 (04:20) 视频: 14-23 大区营销数据分析-渲染大区结构视图 (11:28) 视频: 14-24 大区营销数据分析-基于 AntV S2 构建表格数据可视化 (21:25) 视频: 14-25 大区营销数据分析-表格图谱与大区联动 (03:57) 视频: 14-26 总结 (01:15) 本课程已完结