springBoot学习笔记五：视图层之thymeleaf

最新推荐文章于 2022-11-21 11:10:05 发布

chunlulin2540

最新推荐文章于 2022-11-21 11:10:05 发布

阅读量182

点赞数

文章标签： java 开发工具后端

原文链接：https://my.oschina.net/tij/blog/3020182

版权

一、项目说明

项目环境：jdk1.8+tomcat8+idea2018

源代码github地址：

实现目标：现在很多项目的架构都采用前后端分离的方式，对于传统的视图层实现方式用的相对较少了，比如jsp、freemarker等。如果采用传统的开发方式，springBoot官方推荐thymeleaf作为视图层的实现方式。对于thymeleaf的相关内容这里不做详细的介绍，如需学习可以参考thymeleaf官网，这里通过一个例子，完成在springBoot中使用thymeleaf的一个大概介绍。

二、整合说明

（1）通过idea等方式创建springBoot模板项目

（2）在pom.xml配置文件中添加thymeleaf依赖

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

（3）在application.yaml配置文件中添加thymeleaf相关配置

注：这里只列出了常用的配置，更多详细的配置可以在springBoot官网的配置文件中查看springBoot所有配置详情

spring:
  thymeleaf:
    cache: true   #是否启用模板缓存
    check-template: true    #true是否启用模板缓存
    check-template-location: true   #是否检查模板位置是否存在
    encoding: utf-8   #模板文件编码
    prefix: classpath:/templates/   #模板存放的位置
    servlet:
      content-type: text/html   #写入HTTP响应的内容类型值
    suffix: .html   #模板文件后缀

（4）在model下新建用户实体类

package com.example.model;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import java.util.Arrays;
import java.util.List;
import java.util.Map;

@Component
public class User {
    private String userName;
    private Integer userAge;
    private String userAddress;
    private String userSex;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public Integer getUserAge() {
        return userAge;
    }

    public void setUserAge(Integer userAge) {
        this.userAge = userAge;
    }

    public String getUserAddress() {
        return userAddress;
    }

    public void setUserAddress(String userAddress) {
        this.userAddress = userAddress;
    }

    public String getUserSex() {
        return userSex;
    }

    public void setUserSex(String userSex) {
        this.userSex = userSex;
    }

    public User(String userName, Integer userAge, String userAddress, String userSex) {
        this.userName = userName;
        this.userAge = userAge;
        this.userAddress = userAddress;
        this.userSex = userSex;
    }

    public User() {
    }

}

（5）在controller下新建用户controller

package com.example.controller;

import com.example.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;

@Controller
public class UserController {
    @Autowired
    User user;

    @GetMapping("/getUserlist")
    public ModelAndView getUserList(){
        List<User> userList = new ArrayList<>();
        User user = new User();
            user.setUserName("张三");
            user.setUserSex("男");
            user.setUserAge(18);
            user.setUserAddress("深圳");
        userList.add(user);
        User user1 = new User();
            user1.setUserName("李四");
            user1.setUserSex("男");
            user1.setUserAge(20);
            user1.setUserAddress("北京");
            userList.add(user1);
        ModelAndView mv = new ModelAndView();
            mv.addObject("userList",userList);
            mv.setViewName("user");
        return mv;
    }
}

（6）在templates下新建thymeleaf模板user.html

注：这里要引入xmlns:th="http://www.thymeleaf.org"

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>籍贯</td>
        </tr>
        <tr th:each="user:${userList}">
            <td th:text="${user.userName}"></td>
            <td th:text="${user.userSex}"></td>
            <td th:text="${user.userAge}"></td>
            <td th:text="${user.userAddress}"></td>
        </tr>
    </table>
</body>
</html>

（7）启动项目，并访问