请求响应-响应-案例-Toy模板网

这篇具有很好参考价值的文章主要介绍了请求响应-响应-案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

案例需求

加载并解析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>

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

请求响应-响应-案例,Java Web学习跟踪笔记,java,前端,服务器,spring,spring boot,架构

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

首先用户在浏览器中发起对于前端页面的请求http://localhost:8080/emp.html ，在上述前端页面的代码可以知道，是一个基于Vue框架的前端页面，由Vue生命周期的知识可以知道写文章-CSDN创作中心

当发送请求时，访问前端页面时，Vue对象也就会开始创建，其生命周期也就开始了。在上述前端代码中，当Vue对象完成挂载之后就会自动执行创建的 mounted()方法，在该方法中会发送一个异步请求，当请求成功后，就将获取到的数据展示到html页面中。

前端发送的请求会被后端对应的Controller类进行处理，该控制类的具体运行原理为：

对于目标的XML文件进行解析以及处理，然后将获取到的数据进行转换，具体转换规则，有具体的注解可以参考，最终转换的数据结果是一个集合，至此，数据已经完成了处理，最后返回将数据以Result类规定的格式进行返回，最终响应给前端页面。对于Result类有疑问的朋友可以参考：

写文章-CSDN创作中心

使用postman对于后端进行调试：运行结果如下：

发送请求为：http://localhost:8080/listEmp文章来源地址https://www.toymoban.com/news/detail-555637.html

{
    "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": "就业辅导"
        }
    ]
}

到了这里，关于请求响应-响应-案例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！