本材料整理自github https://github.com/lenve/javaboy-video-samples中的代碼
2.整合視圖層技術
2.1 freemarker
- 添加pom依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
2.在application.properties文件中對freemarker進行設置
# 自定義Freemarker templates的加載classpath路徑，默認爲templates目錄下
spring.freemarker.template-loader-path=classpath:/zjl
# 指定freemaker的編碼爲UTF-8
spring.freemarker.charset=UTF-8
# 指定freemarker的content-type
spring.freemarker.content-type=text/html
# 設置Freemarker的緩存策略
spring.freemarker.cache=false
#設置freemarker的後綴文件名，這樣使用Controller跳轉時可不指定後綴文件名
spring.freemarker.suffix=.ftl
3.編寫實體類及controller
public class User {
private Long id;
private String username;
private String address;
private Integer gender;
//get set 方法省略
}
@Controller
public class UserController {
@GetMapping("/user")
public String user(Model model) {
List<User> users = new ArrayList<>();
Random random = new Random();
for (int i = 0; i < 10; i++) {
User user = new User();
user.setId((long) i);
user.setUsername("zjl>>>" + i);
user.setAddress("www.zjl.cn>>>" + i);
user.setGender(random.nextInt(3));//0 表示 男 1 表示 女 其他數字表示未知
users.add(user);
}
model.addAttribute("users", users);
model.addAttribute("hello", "<h1>hello</h1>");
model.addAttribute("world", "<h1>world</h1>");
return "user";
}
}
4.編寫freemarker模板
header.ftl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>歡迎學習 Spring Boot ！</h1>
</body>
</html>
user.ftl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<#noparse>
<!--靜態包含--> <!--以下內容不會在頁面上進行解析展示-->
<#include './header.ftl'>
</#noparse>
<!--以下內容不會在頁面上進行html解析展示，而是帶標籤原樣輸出-->
<#escape x as x?html>
<!--解析html格式文本-->
${hello}
${world}
</#escape>
<table border="1">
<tr>
<td>編號</td>
<td>用戶名</td>
<td>用戶地址</td>
<td>性別</td>
</tr>
<#list users as u>
<#if u.id==4>
<#break>
</#if>
<tr>
<td>${u.id}</td>
<td>${u.username}</td>
<td>${u.address}</td>
<td>
<#-- <#if u.gender==0>
男
<#elseif u.gender==1>
女
<#else>
未知
</#if>-->
<#switch u.gender>
<#case 0>男<#break>
<#case 1>女<#break>
<#default>未知
</#switch>
</td>
</tr>
</#list>
</table>
</body>
</html>
5.效果展示
2.2 jsp
- 添加相關pom依賴
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
- 設置jsp爲視圖解析
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void configureViewResolvers(ViewResolverRegistry registry) {
registry.jsp("/jsp/", ".jsp");
}
}
3.編寫jsp文件與配置Controller
hell.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>${name}</h1>
</body>
</html>
@Controller
public class HelloController {
@GetMapping("/hello")
public String hello(Model model, String name) {
model.addAttribute("name", name);
return "hello";
}
}
4.配置概覽
2.3 thymeleaf
- 添加pom依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
- 編寫實體類及Controller類
public class Book {
private Integer id;
private String name;
private String author;
private Double price;
//省略get與set
}
@Controller
public class BookController {
@GetMapping("/book")
public String book(Model model) {
List<Book> bookList = new ArrayList<>();
for (int i = 0; i < 10; i++) {
Book book = new Book();
book.setId(i);
book.setName("三國演義:" + i);
book.setAuthor("羅貫中:" + i);
book.setPrice(30.0);
bookList.add(book);
}
model.addAttribute("books", bookList);
return "book";
}
}
3.編寫thymeleaf模版頁
book.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>圖書作者</td>
<td>圖書價格</td>
</tr>
<tr th:each="book :${books}">
<td th:text="${book.id}"></td>
<td th:text="${book.name}"></td>
<td th:text="${book.author}"></td>
<td th:text="${book.price}"></td>
</tr>
</table>
</body>
</html>
4.項目目錄結構
