Spring Boot 请求响应与 Element UI 员工列表展示

涉及的主要文件如下：

src/main/java/com/example/fourth
├─ controller
│  ├─ RequestController.java
│  ├─ ResponseController.java
│  ├─ ResponseController1.java
│  └─ EmpController.java
└─ pojo
   ├─ Address.java
   ├─ User.java
   └─ Result.java

src/main/resources/static
└─ emp.html

一、项目中的请求处理

RequestController 用于测试不同类型的请求参数。

1. 简单参数

项目通过方法形参接收姓名和年龄：

@GetMapping("/simpleParam")
public String simpleParam(String name, Integer age) {
    System.out.println(name + " : " + age);
    return "OK";
}

访问示例：

http://localhost:8080/simpleParam?name=张三&age=20

项目还为 /simpleParam 定义了 POST 请求：

@PostMapping("/simpleParam")
public String simpleParam2(String name, Integer age) {
    System.out.println(name + " : " + age);
    return "OK";
}

2. 实体参数

项目使用 User 接收姓名、年龄和地址：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private String name;
    private Integer age;
    private Address address;
}

接收简单实体参数：

@RequestMapping("/simplePojo")
public String simplePojo(User user) {
    System.out.println(user);
    System.out.println(user.getName() + " : " + user.getAge());
    return "OK";
}

请求示例：

http://localhost:8080/simplePojo?name=张三&age=20

接收包含地址的复杂实体参数：

@RequestMapping("/complexPojo")
public String complexPojo(User user) {
    System.out.println(user);
    return "OK";
}

请求示例：

http://localhost:8080/complexPojo?name=张三&age=20&address.province=广东&address.city=深圳

3. 数组和集合参数

项目使用数组接收多个爱好：

@RequestMapping("/arrayParam")
public String arrayParam(String[] hobby) {
    System.out.println(Arrays.toString(hobby));
    return "OK";
}

使用集合接收时添加 @RequestParam：

@RequestMapping("/listParam")
public String listParam(@RequestParam List<String> hobby) {
    System.out.println(hobby);
    return "OK";
}

两个接口都可以使用下面的参数进行测试：

hobby=Java&hobby=篮球

4. 日期时间参数

项目使用 @DateTimeFormat 指定日期时间格式：

@RequestMapping("/dateParam")
public String dateParam(
        @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
        LocalDateTime updateTime) {
    System.out.println(updateTime);
    return "OK";
}

请求示例：

http://localhost:8080/dateParam?updateTime=2026-06-15%2010:30:00

5. JSON 参数

项目使用 @RequestBody 将 JSON 数据封装为 User：

@RequestMapping("/jsonParam")
public String jsonParam(@RequestBody User user) {
    System.out.println(user);
    return "OK";
}

请求体示例：

{
  "name": "张三",
  "age": 20,
  "address": {
    "province": "广东",
    "city": "深圳"
  }
}

6. 路径参数

项目使用 @PathVariable 接收地址中的员工编号：

@RequestMapping("/path/{id}")
public String pathParam(@PathVariable Integer id) {
    System.out.println(id);
    return "OK";
}

请求示例：

http://localhost:8080/path/1001

二、统一响应格式

ResponseController1 和 EmpController 使用 Result 统一封装响应数据。

public class Result {
    private Integer code;
    private String msg;
    private Object data;

    public static Result success() {
        return new Result(1, "success", null);
    }

    public static Result success(Object data) {
        return new Result(1, "success", data);
    }

    public static Result error(String msg) {
        return new Result(0, msg, null);
    }
}

ResponseController1 返回统一格式的地址数据：

@RequestMapping("/getAddr1")
public Result getAddr() {
    Address addr = new Address();
    addr.setProvince("广东1");
    addr.setCity("深圳1");
    return Result.success(addr);
}

接口响应：

{
  "code": 1,
  "msg": "success",
  "data": {
    "province": "广东1",
    "city": "深圳1"
  }
}

员工列表接口也使用相同的结构：

@RequestMapping("/listEmp")
public Result list() {
    // 加载员工数据并完成转换
    return Result.success(empList);
}

因此，页面可以通过 code 判断接口是否成功，再从 data 中取得员工集合。

三、Element UI 表格样式调整

员工信息列表页面为 src/main/resources/static/emp.html。将带斑马纹的表格改为基础表格时，删除 el-table 上的 stripe 属性；项目中的 border 属性也一并删除。

表格宽度设置为窗口的 60%，并使用 margin: 0 auto 水平居中：

<el-table
    :data="tableData"
    style="width: 60%; margin: 0 auto;">

    <el-table-column
        prop="name"
        label="姓名"
        align="center"
        min-width="20%">
    </el-table-column>

    <el-table-column
        prop="age"
        label="年龄"
        align="center"
        min-width="20%">
    </el-table-column>

    <el-table-column
        label="图像"
        align="center"
        min-width="20%">
        <template slot-scope="scope">
            <el-image
                :src="scope.row.image"
                style="width: 80px; height: 50px;">
            </el-image>
        </template>
    </el-table-column>

    <el-table-column
        prop="gender"
        label="性别"
        align="center"
        min-width="20%">
    </el-table-column>

    <el-table-column
        prop="job"
        label="职位"
        align="center"
        min-width="20%">
    </el-table-column>
</el-table>

总结

项目中的请求部分集中在 RequestController，包括简单参数、实体参数、数组、集合、日期、JSON 和路径参数。响应部分通过 ResponseController 展示不同返回类型，再通过 Result 将响应统一为 code、msg 和 data。

emp.html 使用 Axios 请求 /listEmp，取得 Result.data 中的员工集合，最后由 Element UI 的 el-table 完成员工信息展示。