案例需求
加载并解析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": "就业辅导"
}
]
}
