目錄
引言
Spring Boot提供了 spring-boot-starter-web 爲web開發予以支持，spring-boot-starter-web爲我們提供了嵌入的 Tomcat 和 Spring MVC的依賴。Spring Boot提供了大量的模板引擎，包括FreeMark、Groovy、Thymeleaf、Velocity和Mustache，Spring Boot推薦使用Thymeleaf，因爲Thymeleaf提供了完美的Spring MVC支持。
本文示例源碼：https://github.com/lizitaowork/SpringBoot-demo
Spring Boot Web
一、添加依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
二、添加頁面
Spring Boot 設置 Thymeleaf 的模板頁面放置在 “ classpath:/templates/ ” 下，默認文件後綴爲 “ .html ”，我們可以在類ThymeleafProperties中查看詳情。看到下面代碼，相信各位博友都明白這些配置都可以在application.properties中自定義。
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
private boolean checkTemplate = true;
private boolean checkTemplateLocation = true;
//設置前綴，默認放在classpath:/templates/下
private String prefix = "classpath:/templates/";
//後綴設置，默認爲.html
private String suffix = ".html";
private String mode = "HTML";
private Charset encoding;
private boolean cache;
private Integer templateResolverOrder;
private String[] viewNames;
private String[] excludedViewNames;
private boolean enableSpringElCompiler;
private boolean enabled;
private final ThymeleafProperties.Servlet servlet;
private final ThymeleafProperties.Reactive reactive;
//...
}
看一下項目的目錄結構，正式開始Spring Boot Web開發：
index.html詳情如下：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index</title>
<meta content="text/html;charset=UTF-8"/>
<link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet" type="text/css">
<link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap-theme.css}" rel="stylesheet" type="text/css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-body text-right">
訪問：<span th:text="${singleUser.name}"></span>
</div>
</div>
<div th:if="${not #lists.isEmpty(users)}">
<div class="panel panel-default">
<div class="panel-body">
<table class="table">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr th:each="user:${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
<td>
<button class="btn btn-default" th:onclick="'getName(\''+${user.name} +'\');'">打印名字</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div>
<img th:src="@{/img/test.jpeg}">
</div>
<script th:src="@{/js/jquery-3.3.1.js}" type="text/javascript"></script>
<script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}" type="text/javascript"></script>
<script th:inline="javascript">
var single = [[${singleUser}]]
console.log(single.name+"/"+single.age);
function getName(name) {
alert(name)
}
</script>
</body>
<html>
三、添加Controller
TestController.java詳情如下：
@Controller
@RequestMapping("/test")
public class TestController {
@Resource
private UserMapper userMapper;
@RequestMapping("/{id}")
public String index(@PathVariable(value = "id") int id, Model model){
User user = userMapper.selectByPrimaryKey(id);
List<User> userList = userMapper.selectAll();
model.addAttribute("singleUser", user);
model.addAttribute("users", userList);
return "index";
}
}
四、運行
五、設置靜態文件路徑
Spring Boot的靜態文件相關知識請查閱我之前的文章： Spring Boot學習(5)：Spring Boot靜態資源處理
結束語
本文僅示例Spring Boot Web的使用，如果各位博友有疑問，歡迎留言！