1.前后端分离开发
前端页面需要数据，可以通过发送异步请求，从后台工程获取
前端人员怎么知道后台返回数据的格式，后端端人员开发怎么知道前端人员需要的数据格式呢
前后台统一制定一套规范，前后台开发人员都需要遵循这套规范开发，这就是 接口文档
后台开发者开发一个功能的具体流程：
需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
前后台并行开发：各自按照接口文档进行开发，实现需求
测试：前后台开发完了，各自按照接口文档进行测试
前后段联调测试：前段工程请求后端工程，测试功能
2.页面布局
准备工作：
-
导入资料中准备的基础工程到VsCode
-
启动前端项目，访问该项目
-
打开浏览器，访问
然后就可以看到最基本的布局：
实现这个页面布局，可以借助ElementPlus中提供的container容器
Container布局容器，用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器， 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列
<el-header>：顶栏容器
<el-aside>：侧边栏容器
<el-main>：主要区域容器
<el-footer>：底栏容器
注：当 <el-container> 子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列
左侧菜单布局：
左侧菜单栏的制作，也不需要自己实现，其实在 ElementPlus 中已经提供了对应的菜单组件，可以直接参考
可以参考其提供的源码，复制到侧边栏部分 <el-aside> ... </el-aside>，然后根据案例的需要进行改造，改造成需要的样子即可
最终左侧菜单栏的代码如下 ，可以直接导入到 views/layout/index.vue 的侧边栏区域 <el-aside> ... </el-aside>
如何实现动态变化呢
3.VueRouter
Vue的官方路由， 为Vue提供富有表现力、可配置的、方便的路由。
Vue中的路由，主要定义的是路径与组件之间的对应关系
比如，打开一个网站点击左侧菜单，地址栏的地址发生变化，地址栏地址一旦发生变化，在主区域显示对应的页面组件
VueRouter主要由以下三个部分组成：
VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成<a>
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
基础路由配置：
步骤一：在 views/layout/index.vue 中，调整代码
-
在左侧菜单栏的
<el-menu>标签上添加router属性，这会让 Element Plus 的<el-menu>组件自动根据路由来激活对应的菜单项 -
使用
<router-view>组件来渲染根据路由动态变化的内容 -
确保每个
<el-menu-item>的index属性值与你想要导航到的路径相匹配
步骤二：在 router/index.js 中配置请求路径与组件之间的关系
两步操作之后，可以看到在页面上，点击左侧菜单，右侧主展示区域，就会显示出对应的页面了
完善路由配置：
经过测试发现，如果访问 /login 路径，会发现登录页面是在layout页面中嵌套展示的，这是不合适的
优化配置，在router/index.js中做下面配置：
当点击左侧菜单栏的员工管理菜单时，最终地址栏会访问路径 /emp
此时VueRouter，会自动的到所配置的路由表（router/index.js）中，查找与该路径对应的组件，并展示在路由展示组件<router-view> 对应的位置中
4.部门管理
部门管理的页面内容，写在 src/views/dept/index.vue 中
部门列表：
具体的页面布局代码
表格中每一列展示的属性 prop 都是根据接口文档来的
加载数据：
在打开页面之后，需要自动加载部门数据，需要基于axios发送异步请求，动态获取数据
需要在 src/views/dept/index.vue 中增加如下代码，在页面加载完成发送异步请求，动态加载的Axios
（https://apifoxmock.com/m1/3128855-1224313-default/depts）
可以看到数据可以正常的查询出来，并展示在页面中
问题：直接在Vue组件中，基于axios发送异步请求，存在什么问题
答：请求路径难以维护，数据解析繁琐
程序优化：
在前端项目开发时，通常会定义一个请求处理的工具类 src/utils/request.js ， 在这个工具类中，对axios进行了封装
与服务端进行异步交互的逻辑，通常会按模块封装在一个单独的API中，如：src/api/dept.js
修改 src/views/dept/index.vue 中的代码
现在就不需要每次直接调用axios发送异步请求了，只需要将定义的对应模块的API导入进来
在 vite.config.js 中配置前端请求服务器的信息
然后启动服务器端程序
新增部门：
新增部门和编辑部门，可以同用一个Dialog对话框。而这个对话框中，主要包括两个ElementPlus中的组件，分别为：Dialog对话框组件，Form表单组件
在 src/views/dept/index.vue 中完成页面布局，并编写交互逻辑，完成数据绑定
在 src/api/dept.js 中增加代码：
src/api/dept.js 文件中完整代码：
打开浏览器进行测试
表单校验：
'Form 组件允许验证用户的输入是否符合规范，来帮助找到和纠正错误。Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可
步骤：
通过ref属性注册元素的引用。
定义表单校验规则，通过rules属性与表单绑定，并通过prop属性绑定对应的表单项。
表单提交时，校验表单，校验通过，则允许提交表单
修改部门：
交互逻辑：
点击 编辑 按钮，根据ID进行查询，弹出对话框，完成页面回显展示（查询回显）
点击 确定 按钮，保存修改后的数据，完成数据更新操作（保存修改）
查询回显：
在 src/api/dept.js 中定义根据id查询的请求
在 src/views/dept/index.vue 中添加根据ID查询回显的逻辑，为修改按钮绑定事件 <template></template>
在 <script> </script> 添加JS逻辑
打开浏览器，测试
保存修改：
由于 新增部门 和 修改部门使用的是同一个Dialog对话框，当前点击 "确定" 按钮的时候，有可能执行的是新增操作，也有可能是修改操作
如何分辨是新增还是修改：
只需要根据 deptForm 对象的id属性值，来判断即可。 如果没有id，则是新增操作 ；如果有id，则是修改操作
步骤：
在 src/api/dept.js 中增加如下修改部门的请求
在 src/views/dept/index.vue 中引入上述函数，并完善(修改) save 函数的逻辑
import { queryAllApi, addDeptApi, queryInfoApi, updateDeptApi } from '@/api/dept'
打开浏览器，测试修改员工功能
删除部门：
点击删除按钮，需要删除当前这条数据，删除完成之后，刷新页面，展示出最新的数据
由于删除是一个比较危险的操作，为避免误操作，通常会在点击删除之后，弹出确认框进行确认
Element 组件：ElMessageBox消息弹出框组件
步骤：
在 src/api/dept.js 中增加如下删除部门的请求
在 src/views/dept/index.vue 中为 删除 按钮绑定事件
<el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
在 src/views/dept/index.vue 编写根据ID删除数据的函数
上述，用到了ElementPlus中的 ElMessageBox组件，需要 import 导入进来
打开浏览器，测试删除员工功能