一、练习目标
加载并解析 xml 文件中的数据,完成数据处理,并在页面展示,样例如下:
二、步骤记录
1.项目目录
2. EmpController.java
package com.itheima.controller; import com.itheima.pojo.Emp; import com.itheima.pojo.Result; import com.itheima.utils.XmlParserUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.io.InputStream; 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(); 修改为 InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream("emp.xml"); InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream("emp.xml"); List<Emp> empList = XmlParserUtils.parse(inputStream, Emp.class); //2. 对数据进行转换处理 - gender, job 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: 正畜级智慧参谋,4:副畜级活力委员 String job = emp.getJob(); if("1".equals(job)){ emp.setJob("正畜级大总管"); }else if("2".equals(job)){ emp.setJob("副畜级形象大使"); }else if("3".equals(job)){ emp.setJob("正畜级智慧参谋"); }else if("4".equals(job)){ emp.setJob("副畜级活力委员"); } }); //3. 响应数据 return Result.success(empList); } }3.Emp.java
package com.itheima.pojo; public class Emp { private String name; private Integer age; private String image; private String gender; private String job; public Emp() { } public Emp(String name, Integer age, String image, String gender, String job) { this.name = name; this.age = age; this.image = image; this.gender = gender; this.job = job; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public String getImage() { return image; } public void setImage(String image) { this.image = image; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } public String getJob() { return job; } public void setJob(String job) { this.job = job; } @Override public String toString() { return "Emp{" + "name='" + name + '\'' + ", age=" + age + ", image='" + image + '\'' + ", gender='" + gender + '\'' + ", job='" + job + '\'' + '}'; } }4.XmlParserUtils.java
package com.itheima.utils; import org.dom4j.Document; import org.dom4j.Element; import org.dom4j.io.SAXReader; import java.io.InputStream; import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.util.ArrayList; import java.util.List; public class XmlParserUtils { //parse方法:将方法参数 String file 修改为 InputStream inputStream。 public static <T> List<T> parse(InputStream inputStream, Class<T> targetClass) { ArrayList<T> list = new ArrayList<T>(); //封装解析出来的数据 try { //1.获取一个解析器对象 SAXReader saxReader = new SAXReader(); //2.利用解析器把xml文件加载到内存中,并返回一个文档对象 //将 saxReader.read(new File(file)); 修改为 saxReader.read(inputStream);。 Document document = saxReader.read(inputStream); //3.获取到根标签 Element rootElement = document.getRootElement(); //4.通过根标签来获取 user 标签 List<Element> elements = rootElement.elements("emp"); //5.遍历集合,得到每一个 user 标签 for (Element element : elements) { //获取 name 属性 String name = element.element("name").getText(); //获取 age 属性 String age = element.element("age").getText(); //获取 image 属性 String image = element.element("image").getText(); //获取 gender 属性 String gender = element.element("gender").getText(); //获取 job 属性 String job = element.element("job").getText(); //组装数据 Constructor<T> constructor = targetClass.getDeclaredConstructor(String.class, Integer.class, String.class, String.class, String.class); constructor.setAccessible(true); T object = constructor.newInstance(name, Integer.parseInt(age), image, gender, job); list.add(object); } } catch (Exception e) { e.printStackTrace(); } return list; } }5.emp.html
<!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>6.emp.xml
<?xml version="1.0" encoding="UTF-8" ?> <emps> <emp> <name>金毛狮王</name> <age>6</age> <image>https://img95.699pic.com/photo/60025/2131.jpg_wh300.jpg!/fh/300/quality/90</image> <!-- 1: 雄, 2: 雌 --> <gender>1</gender> <!-- 1: 正畜级大总管, 2: 副畜级形象大使, 3: 正畜级智慧参谋,4:副畜级活力委员 --> <job>1</job> </emp> <emp> <name>白眉鹰王</name> <age>3</age> <image>https://tse3-mm.cn.bing.net/th/id/OIP-C.D9ecxWXbFq0enDc62WnxbAHaE8?rs=1&pid=ImgDetMain</image> <gender>1</gender> <job>2</job> </emp> <emp> <name>飞毛腿王</name> <age>4</age> <image>https://tse3-mm.cn.bing.net/th/id/OIP-C.cRfi9VVQjkPemk_cOiyzGwHaE8?rs=1&pid=ImgDetMain</image> <gender>1</gender> <job>3</job> </emp> <emp> <name>低底盘王</name> <age>2</age> <image>https://pic2.zhimg.com/v2-0bf18b446deb4093c193d2782d7e38ef_r.jpg?source=1940ef5c</image> <gender>2</gender> <job>4</job> </emp> </emps>7.pom.xml中加上下面的依赖来解析XML
<dependency> <groupId>org.dom4j</groupId> <artifactId>dom4j</artifactId> <version>2.1.3</version> </dependency>三、重要说明
一开始,直接使用资源实例代码运行是失败的,原因大致为idea控制台的错误信息里显示了FileNotFoundException,这表明程序在尝试访问指定路径下的emp.xml文件时,该文件并不存在。问题出在EmpController类的list方法中,代码尝试通过getResource("emp.xml").getFile()获取文件的绝对路径,然而这种做法在某些情形下(像打包成 JAR 文件后)可能会失效。解决办法为采用InputStream来读取emp.xml文件,这样就能避免文件路径的问题。修改代码部分为:
1. 修改XmlParserUtils类,要让parse方法接收InputStream而不是文件路径。标注:
- 第 10 行:将方法参数
String file修改为InputStream inputStream。 - 第 18 行:将
saxReader.read(new File(file));修改为saxReader.read(inputStream);
2.修改EmpController类,使用InputStream来读取emp.xml文件。标注:
- 第 18 行:将
String file = this.getClass().getClassLoader().getResource("emp.xml").getFile();修改为InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream("emp.xml");
数据显示的问题解决后,出现新的问题:表格内容的图片无法显示,加载失败。原因为示例代码中的图片链接已失效,重新更换新的图片链接即可。