一共50个课时 录制时间是2024年5月份左右，此内容带课件前端基于ES6 版 JavaScript开发课程中模块的所有接口，均调用讲师个人编写的DR-API实现，接口调试依托 DR-API调试工···
一共50个课时 录制时间是2024年5月份左右，此内容带课件
前端基于ES6 版 JavaScript开发
课程中模块的所有接口，均调用讲师个人编写的DR-API实现，接口调试依托 DR-API调试工具完成。购买前提前确认调试工具可正常运行
# 内容介绍
## 一、项目前期准备与基础配置
Vue3后台管理系统核心内容，再从实操出发，讲解基于Vite搭建Vue3项目、规划高可扩展的项目目录结构，同时完成环境变量配置、路径别名@与VSCode路径提示设置；还会教学Vue Router路由、ElementPlus组件库、Pinia状态管理及持久化插件的安装与配置，最后讲解DR-API接口调试工具的使用方法，为项目开发搭建完整基础环境。
## 二、登录模块开发与权限控制
聚焦登录页面开发，从页面布局、表单校验入手，讲解axios安装与登录接口调用、jwt token解码方法，以及通过Pinia存储用户数据并实现页面跳转；核心讲解Vue Router身份验证与页面拦截机制，同时完成后台主页面布局、重定向配置，封装侧边栏和Header核心组件，实现登录用户显示、退出登录功能，并开发登录状态过期校验逻辑，保障系统权限安全。
## 三、核心业务模块开发-管理员管理
开展管理员管理模块全流程开发，先完成列表页面布局并讲解ElementPlus默认样式重写方法，封装axios并调用管理员列表接口；再依次实现添加、删除、编辑管理员的功能开发，分别实践async/await异步语法、路由传参等核心知识点，覆盖管理员模块增删改查全业务场景。
## 四、核心业务模块开发-类别管理
进行类别管理模块开发，完成类别列表页面布局后，讲解axios的api层封装技巧，实现类别列表、删除功能的api调用；同时实践路由优化（a标签替换为router-link）、Vue3生命周期函数onUpdated、自动侦听器watchEffect的使用；还会封装添加类别弹出层组件，通过**依赖注入**实现跨组件通信，完成添加、编辑类别的功能开发，掌握Vue3组件通信核心方案。
## 五、核心业务模块开发-文章与导航管理
### 文章管理
完成文章列表页面布局与分页功能开发，实现文章删除、添加功能；核心讲解富文本编辑器wangEditor的集成、工具栏配置与图片、缩略图上传功能开发，同时完成文章编辑功能的实现，满足富文本内容管理需求。
### 导航管理
开展导航管理模块开发，完成导航列表页面布局与api调用，实现导航删除功能；通过**Pinia**实现组件间数据传递，完成添加、编辑导航功能开发，同时实现动态渲染侧边栏的功能，让系统导航与业务数据联动。
## 六、项目上线与资源配套
讲解项目生产环境打包流程，以及将打包后的项目部署至Nginx服务器的实操步骤，实现项目从开发到上线的全流程落地；同时提供完整的课程项目源码下载，方便学习者对照实操、二次开发。
