请求响应-响应-案例

案例需求

加载并解析emp.xml文件中的数据，完成数据处理，并在页面展示

emp.xml文件代码如下：

    
        金毛狮王
        55
        https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg
        
        1
        
        1
    

    
        白眉鹰王
        65
        https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg
        1
        1
    

    
        青翼蝠王
        45
        https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg
        1
        2
    

    
        紫衫龙王
        38
        https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg
        2
        3
    

步骤

• 在pom.xml文件中引入dom4j的依赖，用于解析XML文件
• 引入资料中提供解析XML的工具类XMLParserUtils、对应的实体类Emp、XML文件emp.xml
• 引入资料中提供的静态文件，放在resource下的static目录下
• 编写Controller程序，处理请求，响应数据

具体Controller类代码如下：

package com.example.Controller;

import com.example.POJO.Emp;
import com.example.POJO.Result;
import com.example.utils.XmlParserUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class EmpController {
    @RequestMapping("listEmp")
    public Result List() {
        // 1.加载并解析emp.xml文件
        String file = this.getClass().getClassLoader().getResource("emp.xml").getFile();
        List empList = XmlParserUtils.parse(file, Emp.class);
        // 2.对数据进行转换处理
        empList.stream().forEach(emp -> {
            // 处理gender： 1：男；2：女
            String gender = emp.getGender();
            if ("1".equals(gender)) {
                emp.setGender("男");
            } else if ("2".equals(gender)) {
                emp.setGender("女");
            }
            // 处理job：1：讲师；2：班主任；3：就业辅导
            String job = emp.getJob();
            if ("1".equals(job)) {
                emp.setJob("讲师");

            } else if ("2".equals(job)) {
                emp.setJob("班主任");
            } else if ("3".equals(job)) {
                emp.setJob("就业辅导");
            }
        });
        // 3.响应数据
        return Result.success(empList);
    }
}

基于Vue框架开发的前端框架，具体代码如下：

    
    
    
    








员工信息列表展示

    
        
        
        
            
        
        
        
    

 发送请求，接收响应，具体结果如下：

以下为我对于此次案例的理解

首先用户在浏览器中发起对于前端页面的请求http://localhost:8080/emp.html ，在上述前端页面的代码可以知道，是一个基于Vue框架的前端页面，由Vue生命周期的知识可以知道写文章-CSDN创作中心

 当发送请求时，访问前端页面时，Vue对象也就会开始创建，其生命周期也就开始了。在上述前端代码中，当Vue对象完成挂载之后就会自动执行创建的  mounted()方法，在该方法中会发送一个异步请求，当请求成功后，就将获取到的数据展示到html页面中。

前端发送的请求会被后端对应的Controller类进行处理，该控制类的具体运行原理为：

对于目标的XML文件进行解析以及处理，然后将获取到的数据进行转换，具体转换规则，有具体的注解可以参考，最终转换的数据结果是一个集合，至此，数据已经完成了处理，最后返回将数据以Result类规定的格式进行返回，最终响应给前端页面。对于Result类有疑问的朋友可以参考：

写文章-CSDN创作中心

使用postman对于后端进行调试：运行结果如下：

发送请求为：http://localhost:8080/listEmp

{
    "code": 1,
    "msg": "success",
    "data": [
        {
            "name": "金毛狮王",
            "age": 55,
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
            "gender": "男",
            "job": "讲师"
        },
        {
            "name": "白眉鹰王",
            "age": 65,
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg",
            "gender": "男",
            "job": "讲师"
        },
        {
            "name": "青翼蝠王",
            "age": 45,
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg",
            "gender": "男",
            "job": "班主任"
        },
        {
            "name": "紫衫龙王",
            "age": 38,
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg",
            "gender": "女",
            "job": "就业辅导"
        }
    ]
}