1.修改员工

对于修改功能，分两步实现：

- 点击 “编辑” 根据ID查询员工的信息，回显展示

- 点击 “保存” 按钮，修改员工的信息

查询回显

- 为 "编辑" 按钮绑定事件

（<el-button type="primary" size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon> 编辑</el-button>）

- 在 <script> </script> 中定义 edit函数

注：这里需要根据id查询员工信息，所以此时要import导入 queryInfoApi

- 打开浏览器，点击编辑按钮，测试数据回显

修改员工

由于修改员工与新增员工共用一个 Dialog对话框。 点击保存按钮时，只需要根据 id 来判别是新增员工，还是修改员工。

对保存员工的函数进行优化：

打开浏览器，进行测试

2.删除员工

在删除员工信息时，有两个操作入口：

点击每条记录之后的“删除”按钮，删除当前这条记录；

选择前面的复选框，选中要删除的员工，点击“批量删除”之后，会批量删除员工信息；

删除单个：

- 为 "删除" 按钮 绑定事件

- 在 <script> </script> 中定义函数

这里用到了ElmentPlus中的消息确认框 ElMessageBox，就记得需要引入进来这个组件

import { ElMessage, ElMessageBox } from 'element-plus'

- 打开浏览器进行测试

批量删除

- 为复选框绑定事件 @selection-change

（<el-table :data="empList" border style="width: 100%" @selection-change="handleSelectionChange">）

（<el-button type="primary" size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon> 编辑</el-button>）

（<el-button type="danger" size="small" @click="deleteById(scope.row.id)"><el-icon><Delete /></el-icon> 删除</el-button>）

- 定义handleSelectionChange函数

- 为”批量删除“按钮绑定事件

- 在 <script> </script> 中定义函数

- 打开浏览器，测试

3.登陆退出

登录页面所在位置为：src/views/login/index.vue，基本的页面布局，已经写好

可以在浏览器中访问路径：http://localhost:5173/login 访问到登录页面

登录

- 定义登录请求的api : src/api/login.js

- 在 src/views/login/index.vue 中增加如下代码:

在登录成功之后，需要记录用户的登录信息，这里可以直接将用户的登录信息记录在浏览器端的 localStorage 本地存储中，以后需要使用登录的相关信息，直接从 localStorage 中取出即可

注：

localStorage是浏览器提供的本地存储机制 (5MB)。

存储形式为key-value形式，键和值都是字符串类型。

API方法：

localStorage.setItem(key, value)

localStorage.getItem(key)

localStorage.removeItem(key)

localStorage.clear()

携带令牌访问

在后续的每一次Ajax请求中都获取 localStorage 中的令牌，在请求头中将令牌携带到服务端。 如果这么做，就会非常麻烦，需要在每一次ajax请求的时候获取中存储在 localStorage 中的令牌，并携带到服务端，是非常繁琐的

可以思考一下，目前项目的Ajax请求，都是基于Axios发送的，而在项目中，自己定义了一个axios的请求对象request。所有的异步请求，都是基于request对象发起的。 所以，可以借助于axios中提供的拦截器来进行统一处理

需要在request.js 中通过axios的拦截器实现此功能

响应401跳转到登录页面

用户未登录的情况下访问服务器，服务器会响应401状态码，但是前端并不会跳转到登录页面。 因为，前端并未做任何的拦截判断。接下来实现此功能，只需要在服务端将数据响应给前端时，在axios的响应拦截器中统一判断处理即可

需要在request.js 中通过axios的响应拦截器实现此功能：

展示登录用户

增加如下代码：

打开浏览器，完成登录之后，就可以看到在退出登录之后，就显示出了当前登录员工的姓名

退出

增加如下代码：

打开浏览器，完成登录之后，就可以看到在退出登录之后，就显示出了当前登录员工的姓名。然后点击退出登录,点击确定之后，就会退出登录，跳转到登录页面

图片上传401问题

图片上传的时候，服务器端响应 401：

图片上传使用的是ElementPlus 中提供的 el-upload 组件，请求服务端的时候并未通过axios，所以也并不会通过配置的axios的拦截器，携带请求头token 了。 服务器端，拦截到请求之后，发现未携带令牌

处理思路：

页面加载完毕后，从localStorage中获取登录员工信息，然后获取到token令牌。

然后在文件上传时，在请求头中将令牌携带到服务端

步骤

- 在 src/views/emp/index.vue 中的 <script></script> 添加如下代码:

- 在 src/views/emp/index.vue 中的 <template></template> 添加如下代码

开浏览器，测试一下文件上传，在文件上传时，在请求头中携带了token令牌

4.打包部署

前端项目最终开发完毕之后，是需要打包，然后部署在nginx服务器上运行的

打包

直接双击npm脚本中的 build 即可将项目打包，打包后的文件会出现在 dist 目录中

部署

打包完成之后，就可以将打包后的项目，部署到 nginx 服务器上了，记得将nginx解压到一个没有中文不带空格的目录中 

然后直接将 dist 目录中的内容，拷贝到nginx的解压目录中的 html 中即可 (html目录下原有的两个文件, 可以直接删除)

在nginx服务器的核心配置文件 conf/nginx 中，在 http 配置块里面 添加如下反向代理的配置：

就可以双击 nginx.exe 启动项目了。 访问 http://localhost

注：Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat –ano | findStr 80)

Nginx服务器启动、重载、停止的相关命令：

启动：nginx.exe

重载：nginx.exe -s reload

停止：nginx.exe -s stop