Spring中使用ThymeLeaf进行动态页面开发（一）

2020-07-29

ThymeLeaf是Spring中默认的模板方案，通过它可以完成一些动态页面的开发。

首先，我们需要添加依赖：

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

一般来说，在MVC设计模式中，控制层（@Controller）与前端页面紧密配合,调用服务层（@Service）的方法读写数据,从而响应前端请求，因此，要使后台逻辑能够与前端产生关联，我们需要把服务层的一些方法集成到控制层中，方便前端调用。

最基础的一个类就是Model类，通过它将前后端进行连接，例如在如下示例代码中：

@Controller
public class SongListControl {

  @Autowired
  private SongListService songListService;

  @RequestMapping("/songlist")
  public String index(@RequestParam("id")String id,Model model){

    SongList songList = songListService.get(id);
	
    model.addAttribute("songList",songList);

    return "songList";
  }
}

有几个初级知识点需要理解巩固：

1.通过@Controller告知Spring该类属于控制层，没有使用@RestController是因为在返回结果需要被解析为跳转路径，而不是JSON等类型的数据。

2.@Autowired：自动注入一个SongListService 实例.

3.@RequestMapping("/songlist")：如果是在本地启动8080端口，对应URL为http://localhost:8080/songlist。

4.@RequestParam("id")String id：如果是在本地启动8080端口，对应URL为http://localhost:8080/songlist?id=xxx。

5.Model model：传入一个Model实例：model

6.model.addAttribute("songList",songList);：传递歌单对象到模板当中，其中第一个songList是前端模板中使用的变量名，第二个songList是当前的对象实例

7.return "songList";：返回跳转路径。

在前端页面中，我们可以使用th:text="${xxx}"调用后端数据，例如在上述代码中，我们把一个歌单对象传入到了模板当中，假设SongList类定义了一个name变量，我们将其赋值为铃木悠太的歌单，我们可以这么引用它：

1	<h1 th:text="${songList.name}"></h1>

前端渲染以后的结果为：

1	<h1>铃木悠太的歌单</h1>

还有一种内联表达式的写法 [[xxx]] ，可以直接把变量写在HTML中：

1	<span>Hello [[${msg}]]</span>