学习 Spring Boot(十):Web 页面

Spring Boot 除了可以开发 REST API 接口之外,当然也可以开发 Web 界面。

想快速开发一个 Web 服务,就可以使用下面的方式,进行配置:

  • 开发工具:Spring Boot Developer Tools
  • 包管理工具:WebJars
  • 前端模板:Thymeleaf

Spring Boot Developer Tools

在开发 Web 页面时,我们需要 Spring Boot 开发者工具的两个功能,帮助我们方便的进行开发和调试:

  1. 自动重启
  2. LiveReload

实现的效果是:Spring Boot 应用启动之后,修改 /templates 目录下模板或者 /static 静态资源之后,重新构建项目,会触发应用自动重启和浏览器自动刷新

首先,编辑 pom.xml 文件添加依赖:

<dependency>  
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
</dependency>  

之后,打开 Chrome 网上应用商店(需要梯子),搜索:LiveReload,安装由 livereload.com 提供的 LiveReload 插件

启用 livereload,当资源发生修改之后,就会自动被 Chrome 浏览器感知,刷新页面

WebJars

包管理工具的出现,极大的方便了简化了开发过程中软件包的依赖管理和版本维护。Java 有了 Maven 这样的包管理工具,Web 也有了 NPMBower 这样的包管理工具。如何在一个工程下仅保留一套包管理工具,让 Maven 去管理 Web 软件包?

答案就是 WebJars

以添加 JQuery 依赖举个🌰:

首先,编辑 pom.xml 文件添加依赖:

<dependency>  
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1</version>
</dependency>  

之后,在需要使用 JQuery 的 HTML 页面添加引用:

<script src="/webjars/jquery/3.3.1/jquery.min.js"></script>  

是否是非常方便?☺️

Thymeleaf

由于 JSP 不支持 Tomcat 和 Jetty 可执行 jar 部署,所以,Spring Boot 官方支持以下模板引擎:

👇以使用 Thymeleaf 举🌰说明模板引擎的用法:

首先,编辑 pom.xml 文件添加依赖:

<dependency>  
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>  

然后,编辑 application.yml 文件添加配置:

server:  
  display-name: Test

spring:  
  thymeleaf:
    cache: false # 禁用缓存

Thymeleaf 其它属性,参考类:org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties

创建控制器类:

@Controller
public class HomePageController {

    @Value("${server.display-name}")
    private String appName;

    @RequestMapping("/")
    public String homePage(Model model) {
        model.addAttribute("appName", this.appName);
        return "index";
    }

}

最后,在 resources/templates/ 目录下创建 HTML 页面 index.html :

<!DOCTYPE html>  
<html lang="en" xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title th:text="${appName}"></title>
</head>  
<body>  
<p th:text="|Welcome to ${appName}!|"></p>  
</body>  
</html>  

参考