thymeleaf 显示学生信息表详细信息

编程初学者01

已于 2023-03-19 10:38:30 修改

阅读量387

点赞数 3

分类专栏： springboot 文章标签： java 开发语言 maven spring boot

于 2023-03-17 11:01:35 首次发布

本文链接：https://blog.csdn.net/m0_67587248/article/details/129601810

版权

springboot 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

springboot——显示学生表详细信息

各位读者请注意，此文章只是作为学习交流之用，目的是启发大家的思维，切勿照搬！！！
我们此次学习的目标是在一张学生信息表中点击显示学生详情信息，相比于以往的学习，这次的难度还是有所增加的。那么也欢迎大家指出文章的错误，当然，这篇文章由于时间关系，会写的很粗糙，毕竟只是简单的写一下啦。那我就快速开始了。
其中所需依赖和配置还需读者自行完成。

一、学生类

public class Student {
    private Integer xh;//学号
    private String xm;//姓名
    private Integer nl;//年龄
    private String xb;//性别
    private String bj;//班级
    private String rq;//入学日期
    private String qt;//其他
}

二、控制类

在这部分的话，大家要做两个映射，一个ok来到首页，一个xiangq，当点击首页的超链接时，前端会通过查询串读取数据传到后台，再用一个对象来接受数据，同时可以在xijie页面使用传来的数据，这样其实就可以达到我们想要的效果了。

@Controller
public class StudentController {
    @RequestMapping("/ok")
    public String iwei(Model model) {
        Student stu1 = new Student(1001, "张三", 20, "男", "计算机一班", "2021/9/1", " ");
        Student stu2 = new Student(1002, "李四", 21, "女", "计算机一班", "2021/9/1", "少数名族学生");
        Student stu3 = new Student(1003, "王五", 19, "女", "计算机二班", "2021/9/1", "体育特长生");
        Student stu4 = new Student(1004, "何六", 19, "男", "计算机二班", "2021/9/1", "艺术特长生");
        List<Student> listStu = new ArrayList<>();
        listStu.add(stu1);
        listStu.add(stu2);
        listStu.add(stu3);
        listStu.add(stu4);
        model.addAttribute("Student", listStu);
        return "shouye";
    }
        @RequestMapping( "/xiangq")
        public String heihei(Student stu,Model model){
        model.addAttribute("daa",stu);
        return "xijie";
        }
}

三、shouye页面

这个页面就没有什么好说的了，就是做一个学生信息表，里面有超链接，注意超链接的格式和要读取的数据就行。

<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/js/bootstrap.js}" rel="stylesheet">
</head>
<body>
<div class="container">
    <h2>学生信息管理</h2>
    <table class="table">
        <thead>
        <th>序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
        </thead>
        <tbody>
        <tr th:each="xyz:${Student}">
            <td th:text="${xyzStat.index+1}"></td>//添加序号
            <td th:text="${xyz.xh} "></td>
            <td th:text="${xyz.xm}"></td>
            <td th:text="${xyz.nl}"></td>
            <td th:text="${xyz.xb}"></td>
            <td><a th:href="@{/xiangq(id=${xyz.xh},name=${xyz.xm},age=${xyz.nl},sex=${xyz.xb},cla=${xyz.bj},time=${xyz.rq},other=${xyz.qt})}">详情</a></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

四、xijie页面

这里就是我们要点开的页面，当我们后端收到数据时，就可以在这个页面使用。对了，要查看数据是否被接收，可以在控制类下写System.out.println(stu)来查看收到前端的数据。

<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>详情页面</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/js/bootstrap.js}" rel="stylesheet">
</head>
<body>
<div th:class="container">
    <h1 th:text="${daa.xm}+'详细信息如下'"></h1>
<table th:class="table">
    <tr>
        <td>学号:</td>
        <td th:text="${daa.xh}"></td>
    </tr>
    <tr>
        <td>姓名:</td>
        <td  th:text="${daa.xm}"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td th:text="${daa.nl}"></td>
    </tr>
    <tr>
        <td>性别:</td>
        <td th:text="${daa.xb}"></td>
    </tr>
    <tr>
        <td>班级:</td>
        <td th:text="${daa.bj}"></td>
    </tr>
    <tr>
        <td>入学日期:</td>
        <td th:text="${daa.rq}"></td>
    </tr>
    <tr>
        <td>其他信息:</td>
        <td th:text="${daa.qt}"></td>
    </tr>
</table>
</div>
</body>
</html>