SpringBoot-（二）页面跳转和Thymeleaf的基本使用

本文最后更新于：January 30, 2022 pm

SpringBoot框架中有两个非常重要的策略：开箱即用和约定优于配置。其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。

目录

页面跳转

方式一

直接通过Controller。

需要先导入模板引擎，这里是thymeleaf为例。

SpringBoot：

1
2
3
4
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

非SpringBoot：

1
2
3
4
5
6
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

控制层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.tothefor.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class testController {

    @RequestMapping("/ttt") 
    public String test(){
        return "test";
    }
}

  • @RequestMapping：url链接地址。
  • 方法的返回值：HTML页面的名称。html页面需要放在templates目录下。具体可见配置文件（ThymeleafProperties）。

之后再跑项目，访问http://localhost:8080/ttt 这里的ttt是自定义的url。

方式二

通过拓展SpringMVC。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.tothefor.Controll;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class myMVC implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/mt").setViewName("test");
    }
}

/mt是url路径，test是HTML页面名称。

重定向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.tothefor.Controll;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class myMVC implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addRedirectViewController("/ktt","/ttt"); // 访问/ktt，跳转到/ttt
    }
}

Thymeleaf基本使用

1.引入

要在html页面中使用thymeleaf的标签，必须引入名称空间。

1
<html lang="en" xmlns:th="http://www.thymeleaf.org">

2.表达式的使用

在html页面中，要使用thymealf的标签，只需在原标签名前加th:即可，如th:src、th:href、th:text等。（和Vue再前面加V-同样的道理。）

${}

变量表达式，它可以获取到Controller层存入Model的值。

1
2
3
4
// 后端Controller层代码
model.addAttribute("name","loong");
User user = new User("loong",22);   // name、age
model.addAttribute("user",user);
1
2
3
// html页面中获取并显示
<span th:text="${name}"></span>
<span th:text="${user.age}"></span>

*{}

选择变量表达式，可以省略对象名，直接获取属性值。

1
2
3
4
<div th:object="${user}">
	<p th:text="*{name}">姓名</p>
	<p th:text="*{age}">23</p>
</div>

#{}

Message表达式，它主要是从国际化配置文件中取值。

@{}

用于URL。

3.内联写法

一般不推荐这种写法。

  1. [( )]，解析输出，会解析内容里的html标签。
1
<span>[(${user.name})]</span>
  1. [[ ]]，原样输出，不会解析内容里的html标签。
1
<span>[[${user.name}]]</span>

4.判断

  1. th:if，满足条件才显示标签包裹的(含标签)的内容
1
2
<span th:if="${true}">显示</span>
<span th:if="${user.age == 18}">18岁显示</span>
  1. th:unless，与th:if相反，不满足条件时显示
1
<span th:unless='${true}'>不显示</span>
  1. th:switch，switch的效果一致
1
2
3
4
5
<div th:witch="${user.name}">
	<span th:case="loont"></span>
	<span th:case="123"></span>
	<span th:case="abc"></span>
</div>

5.迭代（遍历）

th:each，迭代一个集合/数组。同Vue一样。

1
<h3 th:each="user:${users}" th:text="${user}"></h3>
  • users：是集合。
  • user：是用来遍历的。