《Web应用技术》第四次课后作业one

controller控制器读取xml文件并在页面显示

一、pom.xml导入dom4j

二、创建poetParseUtils工具

package com.example.demo.utils;
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 poetParseUtils {
    public static <T> List<T> parse(String file , Class<T> targetClass)  {
        Integer number=1;
        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.通过根标签来获取 writer 标签
            List<Element> elements = rootElement.elements("writer");

            //5.遍历集合,得到每一个 writer 标签
            for (Element element : elements) {
                //获取 author 属性
                String author = element.element("author").getText();
                //获取 gender 属性
                String gender = element.element("gender").getText();
                //获取 dynasty 属性
                String dynasty = element.element("dynasty").getText();
                //获取 title 属性
                String title = element.element("title").getText();
                //获取 style 属性
                String style = element.element("style").getText();

                //组装数据
                Constructor<T> constructor = targetClass.getDeclaredConstructor(Integer.class,String.class, String .class, String.class, String.class, String.class);
                constructor.setAccessible(true);
                T object = constructor.newInstance(number,author, gender, dynasty, title, style);

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

三、创建实体poet

package com.example.demo.pojo;

public class poet {
    private Integer number;
    private String name;
    private String gender;
    private String dynasty;
    private String title;
    private String style;
    

    public poet(Integer number, String name, String gender, String dynasty, String title,String style) {
        this.number=number;
        this.name = name;
        this.gender = gender;
        this.dynasty = dynasty;
        this.title = title;
        this.style = style;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getNumber() {
        return number;
    }

    public void setNumber(Integer number) {
        this.number = number;
    }

    public String getDynasty() {
        return dynasty;
    }

    public void setDynasty(String dynasty) {
        this.dynasty = dynasty;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getStyle() {
        return style;
    }

    public void setStyle(String style) {
        this.style = style;
    }

    @Override
    public String toString() {
        return "Emp{" +

                "number='" + number + '\'' +
                ", name=" + name +'\''+
                ", gender=" + gender +'\''+
                ", dynasty='" + dynasty + '\'' +
                ", title='" + title + '\'' +
                ", style='" + style + '\'' +
                '}';
    }
}

四、创建Result统一响应结果

package com.example.demo.pojo;

/**
 * 统一响应结果封装类
 */
public class Result {
    private Integer code ;//1 成功 , 0 失败
    private String msg; //提示信息
    private Object data; //数据 date

    public Result() {
    }
    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);
    }

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

五、在static下创建前端poet.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="number" label="编号" align="center" min-width="20%"></el-table-column>
    <el-table-column prop="name" label="姓名" align="center" min-width="20%"></el-table-column>
    <el-table-column prop="gender" label="性别" align="center" min-width="20%"></el-table-column>
    <el-table-column prop="dynasty" label="朝代" align="center" min-width="20%"></el-table-column>
    <el-table-column prop="title" label="头衔" align="center"  min-width="20%"></el-table-column>
    <el-table-column prop="style" 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('/poet').then(res=>{
        if(res.data.code){
          this.tableData = res.data.data;
        }
      });
    },
    methods: {
    }
  });
</script>
</html>

六、在controller下创建poetController

package com.example.demo.controller;

import com.example.demo.pojo.poet;
import com.example.demo.pojo.Result;
import com.example.demo.utils.poetParseUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class poetController {

    @RequestMapping("/poet")
    public Result list(){
        //1. 加载并解析emp.xml
        String file = this.getClass().getClassLoader().getResource("poem.xml").getFile();
        List<poet> poetList = poetParseUtils.parse(file, poet.class);

        //2. 对数据进行转换处理 - gender
        poetList.stream().forEach(writer -> {
            //处理 gender 1: 男, 2: 女
            String gender =writer.getGender();
            if("1".equals(gender)){
                writer.setGender("男");
            }else if("2".equals(gender)){
                writer.setGender("女");
            }


        });

        //3. 响应数据
        return Result.success(poetList);
    }

}

七、浏览器输入localhost:8080/poet.html