从xml中解析数据到web界面

gain_and_follow_fate

已于 2023-12-21 23:23:45 修改

阅读量581

点赞数 8

文章标签： xml 前端

于 2023-12-21 23:09:41 首次发布

本文链接：https://blog.csdn.net/weixin_47195668/article/details/135141776

版权

案例来源：黑马javaweb响应案例，若想详细了解：指路黑马程序员javaweb课程
案例描述：解析emp.xml文件，获取数据做相应处理转出成json响应到web界面
环境：该项目是基于springboot框架，要建springboot项目
在这里插入图片描述
1、要解析XML文件，需要引入dom4j依赖，dom4j坐标为：
一定要将坐标复制到<dependencies>根标签下，复制到其他地方不能正确引入jar包。【我最开始放在了<dependencies>标签下，但<dependencies>，没注意看<dependencies>的外面还有一层标签，引入jar包一直失败。】

<dependency>
    <groupId>org.dom4j</groupId>
    <artifactId>dom4j</artifactId>
    <version>2.1.3</version>
</dependency>

若想引入其他jar包，坐标参考官方网址：https://mvnrepository.com/
2、将XML文件放在/src/main/resources下，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>

3、根据XML定义一个员工的javabean类，封装数据。

public class Employee {
    private String name;
    private Integer age;
    private String image;
    private String gender;
    private String job;

    public Employee() {
    }

    public Employee(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 "Employee{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", image='" + image + '\'' +
                ", gender='" + gender + '\'' +
                ", job='" + job + '\'' +
                '}';
    }
}

4、XML解析工具类，放在/src/main/java/com/example/utils/XmlParserUtils.java下

import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import java.io.File;
import java.lang.reflect.Constructor;
import java.util.ArrayList;
import java.util.List;

public class XmlParserUtils {

    public static <T> List<T> parse(String file , Class<T> targetClass)  {
        ArrayList<T> list = new ArrayList<T>(); //封装解析出来的数据
        try {
            //1.获取一个解析器对象
            SAXReader saxReader = new SAXReader();
            //2.利用解析器把xml文件加载到内存中,并返回一个文档对象
            Document document = saxReader.read(new File(file));
            //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();

                //组装数据 获取有参构造器，参数传类型.class
                Constructor<T> constructor = targetClass.getDeclaredConstructor(String.class, Integer.class, String.class, String.class, String.class);
                constructor.setAccessible(true);
                // newInstance()方法用于创建和初始化此构造函数的新实例，并将初始化参数作为参数传递给此方法。
                T object = constructor.newInstance(name, Integer.parseInt(age), image, gender, job);

                list.add(object);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }
}

5、web页面，emp.html，要显示的数据从tableData中拿到，tableData是通过axios异步请求获取的数据，即拿到服务器端响应的数据。用的是vue框架和element-ui组件。放在/src/main/resources/static下。【可以通过新建vue项目，安装element-ui组件，生成依赖，一起放在这个文件夹下】
在这里插入图片描述
这里js文件夹包括vue.js，和axios.js；element-ui是安装element-ui组件时安装的依赖。本文最上面的压缩包就是这三个文件。

<!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、数据统一响应格式。Result.java，与Employee.java同一级目录。

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

