这一节我们主要学习如何整合视图层技术:
在之前的案例中,我们都是通过 @RestController
来处理请求,所以返回的内容为json对象。那么如果需要渲染html页面的时候,要如何实现呢?
Spring Boot推荐使用模板引擎
模板引擎实现伪html 达到seo优化 使动态页面静态化
在动态html上实现Spring Boot依然可以完美胜任,并且提供了多种模板引擎的默认配置支持,所以在推荐的模板引擎下,我们可以很快的上手开发动态网站。
Spring Boot提供了默认配置的模板引擎主要有以下几种:
Thymeleaf
FreeMarker
Velocity
Groovy
Mustache
Spring Boot建议使用这些模板引擎,避免使用jsp。
创建 war 项目,编写pom.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> <groupId>com.springboot</groupId> <artifactId>springboot-view</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>springboot-view Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.6.RELEASE</version> </parent> <dependencies> <!-- Web 组件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- Spring Boot不推荐使用 jsp,所以需要手动导入 jstl 和 jasper 依赖 --> <!-- jstl --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> </dependency> <!-- jasper --> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> <scope>provided</scope> </dependency> </dependencies> </project>
resources/application.properties
spring.mvc.view.prefix=/WEB-INF/jsp/ spring.mvc.view.suffix=.jsp
User.java
package com.springboot.pojo; import java.io.Serializable; public class User implements Serializable { private Integer id; private String username; private Integer age; public User() { } public User(Integer id, String username, Integer age) { this.id = id; this.username = username; this.age = age; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } @Override public String toString() { return "User{" + "id=" + id + ", username='" + username + '/'' + ", age=" + age + '}'; } }
UserController.java
package com.springboot.controller; import com.springboot.pojo.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import java.util.ArrayList; import java.util.List; @Controller public class UserController { @RequestMapping("/showUser") public String showUser(Model model) { List<User> list = new ArrayList<>(); list.add(new User(1, "张三", 18)); list.add(new User(2, "李四", 20)); list.add(new User(3, "王五", 22)); model.addAttribute("list", list); // 跳转视图 return "userList"; } }
userList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>用户展示</title> </head> <body> <table border="1" cellspacing="0" align="center" width="50%"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <c:forEach items="${list}" var="user"> <tr> <td>${user.id}</td> <td>${user.username}</td> <td>${user.age}</td> </tr> </c:forEach> </table> </body> </html>
App.java
package com.springboot; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } }
结果
创建 war 项目,编写pom.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> <groupId>com.springboot</groupId> <artifactId>springboot-view</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>springboot-view Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.6.RELEASE</version> </parent> <dependencies> <!-- web 组件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- freemarker 组件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> </dependencies> </project>
该文件内容不一定非得需要,可以不添加,不添加使用默认值。
resources/application.properties
# FREEMARKER (FreeMarkerAutoConfiguration) spring.freemarker.allow-request-override=false spring.freemarker.allow-session-override=false spring.freemarker.cache=true spring.freemarker.charset=UTF-8 spring.freemarker.check-template-location=true spring.freemarker.content-type=text/html spring.freemarker.enabled=true spring.freemarker.expose-request-attributes=false spring.freemarker.expose-session-attributes=false spring.freemarker.expose-spring-macro-helpers=true spring.freemarker.prefer-file-system-access=true spring.freemarker.suffix=.ftl spring.freemarker.template-loader-path=classpath:/templates/ spring.freemarker.settings.template_update_delay=0 spring.freemarker.settings.default_encoding=UTF-8 spring.freemarker.settings.classic_compatible=true spring.freemarker.order=1
User.java
package com.springboot.pojo; import java.io.Serializable; public class User implements Serializable { private Integer id; private String username; private Integer age; public User() { } public User(Integer id, String username, Integer age) { this.id = id; this.username = username; this.age = age; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } @Override public String toString() { return "User{" + "id=" + id + ", username='" + username + '/'' + ", age=" + age + '}'; } }
UserController.java
package com.springboot.controller; import com.springboot.pojo.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import java.util.ArrayList; import java.util.List; @Controller public class UserController { @RequestMapping("/showUser") public String showUser(Model model) { List<User> list = new ArrayList<>(); list.add(new User(1, "张三", 18)); list.add(new User(2, "李四", 20)); list.add(new User(3, "王五", 22)); model.addAttribute("list", list); // 跳转视图 return "userList"; } }
Spring Boot要求模板形式的视图层技术的文件必须要放到 src/main/resources 目录下的 templates 目录。
该目录内的模板文件名称必须是 ftl
的后缀结尾。
userList.ftl
<!DOCTYPE html> <html> <head> <title>用户展示</title> <meta charset="UTF-8"></meta> </head> <body> <table border="1" cellspacing="0" align="center" width="50%"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <#list list as user > <tr> <td>${user.id}</td> <td>${user.username}</td> <td>${user.age}</td> </tr> </#list> </table> </body> </html>
App.java
package com.springboot; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } }
结果
创建 war 项目,编写pom.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> <groupId>com.springboot</groupId> <artifactId>springboot-view</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>springboot-view Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.6.RELEASE</version> </parent> <dependencies> <!-- web 组件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- thymeleaf 组件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> </dependencies> </project>
ThymeleafController.java
package com.springboot.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class ThymeleafController { @RequestMapping("/show") public String showMsg(Model model) { model.addAttribute("msg", "Thymeleaf 入门案例"); return "msg"; } }
Spring Boot要求模板形式的视图层技术的文件必须要放到 src/main/resources 目录下的 templates 目录。
msg.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Thymeleaf</title> </head> <body> <span th:text="Thymeleaf"></span> <hr/> <span th:text="${msg}"></span> </body> </html>
App.java
package com.springboot; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } }
运行结果出现异常(如果是 Spring Boot 1.X.X 版本才会出现此异常):
org.xml.sax.SAXParseException: 元素类型 "meta" 必须由匹配的结束标记 "</meta>" 终止。
如果是 Spring Boot 1.X.X 版本需要以下操作,本案例是 Spring Boot 2.1.6 版本,所以不需要更改。
<meta charset="UTF-8"/>
thymeleaf.jar:更新为 3.0 以上的版本
<properties> <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version> </properties>
Thymeleaf 内置对象语法:
#
s
结尾 strings
、 numbers
、 dates
User.java
package com.springboot.pojo; import java.io.Serializable; public class User implements Serializable { private Integer id; private String username; private Integer age; public User() { } public User(Integer id, String username, Integer age) { this.id = id; this.username = username; this.age = age; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } @Override public String toString() { return "User{" + "id=" + id + ", username='" + username + '/'' + ", age=" + age + '}'; } }
ThymeleafController.java
package com.springboot.controller; import com.springboot.pojo.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.*; @Controller public class ThymeleafController { @RequestMapping("/show") public String showMsg(Model model, HttpServletRequest request, HttpServletResponse response) { // 字符串 model.addAttribute("msg", "Thymeleaf 入门案例"); // 日期时间 model.addAttribute("myDate", new Date()); // 条件判断if model.addAttribute("sex", 1); // 条件判断switch model.addAttribute("id", 1); // 对象 model.addAttribute("user", new User(1, "张三", 20)); // 迭代遍历list List<User> userList = new ArrayList<>(); userList.add(new User(1, "张三", 20)); userList.add(new User(2, "李四", 22)); userList.add(new User(3, "王五", 24)); model.addAttribute("userList", userList); // 迭代遍历map Map<String, User> userMap = new HashMap<>(); userMap.put("u1", new User(1, "张三", 20)); userMap.put("u2", new User(2, "李四", 22)); userMap.put("u3", new User(3, "王五", 24)); model.addAttribute("userMap", userMap); // 域对象操作 request.setAttribute("req", "HttpServletRequest"); request.getSession().setAttribute("sess", "HttpSession"); request.getSession().getServletContext().setAttribute("app", "Application"); return "msg"; } /** * URL表达式-相对路径 * @return */ @RequestMapping("/index") public String index() { return "index"; } /** * URL表达式-普通传参 * @param id * @param username * @return */ @RequestMapping("/user") public String user(Integer id, String username) { System.out.println("id:" + id + " username:" + username); return "user"; } /** * URL表达式-restful传参 * @param id * @param username * @return */ @RequestMapping("/person/{id}/{username}") public String person(@PathVariable Integer id, @PathVariable String username) { System.out.println("id:" + id + " username:" + username); return "person"; } }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Thymeleaf</title> </head> <body> index </body> </html>
user.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Thymeleaf</title> </head> <body> user </body> </html>
person.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Thymeleaf</title> </head> <body> person </body> </html>
th:text
:在页面中输入值
<span th:text="Thymeleaf"></span>
th:value
:可以将一个值设置至input标签的value中
<input type="text" th:value="${msg}" />
${#strings.isEmpty(key)}
:判断字符串是否为空
<span th:text="${#strings.isEmpty(msg)}"></span>
${#strings.contains(msg, 'T')}
:判断字符串是否包含子串
<span th:text="${#strings.contains(msg, 'T')}"></span>
${#strings.startsWith(msg, 'T')}
:判断字符串是否以子串开头
<span th:text="${#strings.startsWith(msg, 'T')}"></span>
${#strings.endsWith(msg, 'T')}
:判断字符串是否以子串结尾
<span th:text="${#strings.endsWith(msg, 'T')}"></span>
${#strings.length(msg)}
:返回字符串的长度
<span th:text="${#strings.length(msg)}"></span>
${#strings.indexOf(msg, 'T')}
:查找子串的位置,并返回该子串的下标,如果没找到则返回-1
<span th:text="${#strings.indexOf(msg, 'T')}"></span>
${#strings.substring(msg, 5)}
:截取子串,从指定下标开始截止到末尾结束
${#strings.substring(msg, 5, 12)}
:截取子串,从指定下标开始截止到指定下标结束
<span th:text="${#strings.substring(msg, 5)}"></span> <span th:text="${#strings.substring(msg, 5, 12)}"></span>
${#strings.toUpperCase(msg)}
:将字符串转大写
<span th:text="${#strings.toUpperCase(msg)}"></span>
${#strings.toLowerCase(msg)}
:将字符串转小写
<span th:text="${#strings.toLowerCase(msg)}"></span>
${#dates.format(key)}
:格式化日期,以浏览器默认语言为格式化标准
<span th:text="${#dates.format(myDate)}"></span>
${#dates.format(key,'yyy/MM/dd')}
:自定义格式日期转换
<span th:text="${#dates.format(myDate, 'yyyy年MM月dd日 HH:mm:ss')}"></span>
${#dates.year(myDate)}
:获取年份,还可以获取月份、日、时、分、秒
<span th:text="${#dates.year(myDate)}"></span>年 <span th:text="${#dates.month(myDate)}"></span>月 <span th:text="${#dates.day(myDate)}"></span>日 <span th:text="${#dates.hour(myDate)}"></span>时 <span th:text="${#dates.minute(myDate)}"></span>分 <span th:text="${#dates.second(myDate)}"></span>秒
th:if
:单选择
性别:<span th:if="${sex} == 1">男</span> <span th:if="${sex} == 2">女</span>
th:switch
:多选择(如果要实现 if else if else 判断表达式,在 Thymeleaf 要使用 th:switch 代替)
编号:<span th:switch="${id}"> <span th:case="1">1 张三</span> <span th:case="2">2 李四</span> <span th:case="3">3 王五</span> </span>
<input th:value="${user.username}"/> <span th:text="${user.age}"></span>
th:each
:迭代遍历
<table border="1" cellspacing="0"> <tr> <th>ID</th> <th>NAME</th> <th>AGE</th> </tr> <tr th:each="user : ${userList}"> <td th:text="${user.id}"></td> <td th:text="${user.username}"></td> <td th:text="${user.age}"></td> </tr> </table>
th:each
:状态变量属性
<table border="1" cellspacing="0"> <tr> <th>Id</th> <th>Name</th> <th>Age</th> <th>Index</th> <th>Count</th> <th>Size</th> <th>Even</th> <th>Odd</th> <th>First</th> <th>Last</th> </tr> <tr th:each="user, state : ${userList}"> <td th:text="${user.id}"></td> <td th:text="${user.username}"></td> <td th:text="${user.age}"></td> <td th:text="${state.index}"></td> <td th:text="${state.count}"></td> <td th:text="${state.size}"></td> <td th:text="${state.even}"></td> <td th:text="${state.odd}"></td> <td th:text="${state.first}"></td> <td th:text="${state.last}"></td> </tr> </table>
th:each
:迭代 Map
<table border="1" cellspacing="0"> <tr> <th>Id</th> <th>Name</th> <th>Age</th> </tr> <tr th:each="user : ${userMap}"> <td th:text="${user}"></td> </tr> </table> <table border="1" cellspacing="0"> <tr> <th>Id</th> <th>Name</th> <th>Age</th> </tr> <tr th:each="user : ${userMap}"> <td th:each="entry : ${user}" th:text="${entry.value.id}" ></td> <td th:each="entry : ${user}" th:text="${entry.value.username}"></td> <td th:each="entry : ${user}" th:text="${entry.value.age}"></td> </tr> </table>
${#httpServletRequest.getAttribute(key)}
:HttpServletRequest
Request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span>
${session.key}
:HttpSession
Session:<span th:text="${session.sess}"></span>
${application.key}
:ServletContext
Application:<span th:text="${application.app}"></span>
URL表达式的基本语法: @{}
th:href
:绝对路径
<a th:href="@{http://www.baidu.com}">绝对路径</a>
th:href
:相对路径,相对于当前项目的根路径
<a th:href="@{/index}">相对于当前项目的根路径</a>
th:href
:相对路径, 相对于服务器的根路径
<a th:href="@{~/project/resourcename}">相对于服务器的根路径</a>
<a th:href="@{/user(id=1, username=zhagnsan)}">相对路径-普通传参</a> <a th:href="@{/person/1/zhangsan}">相对路径-restful传参</a> <a th:href="@{/person/{id}/{name}(id=2, name=lisi)}">相对路径-restful传参</a>
✍️本章节到这里就结束了,喜欢的话就点赞 加转发:revolving_hearts:吧,我们下章节再见:wave:。