理论

后端通过@GetMapping获取数据，把数据存储在Model中，前端使用模板引擎机进行获取即可。

在@GetMapping中填写请求信息；

Model再通过addAttribute与前端进行交互！

演示及源码

程序运行截图如下：

项目结构如下：

源码如下：

MyMvcConfig.java

package showtabledata.demo.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;@Configuration
public class MyMvcConfig extends WebMvcConfigurerAdapter{@Beanpublic WebMvcConfigurerAdapter webMvcConfigurerAdapter(){WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/").setViewName("index");registry.addViewController("/index.html").setViewName("index");}};return adapter;}
}

PeopleController.java

package showtabledata.demo.controller;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import showtabledata.demo.data.PeopleData;
import showtabledata.demo.entities.People;import java.util.Collection;@Controller
public class PeopleController {@AutowiredPeopleData peopleData;//查询并返回页面@GetMapping({"/index", "/"})public String list(Model model){Collection<People> peoples = peopleData.getAll();model.addAttribute("index" , peoples);return "index";}
}

PeopleData.java

package showtabledata.demo.data;import org.springframework.stereotype.Repository;
import showtabledata.demo.entities.People;import java.util.Collection;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;@Repository
public class PeopleData {private static Map<Integer, People> peoples = null;static {peoples = new HashMap<Integer, People>();peoples.put(1000, new People(1000, "闰土", "1234567@163.com", 1, new Date()));peoples.put(1001, new People(1001, "妹爷", "110@163.com", 1, new Date()));peoples.put(1002, new People(1002, "球球", "120@163.com", 0, new Date()));peoples.put(1003, new People(1003, "猪小明", "119@163.com", 1, new Date()));peoples.put(1004, new People(1004, "米线", "911@163.com", 0, new Date()));peoples.put(1005, new People(1005, "腿腿", "12306@163.com", 0, new Date()));}public Collection<People> getAll(){return peoples.values();}
}

People.java

package showtabledata.demo.entities;import java.util.Date;public class People {private Integer id;private  String name;private String email;private Integer gender;private Date birth;public People(Integer id, String name, String email, Integer gender, Date birth) {this.id = id;this.name = name;this.email = email;this.gender = gender;this.birth = birth;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public Integer getGender() {return gender;}public void setGender(Integer gender) {this.gender = gender;}public Date getBirth() {return birth;}public void setBirth(Date birth) {this.birth = birth;}@Overridepublic String toString() {return "People{" +"id=" + id +", name='" + name + '\'' +", email='" + email + '\'' +", gender=" + gender +", birth=" + birth +'}';}
}

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>呵呵</title><link href="#" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
</head>
<body><div class="table-responsive"><table class="table table-striped table-sm"><thead><tr><th>编号</th><th>姓名</th><th>邮箱</th><th>性别</th><th>生日</th><th>操作</th></tr></thead><tbody><tr th:each="people:${index}"><td th:text="${people.id}"></td><td>[[${people.name}]]</td><td th:text="${people.email}"></td><td th:text="${people.gender} == 1 ? '男' : '女'"></td><td th:text="${#dates.format(people.birth, 'yyy-MMM-ddd HH:mm')}"></td><td><button class="btn btn-sm btn-primary">编辑</button><button class="btn btn-sm btn-danger">删除</button></td></tr></tbody></table>
</div></body>
</html>

application.properties

spring.thymeleaf.cache=false

porn.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.19.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.loginWebDemo</groupId><artifactId>demo</artifactId><version>0.0.1-SNAPSHOT</version><name>loginWeb</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version><thymeleaf.version>3.0.9.RELEASE</thymeleaf.version><thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--引入jquery-webjar--><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.3.1</version></dependency><!--引入bootstrap--><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>4.0.0</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

Spring Boot中表格的请求以及表格界面的显示相关推荐

Spring Boot中扩展XML请求和响应的支持
在Spring Boot中,我们大多时候都只提到和用到了针对HTML和JSON格式的请求与响应处理.那么对于XML格式的请求要如何快速的在Controller中包装成对象,以及如何以XML的格式返回一 ...
spring boot中使用http请求
因为项目需求,需要两个系统之间进行通信,经过一番调研,决定使用http请求. 服务端没有什么好说的,本来就是使用web 页面进行访问的,所以spring boot启动后,controller层的接口就 ...
Spring Boot中如何扩展XML请求和响应的支持
在之前的所有Spring Boot教程中,我们都只提到和用到了针对HTML和JSON格式的请求与响应处理.那么对于XML格式的请求要如何快速的在Controller中包装成对象,以及如何以XML的格式 ...
Spring Boot中使用AOP统一处理Web请求日志
AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是Spring框架中的一个重要内容,它通 ...
springboot转发http请求_Spring Boot2 系列教程(八)Spring Boot 中配置 Https
https 现在已经越来越普及了,特别是做一些小程序或者公众号开发的时候,https 基本上都是刚需了. 不过一个 https 证书还是挺费钱的,个人开发者可以在各个云服务提供商那里申请一个免费的证书 ...
java option请求_如何在Spring Boot中处理HTTP OPTIONS请求？
选项1:Spring Boot属性(仅限Spring Boot 1.3.0) 从Spring Boot 1.3.0开始,可以使用以下属性配置此行为: spring.mvc.dispatch-optio ...
Spring Boot 中使用 MongoDB 增删改查
本文快速入门,MongoDB 结合SpringBoot starter-data-mongodb 进行增删改查 1.什么是MongoDB ? MongoDB 是由C++语言编写的,是一个基于分布式文件 ...
在Spring Boot中加载初始化数据
文章目录依赖条件 data.sql文件 schema.sql 文件 @sql注解 @SqlConfig 注解在Spring Boot中加载初始化数据在Spring Boot中,Spring Bo ...
【spring boot2】第8篇：spring boot 中的 servlet 容器及如何使用war包部署
嵌入式 servlet 容器在 spring boot 之前的web开发,我们都是把我们的应用部署到 Tomcat 等servelt容器,这些容器一般都会在我们的应用服务器上安装好环境,但是 spr ...
Spring Boot中Web应用的统一异常处理
为什么80%的码农都做不了架构师?>>> 我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供了一个默认的映射:/error,当处理中抛 ...

Spring Boot中表格的请求以及表格界面的显示

理论

演示及源码

Spring Boot中表格的请求以及表格界面的显示相关推荐

最新文章

热门文章