vue3+typescript+ElementPlus前端通用开发框架封装、开放平台+支付系统实战

课程详情

课程介绍

本课程旨在帮助学员从0到1封装一个通用的前端开发框架,深入理解组件开发思想,并实战用户权限体系、开放平台及支付系统。

适合人群

  • 想提升个人综合竞争力的学员
  • 跳槽充电的学员

学习收获

  • 从0到1封装一个通用的前端开发框架
  • 掌握用户权限体系构建
  • 实战开放平台开发
  • 实战支付系统开发
  • 深入理解组件开发思想

课程亮点

  • 主页效果展示:支持四种布局切换,主题设置,界面元素显隐控制等
  • 用户权限体系部分功能展示:模块管理、菜单管理、角色新增、机构管理、用户编辑等
  • 开放平台部分功能展示:ISV管理、开放API管理、ISV开放接口开通、开放API接口文档
  • 支付管理部分功能展示:通道配置、编辑机构通道配置、商户管理、新增商户步骤等
  • 通用组件展示:表格弹窗通用业务组件、表格弹窗级联选择组件、图片上传组件、银行卡选择组件等

线上体验环境

访问地址:admin.bootframework.cn

登录用户:superadmin

登录密码:111111

课程目录

01 课程介绍
  01 系统演示 — 主操作窗口展示含四种布局模式切换(买前必看).mp4
  02 系统演示 — 用户、权限体系功能展示(买前必看).mp4
  03 系统演示 — 代码生成工具功能展示(买前必看).mp4
  04 系统演示 — 开放平台功能展示(买前必看).mp4
  05 系统演示 — 支付管理功能展示(买前必看).mp4
  06 系统演示 — 课程中封装的公共通用组件展示(买前必看).mp4
  07 使用的技术栈介绍及如何访问线上API接口.mp4
02 主页效果实现
  01 静态主页面制作 — vite项目的运行流程.mp4
  02 静态主页面制作 — 主页flex布局实现.mp4
  03 静态主页面制作 — ElementPlus插件安装.mp4
  04 静态主页面制作 — 左侧菜单及头部制作.mp4
  05 静态主页面制作 — tabs标签页制作.mp4
  06 静态主页面制作 — 深度选择器详解.mp4
  07 用组件化开发思想对主页面进行抽离.mp4
  08 动态菜单实现.mp4
  09 使用动态组件展示菜单图标.mp4
  10 菜单收缩与展开实现(Pinia状态管理).mp4
  11 点击菜单切换页面内容(Router4路由详解).mp4
  12 多层嵌套路由的渲染问题.mp4
  13 动态面包屑导航制作(1).mp4
  14 动态面包屑导航制作(2).mp4
  15 动态Tabs标签页制作.mp4
  16 动态Tabs标签右侧操作区制作.mp4
  17 tabs标签页刷新实现.mp4
  18 主页设置面板组件布局.mp4
  19 颜色选择器组件制作.mp4
  20 主页布局切换实现(一).mp4
  21 主页布局切换实现(二).mp4
  22 主页布局切换实现(三).mp4
  23 主页布局切换实现(四).mp4
  24 菜单复杂分布布局实现— 菜单数据拆分.mp4
  25 菜单复杂分布布局实现— 左侧菜单切换.mp4
  26 菜单复杂分布实现— 切换tab页时水平菜单、垂直菜单自动选中.mp4
  27 菜单复杂分布布局实现— 布局切换bug修复.mp4
  28 主页元素显隐设置实现.mp4
  29 首页制作(一).mp4
  30 首页制作(二)— 整合Echarts图表.mp4
  31 登录及动态路由实现 — 登录静态页面效果制作.mp4
  32 登录及动态路由实现 — 登录form表单数据绑定.mp4
  33 axios整合及HttpService对象封装.mp4
  34 登录及动态路由实现 — request函数封装.mp4
  35 登录请求实现(Promise、async、await的使用).mp4
  36 登录拦截及动态菜单实现.mp4
  37 axios请求链路及响应数据处理过程分析.mp4
  38 登录及动态路由实现 — 动态路由实现.mp4
  39 解决刷新或切换布局时tabs标签页数据丢失bug.mp4
