瑞吉外卖 - 编辑员工信息功能（9）

news2025/1/19 17:05:37

某马瑞吉外卖单体架构项目完整开发文档，基于 Spring Boot 2.7.11 + JDK 11。预计 5 月 20 日前更新完成，有需要的胖友记得一键三连，关注主页 “瑞吉外卖” 专栏获取最新文章。
相关资料：https://pan.baidu.com/s/1rO1Vytcp67mcw-PDe_7uIg?pwd=x548
提取码：x548

文章目录

- 1.需求分析
- 2.代码开发
- - 2.1 执行流程分析
  - 2.2 代码实现
- 3.功能测试

1.需求分析

在员工管理列表页面点击【编辑】按钮，跳转到编辑页面，在编辑页面回显员工信息并进行修改，最后点击【保存】按钮完成编辑操作：

2.代码开发

2.1 执行流程分析

在开发代码之前需要梳理一下操作过程和对应的程序的执行流程：

点击【编辑】按钮时，页面跳转到 static/backend/page/member/add.html，并在 url 中携带员工 id 参数；
在 add.html 页面获取 url 中的员工 id 参数；
发送 ajax 请求，请求服务端，同时提交员工 id 参数；
服务端接收请求，根据员工 id 查询员工信息，将员工信息以 json 形式响应给页面；
页面接收服务端响应的 json 数据，通过 VUE 的数据绑定进行员工信息回显；
点击保存按钮，发送 ajax 请求，将页面中的员工信息以 json 方式提交给服务端；
服务端接收员工信息，并进行处理，完成后给页面响应；
页面接收到服务端响应信息后进行相应处理。

注意：add.html 页面为公共页面，新增员工和编辑员工都是在此页面操作。

那么当我们点击【编辑】按钮时用于数据回显发送的 URL 请求地址是什么呢？我们可以通过浏览器调试工具进行查看：

可见，点击【编辑】按钮时会跳转到 /backend/page/member/add.html 页面，并且携带 id 参数。我们可以从 static/backend/page/member/list.html 页面的如下代码处开始追踪：

上图可知点击编辑按钮后会触发一个 addMemberHandle(scope.row.id) 函数，参数就是员工 id，按住 ctrl 点击该函数进一步追踪：

可见，前端在跳转 /backend/page/member/add.html 静态页面的同时就将方法参数（也就是员工 id）拼接在了后面了。那么我们继续来看 add.html 页面又做了那些处理，对应位置如下：

进入上述 requestUrlParam('id') 方法如下：

简单来看的话，不难发现该方法其实就是对请求的 URL 进行处理，获取其中的 id 的值进行返回，最终 add.html 页面的 this.id 的值就会之对应员工的 id 值了：

顺着上图箭头逻辑，最后会执行一个 queryEmployeeById(this.id) 函数，我们继续追踪该方法：

可以看到，该函数的作用其实就是根据 id 值发送一个 Ajax 请求，并且是一个 GET 请求，请求 URL 为 /employee/${id}。

得到第一个信息：服务端 Controller 需要处理 URL 为 /employee/${id} 的 GET 请求用于根据员工 id 查询员工信息用于回显。

接下来我们继续看点击【保存】按钮后的处理逻辑，由于前面说过编辑与新增公用一个 add.html 因此我们追踪到该页面的对应位置如下：

进入 submitForm('ruleForm', false) 函数：

该函数内部调用了一个 addEmployee(params) 函数，具体如下：

可以看到当我们点击【保存】按钮时，其实就是通过 ajax 发送了一个 POST 请求，请求 URL 为 /employee 同时携带的数据为 params 其中就是从编辑页面表单中获取的数据。并且我们已经在 EmployeeController 中写过了对应的方法用于新增员工，因此只需要编写通过 id 查询员工的处理方法即可。

2.2 代码实现

经过上面的分析我们明确了需要完成的任务：服务端 Controller 需要处理 URL 为 /employee/${id} 的 GET 请求用于根据员工 id 查询员工信息用于回显。

对应的代码如下：

@RestController
@RequestMapping("/employee")
public class EmployeeController {
    /**
     * 根据 id 查询员工信息
     * @param id 员工 id
     * @return 响应对象
     */
    @GetMapping("/{id}")
    public R<Employee> getById(@PathVariable Long id){
        Employee employee = employeeService.getById(id);
        // 如果查询到了员工信息，则返回成功结果
        if(employee != null){
            return R.success(employee);
        }
        // 如果没有查询到员工信息，则返回失败结果
        return R.error("未查询到对应员工信息");
    }
    
    // 省略其他方法
}

上面，我们通过占位符 {id} 表示在访问该接口时需要传入一个 id 参数，也就对应了请求的 /employee/${id}。并且在方法声名中，我们通过 @PathVariable 注解将 URL 中的占位符 {id} 对应的值赋给方法参数 id，即将访问接口时传入的 id 参数赋值给方法参数 id，使得方法能够获取该参数并进行后续操作。