案例需求

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

emp.xml文件代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<emps><emp><name>金毛狮王</name><age>55</age><image>https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg</image><!-- 1: 男, 2: 女 --><gender>1</gender><!-- 1: 讲师, 2: 班主任 , 3: 就业指导 --><job>1</job></emp><emp><name>白眉鹰王</name><age>65</age><image>https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg</image><gender>1</gender><job>1</job></emp><emp><name>青翼蝠王</name><age>45</age><image>https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg</image><gender>1</gender><job>2</job></emp><emp><name>紫衫龙王</name><age>38</age><image>https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg</image><gender>2</gender><job>3</job></emp>
</emps>

步骤

在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<Emp> 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框架开发的前端框架，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>员工信息</title>
</head><link rel="stylesheet" href="element-ui/index.css">
<script src="./js/vue.js"></script>
<script src="./element-ui/index.js"></script>
<script src="./js/axios-0.18.0.js"></script><body>
<h1 align="center">员工信息列表展示</h1>
<div id="app"><el-table :data="tableData" style="width: 100%" stripe border><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>
</div>
</body><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
</style><script>new Vue({el: "#app",data() {return {tableData: []}},mounted() {axios.get('/listEmp').then(res => {if (res.data.code) {this.tableData = res.data.data;}});},methods: {}});
</script>
</html>

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

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

首先用户在浏览器中发起对于前端页面的请求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": "就业辅导"}]
}