03 用户权限体系实现
  01 使用Element plus实现App管理列表页面静态效果.mp4
  02 使用普通编码方式实现App列表页面查询、分页功能.mp4
  03 使用普通编码方式实现模块列表页面查询、分页功能.mp4
  04 表格自定义列的显示内容及时间格式化.mp4
  05 基础组件和普通编码实现方式的不足分析.mp4
  06 EasyTable自定义组件封装.mp4
  07 useTable组合式函数封装.mp4
  08 使用EasyTable和useTable重构模块管理列表页面.mp4
  09 使用普通编码方式实现app新增功能.mp4
  10 使用普通编码方式实现app编辑功能.mp4
  11 关闭弹窗bug修复.mp4
  12 解决Typescript编译报错问题.mp4
  13 使用普通编码方式实现实现模块新增、编辑功能.mp4
  14 EasyDialog自定义组件封装.mp4
  15 useAddOrEditDialog组合式函数封装.mp4
  16 使用EasyDialog和组合式函数重构模块新增、编辑功能.mp4
  17 EasyDialog自定义组件功能增强.mp4
  18 App单条删除和批量删除功能实现.mp4
  19 快速实现模块删除功能及useTable组合式函数功能增强.mp4
  20 useTable和useAddOrEditDialog总结.mp4
  21 图标选择器组件实现.mp4
  22 菜单列表页面功能实现 - 页面布局及菜单树形数据与懒加载实现.mp4
  23 菜单列表页面功能实现 - 菜单查询功能实现.mp4
  24 菜单列表页面功能实现 - 按钮权限布局及操作按钮的可用状切换.mp4
  25 菜单列表页面功能实现 - 选中菜单行时加载菜单的按钮权限列表.mp4
  26 菜单列表页面功能实现 - 新增菜单功能实现.mp4
  27 菜单列表页面功能实现 - 编辑菜单功能实现.mp4
  28 菜单列表页面功能实现 - 所属模块下拉框渲染和所属菜单树联动.mp4
  29 菜单列表页面功能实现 - 新增编辑成功后菜单树表格实时刷新.mp4
  30 菜单列表页面功能实现 - 按钮权限列表行编辑效果实现.mp4
  31 菜单列表页面功能实现 - 按钮权限保存功能实现.mp4
  32 角色列表页面功能实现 - 页面布局及角色列表功能实现.mp4
  33 角色列表页面功能实现 - 角色列表功能实现(二).mp4
  34 角色列表页面功能实现 - 角色权限树组件封装.mp4
  35 使用Tree组件自定义节点类名实现末端节点横向排列.mp4
  36 角色列表页面功能实现 - 新增编辑角色页面组件布局.mp4
  37 角色列表页面功能实现 - 权限选择树渲染及新增角色实现.mp4
  38 角色列表页面功能实现 - 权限选择树数据回显及修改角色实现.mp4
  39 角色列表页面功能实现 - 权限全选与取消全选功能实现.mp4
  40 角色列表页面功能实现 - 编辑角色成功后刷新功能优化.mp4
  41 角色列表页面功能实现 - 删除角色成功实现.mp4
  42 机构列表页面功能实现 - 列表查询、删除功能实现.mp4
  43 机构列表页面功能实现 - 新增、编辑功能实现.mp4
  44 机构列表页面功能实现 - 所属机构表格弹窗选择组件封装.mp4
  45 将所属机构表格弹窗选择组件重构成通用组件.mp4
  46 通用表格弹窗选择组件bug修复.mp4
  47 通用表格弹窗选择组件复选模式实现.mp4
  48 用户列表页面功能实现 - 列表查询、删除功能实现.mp4
  49 用户列表页面功能实现 - 新增、编辑组件基础布局.mp4
  50 用户列表页面功能实现 - 角色选择组件封装(一).mp4
  51 用户列表页面功能实现 - 角色选择组件封装(二).mp4
  52 用户列表页面功能实现 - 角色选择组件封装(三).mp4
  53 用户列表页面功能实现 - 角色选择组件封装(四).mp4
  54 用户列表页面功能实现 - 角色选择组件封装(五).mp4
  55 用户列表页面功能实现 - 添加、编辑前获取已选角色并实现保存.mp4
  56 按钮权限控制实现.mp4
