目錄
後端通過@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{ @Bean public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){ WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() { @Override public 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 { @Autowired PeopleData 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, "閏土", "[email protected]", 1, new Date())); peoples.put(1001, new People(1001, "妹爺", "[email protected]", 1, new Date())); peoples.put(1002, new People(1002, "球球", "[email protected]", 0, new Date())); peoples.put(1003, new People(1003, "豬小明", "[email protected]", 1, new Date())); peoples.put(1004, new People(1004, "米線", "[email protected]", 0, new Date())); peoples.put(1005, new People(1005, "腿腿", "[email protected]", 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; } @Override public 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>