當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2025/3/15 javascript 10 豆豆

生活随笔收集整理的這篇文章主要介紹了 Spring Boot中表格的请求以及表格界面的显示小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

理論

演示及源碼

?

理論

后端通過@GetMapping獲取數(shù)據(jù)，把數(shù)據(jù)存儲(chǔ)在Model中，前端使用模板引擎機(jī)進(jìn)行獲取即可。

在@GetMapping中填寫請(qǐng)求信息；

Model再通過addAttribute與前端進(jìn)行交互！

演示及源碼

程序運(yùn)行截圖如下：

項(xiàng)目結(jié)構(gòu)如下：

源碼如下：

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;//查詢并返回頁(yè)面@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>編號(hào)</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/> </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><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.3.1</version></dependency><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>

總結(jié)

以上是生活随笔為你收集整理的Spring Boot中表格的请求以及表格界面的显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：前端笔记-thymeleaf发送数据给J
下一篇： Spring Boot笔记-Hibern