04 代码生成工具引入及使用
  01 代码生成工具功能实现(一).mp4
  02 代码生成工具功能实现(二).mp4
  03 使用代码生成工具生成的代码快速实现系统参数管理、地区管理功能.mp4
  04 使用代码生成工具生成的代码快速实现行业类别管理功能.mp4
  05 地区、行业类别页面使用表格弹窗选择组件渲染输入框.mp4
  06 系统类型管理功能实现(一).mp4
  07 系统类型管理功能实现(二).mp4
  08 地区列表页面地区类型显示值转义.mp4
  09 主操作区全屏组件封装.mp4
  10 级联弹窗选择组件封装(一).mp4
  11 级联弹窗选择组件封装(二).mp4
  12 级联弹窗选择组件封装(三).mp4
05 开放平台实战
  01 开放平台业务介绍.mp4
  02 根据开放平台的表结构快速生成代码及ISV管理功能实现.mp4
  03 开放API管理功能实现(一).mp4
  04 开放API管理功能实现(二).mp4
  05 开放API管理功能实现(三).mp4
  06 ISV开放接口开通功能实现(一).mp4
  07 ISV开放接口开通功能实现(二).mp4
  08 json驱动的Form表单组件封装(一).mp4
  09 json驱动的Form表单组件封装(二).mp4
  10 json驱动的Form表单组件封装(三).mp4
  11 ISV开放接口开通功能实现(三).mp4
  12 ISV开放接口开通功能实现(四).mp4
  13 使用动态Form表单实现API开通功能.mp4
  14 编辑时实现动态Form表单的数据回显.mp4
  15 ISV开放接口开通功能实现- bug修复.mp4
  16 开放API接口文档列表功能实现.mp4
06 支付系统实战
  01 支付业务介绍及代码生成.mp4
  02 产品配置功能实现(一)- 快速实现增删改查功能.mp4
  03 使用vue的globalProperties对象定义全局方法.mp4
  04 通道配置功能实现(一).mp4
  05 通道支持的银行卡及费率设置面板组件封装1(二).mp4
  06 通道支持的银行卡及费率设置面板组件封装2 (三).mp4
  07 通道支持的银行卡及费率设置面板组件封装3 (四).mp4
  08 通道配置功能实现(五)- 新增、编辑完整功能实现.mp4
  09 机构通道配置功能实现(一).mp4
  10 机构通道配置功能实现(二).mp4
  11 机构通道配置功能实现(三).mp4
  12 机构通道配置功能实现(四).mp4
  13 渠道管理功能实现.mp4
  14 商户管理功能实现(一)- 列表功能实现.mp4
  15 商户管理功能实现(二)- 新增编辑组件步骤条效果实现.mp4
  16 商户管理功能实现(三)- 前三步表单效果渲染.mp4
  17 商户管理功能实现(四)- 点击下一步时校验当前步骤的表单.mp4
  18 商户管理功能实现(五)- 图片上传组件封装.mp4
  19 商户管理功能实现(六)- 使用图片上传组件渲染影像资料表单.mp4
  20 商户管理功能实现(七)- 商户支付产品开通组件静态效果实现.mp4
  21 商户管理功能实现(八)- 商户支付产品开通组件动态效果实现.mp4
  22 商户管理功能实现(九)- 商户支付产品开通组件多表单同时校验.mp4
  23 商户管理功能实现(十)- 商户新增功能实现.mp4
  24 商户管理功能实现(十一)- 商户编辑功能实现.mp4
  25 商户管理功能实现(十二)- 商户新增编辑组件的数据清理实现.mp4
07 主页功能完善
  01 使用keep-alive组件缓存页面组件.mp4
  02 使用VueUse库来实现全屏功能.mp4
  03 修改密码功能实现.mp4
  04 侧边栏主题设置实现.mp4
  05 菜单主题设置和头部固定实现.mp4
  06 系统主题设置实现.mp4