文章目录
1 前言
1.1 本篇文章内容
引入前端页面,因为SpringBoot项目默认推荐使用的前端引擎是thymeleaf,本章使用thymeleaf为前端依赖建立项目
本篇文章介绍以下知识点:
- 如何引入thymeleaf依赖
- 如何创建前端页面
- 如何控制显示前端页面
- 引入配置页面
- thymeleaf几个简单语法的作用
1.2 前提依赖
1.2.1 外部依赖
外部依赖与SpringBoot从0开始-01一样。
1.2.2 文章依赖
SpringBoot从0开始-01,点击这里查看
1.3 内容结构
与第一章一致
2 主要操作步骤
2.1 创建项目至controller
项目名称定为:SprBoot02。详细步骤见SpringBoot从0开始-01,章节2.1 至2.4
2.2 POM中引入thymeleaf依赖
在pom.xml中,
在节点之内,添加thymeleaf 依赖
<!--引入thymeleaf 依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
添加完成后,包括第一章的依赖,dependencies下的代码如下:
<!-- Spring Boot web依赖 -->
<dependencies>
<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>
2.3 创建前端页面模板
- 创建templates目录
右键选择resources目录,New > Directory,输入新目录名templates - 创建index.html
右键选择上一步创建的目录templates,New > HTML File,输入文件名:index.
创建完成之后,项目的文件目录如下
- 在index.html中,输入以下内容
<!doctype html>
<!--注意:引入thymeleaf的名称空间-->
<!doctype html>
<!--注意:引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
</head>
<body>
<p th:text="'hello 这是thymeleaf效果'">hello 静态 html显示</p>
<table border="1">
<tr><td>文章:</td><td>SpringBoot从0开始-02</td></tr>
<tr><td>后端:</td><td>SpringBoot</td></tr>
<tr><td>前端:</td><td>thymeleaf</td></tr>
</table>
</body>
</html>
2.4 创建配置文件
- 在resources目录下创建application.properties
右键选择resources > New > File
创建一个空白文件,文件名为:application.properties
创建完成后,项目文件目录结构如下
- 在application.properties中,输入以下内容
#thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false
2.5 修改MyController.java文件
在文件中添加
@RequestMapping("/home")
public String index() {
return "/index";
}
添加完成后,该Java文件内容如下
package com.sprbtest.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class MyController {
@ResponseBody
@RequestMapping("/hello")
public String hello(){
return "hello world!!";
}
//SpringBoot从0开始-02增加内容 start
@RequestMapping("/home")
public String index() {
return "/index";
}
//SpringBoot从0开始-02增加内容 end
}
2.6 运行及查看结果
如01文章所示,运行MyHelloWorld.main()启动SpringBoot服务,在页面分别输入以下两个不同的链接
- http://localhost:8080/hello
- http://localhost:8080/home
可以看到,链接1和01文章的结果一样,链接2显示了页面的内容。
以下是链接2的显示内容
3 文件目录结构说明
本章仅展示新增及改动文件
文件或目录名称 | 类型 | 新增 or 改动 | 说明 |
---|---|---|---|
\pom.xml | 文件 | 改动 | 增加了对thymeleaf的依赖说明 |
\src\main\resources\ templates\index.html | 文件 | 新增 | thymeleaf前端页面文件 |
\src\main\resources\ application.properties | 文件 | 新增 | 项目的配置文件,本章仅包含对thymeleaf的部分配置 |
src\main\java\com\sprbtest\ controller\MyController.java | 文件 | 改动 | 增加对页面url请求的处理,把请求转向前端页面展示 |
4 主要代码说明
主要代码说明仅对新增文件及改动部分进行解说,其他信息可从之前的文章进行阅读。
4.1 pom文件
pom文件作用就是引用各个依赖包,本章中新增加thymeleaf作为前端部分,所以增加的依赖,仅是针对thymeleaf引入依赖包。
代码比较简单,就只增加以下信息
<!--引入thymeleaf 依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
4.2 index.html文件 - thymeleaf
虽然后缀名是html,但这不是普通的静态html文件,而是加载了thymeleaf语法的“类html”文件,关于thymeleaf的介绍,有一个特性比较重要
Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。使用thymeleaf创建的html模板可以在浏览器里面直接打开(展示静态数据),这有利于前后端分离。
本章绝大多数语句都是标准html语句,仅有以下几个地方是与thymeleaf有关的。
- 引入thymeleaf的名称空间,必须在文件头注明,否则框架无法解析thymeleaf,只会以静态html来解析。
<html lang="en" xmlns:th="http://www.thymeleaf.org">
- th命名空间的使用
<p th:text="'hello 这是thymeleaf效果'">hello 静态 html显示</p>
这个语句中,可以看到有2个不同的内容描述,【hello 这是thymeleaf效果】 与 【hello 静态 html显示】,一个使用th命名空间赋值,一个是正常的html内容。
区别是,如果是以动态页面加载,thymeleaf会展示th命名空间内容。如果是以静态html打开,则只会显示正常的html内容。
以下是运行结果比较。
通过动态服务器展示结果
通过直接打开静态html页面展示效果
其他的语法都为正常的html语法,本文不再做介绍
4.3 application.properties - 项目配置文件
本章新增了一个项目配置文件application.properties,该文件对整个项目都起到配置的作用,本章主题为引入前端,所添加的配置均与前端相关。各配置说明如下
配置项 | 说明 |
---|---|
spring.thymeleaf.prefix | 页面映射路径,如本章中,html文件路径在/templates/下面 |
spring.thymeleaf.suffix | 构建URL时附加到查看名称的后缀,本章使用后缀为html |
spring.thymeleaf.mode | 模板模式,一般使用html5 |
spring.thymeleaf.encoding | 模板编码,常用就是UTF-8 |
spring.thymeleaf.cache | 关闭页面缓存, cache属性默认值是true,把他设置为false,便于我们进行调试,不必每次修改都重启一遍项目。 |
4.4 修改MyController.java
Controller为控制器,本章新增加一个public String index()的方法,与之前的public String hello()共存。hello()方法直接返回内容,而inde()返回的是指向页面的信息。两者的不同,通过注解【@ResponseBody】来达到不同的目的
public class MyController {
@ResponseBody
@RequestMapping("/hello")
public String hello(){
return "hello world!!";
}
//SpringBoot从0开始-02增加内容 start
@RequestMapping("/home")
public String index() {
return "/index";
}
//SpringBoot从0开始-02增加内容 end
}
动手改一改,试试把@ResponseBody注解添加到public String index()运行,看看有什么效果?
5 配套代码下载
如果对文中的代码有疑问,可以下载源代码参考