    public Result() {
    }

    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }

    public Result(Integer code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

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

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

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

7、编写controller程序，处理请求，响应数据。路径/src/main/java/com/example/controller/EmpRespController.java

package com.example.controller;

import com.example.pojo.Employee;
import com.example.pojo.Result;
import com.example.utils.XmlParserUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.File;
import java.util.List;

@RestController
public class EmpRespController {
    @RequestMapping("/listEmp")
    public Result getEmpData(){
        // 加载并解析emp.xml
        String file = this.getClass().getClassLoader().getResource("emp.xml").getFile();
        // 原来 类.class 是可以直接传的
        List<Employee> list = XmlParserUtils.parse(file, Employee.class);
        // 对数据进行转换，性别，工作
        list.stream().forEach(emp -> {
            String gender = emp.getGender();
            if("1".equals(gender)){
                emp.setGender("男");
            }
            else if("2".equals(gender)){
                emp.setGender("女");
            }

            String job = emp.getJob();
            if("1".equals(job)){
                emp.setJob("讲师");
            }
            else if("2".equals(job)){
                emp.setJob("班主任");
            }
            else if("3".equals(job)){
                emp.setJob("就业指导");
            }
        });
        // 响应数据
        return Result.success(list);
    }
}

7、对上面的响应代码拆分：实现三层架构，dao层，service层，controller层。
（1）dao层，解析xml文件，或与数据库连接，查询数据库数据。面向接口编程，编写dao层的接口，/src/main/java/com/example/dao/EmpDao.java

import com.example.pojo.Employee;

import java.util.List;

public interface EmpDao {
    public List<Employee> listEmp();
}

编写dao层接口的实现类，/src/main/java/com/example/dao/impl/EmpDaoImpl.java

import com.example.dao.EmpDao;
import com.example.pojo.Employee;
import com.example.utils.XmlParserUtils;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Repository;
import org.springframework.stereotype.Service;

import java.util.List;

//@Component
@Repository
public class EmpDaoImpl implements EmpDao {
    @Override
    public List<Employee> listEmp() {
        // 加载并解析emp.xml
        String file = this.getClass().getClassLoader().getResource("emp.xml").getFile();
        // 原来 类.class 是可以直接传的
        List<Employee> list = XmlParserUtils.parse(file, Employee.class);
        return list;
    }
}

（2）service层：对数据进行处理，本案例中主要是将获得的性别1或2翻译成男或女。
面向接口编程，编写service层的接口，/src/main/java/com/example/service/EmpService.java

import com.example.pojo.Employee;

import java.util.List;

public interface EmpService {
    public List<Employee> listEmp();
}

编写service层接口的实现类，/src/main/java/com/example/service/impl/EmpServiceImpl.java

import com.example.dao.EmpDao;
import com.example.dao.impl.EmpDaoImpl;
import com.example.pojo.Employee;
import com.example.service.EmpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Service;

import java.util.List;

//@Component //将当前类交给IOC容器管理，成为IOC容器中的bean
@Service //与@Component相同的作用
public class EmpServiceImpl implements EmpService {
    @Autowired  //运行时，IOC容器会提供该类型的bean对象，并赋值给该变量 - 依赖注入
    private EmpDao empDao;
    @Override
    public List<Employee> listEmp() {
        List<Employee> list = empDao.listEmp();
        // 对数据进行转换，性别，工作
        list.stream().forEach(emp -> {
            String gender = emp.getGender();
            if("1".equals(gender)){
                emp.setGender("男");
            }
            else if("2".equals(gender)){
                emp.setGender("女");
            }

            String job = emp.getJob();
            if("1".equals(job)){
                emp.setJob("讲师");
            }
            else if("2".equals(job)){
                emp.setJob("班主任");
            }
            else if("3".equals(job)){
                emp.setJob("就业指导");
            }
        });
        return list;
    }
}

（3）controller层：响应数据给前端。/src/main/java/com/example/controller/EmpRespController.java

import com.example.pojo.Employee;
import com.example.pojo.Result;
import com.example.service.EmpService;
import com.example.service.impl.EmpServiceImpl;
import com.example.utils.XmlParserUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.File;
import java.util.List;

@RestController
public class EmpRespController {
    @Autowired
    private EmpService empService;
    @RequestMapping("/listEmp")
    public Result getEmpData(){
        // 调用service，获取处理后的数据
        List<Employee> list = empService.listEmp();
        // 响应数据
        return Result.success(list);
    }
}

上面的代码，sevice层需要调dao层的函数，需要创建对象，会形成代码耦合，不利于后期维护，springboot提供了分层解耦机制，提供一个容器，将对象存在容器中，service层想调用就直接从容器中获得，而这两个机制的实现是通过两个注解@Component和@Autowired实现的，具体怎么使用见上面代码。