第八篇：Spring Boot整合Thymeleaf_入门试炼04

原创

gblfy 2022-09-07 14:41:14 博主文章分类：SpringBoot ©著作权

文章标签 Spring Boot html spring ooc 文章分类 spring boot 后端开发

©著作权归作者所有：来自51CTO博客作者gblfy的原创作品，请联系作者获取转载授权，否则将追究法律责任

继承parent父工程，新建一个子项目，名称为spring-boot-chapter-8

1、引入 thymeleaf 模板依赖

<!-- 引入 thymeleaf 模板依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
         <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

application.yml添加配置信息

############################################################
# thymeleaf 静态资源配置
############################################################
spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    servlet:
      content-type: text/html
    cache: false

#spring.thymeleaf.prefix:前缀
#spring.thymeleaf.suffix：后缀
#spring.thymeleaf.mode=HTML5：模板
#spring.thymeleaf.encoding：编码格式
#spring.thymeleaf.servlet.content-type
#spring.thymeleaf.cache：关闭缓存，即时刷新，上线生产数安静需要改为true

创建实体类User

@Data
public class User {

    private Long id;
    private String name;
    private String password;
    private String desc;
    private Integer age;
    private Date birthday;
}

新建ThymeleafController

@Controller
@RequestMapping("/th")
public class ThymeleafController {


    @RequestMapping("/index")
    public String index(ModelMap map) {
        map.addAttribute("name", "thymeleaf-imooc");
        return "thymeleaf/index";
    }

    @RequestMapping("center")
    public String center() {
        return "thymeleaf/center/center";
    }

    @RequestMapping("test")
    public String test(ModelMap map) {

        User u = new User();
        u.setName("superadmin");
        u.setAge(10);
        u.setPassword("123465");
        u.setBirthday(new Date());
        u.setDesc("<font color='green'><b>hello imooc</b></font>");

        map.addAttribute("user", u);

        User u1 = new User();
        u1.setAge(19);
        u1.setName("imooc");
        u1.setPassword("123456");
        u1.setBirthday(new Date());

        User u2 = new User();
        u2.setAge(17);
        u2.setName("LeeCX");
        u2.setPassword("123456");
        u2.setBirthday(new Date());

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);

        map.addAttribute("userList", userList);

        return "thymeleaf/test";
    }

    @PostMapping("postform")
    public String postform(User u) {

        System.out.println("姓名：" + u.getName());
        System.out.println("年龄：" + u.getAge());

        return "redirect:/th/test";
    }

    @RequestMapping("showerror")
    public String showerror(User u) {

        int a = 1 / 0;

        return "redirect:/th/test";
    }
}

新建接口类UserRepository

public interface UserRepository {
    /**
     * 保存或更新用户
     *
     * @param user
     * @return
     */
    User saveOrUpdateUser(User user);

    /**
     * 根据id删除用户
     *
     * @param id
     */
    void deleteUser(Long id);

    /**
     * 根据id查询用户
     *
     * @param id
     */
    User getUserById(Long id);

    /**
     * 查询用户列表
     */
    Collection<User> listUsers();
}

新建接口实现类UserRepositoryImpl

@Repository
public class UserRepositoryImpl implements UserRepository {

    private static AtomicLong counter = new AtomicLong();//计数器 添加用户/次 +1
    private final ConcurrentMap<Long, User> userMap = new ConcurrentHashMap<Long, User>();

    @Override
    public User saveOrUpdateUser(User user) {
        Long id = user.getId();
        if (id == null) {
            id = counter.incrementAndGet();
            user.setId(id);
        }
        this.userMap.put(id, user);//id 对应 user
        return user;
    }

    @Override
    public void deleteUser(Long id) {
        this.userMap.remove(id);
    }

    @Override
    public User getUserById(Long id) {
        return this.userMap.get(id);
    }

    @Override
    public Collection<User> listUsers() {
//        Collection<User> userList = this.userMap.values();
        return this.userMap.values();
    }
}

在resourcestemplates/目录下面新建thymeleaf目录：新建index.html和test.html
index.html内容如下：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
Thymeleaf模板引擎
<h1 th:text="${name}">hello world~~~~~~~</h1>
</body>
</html>

test.html内容如下：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>

    <!--   <script th:src="@{/static/js/test.js}"></script> -->

</head>
<body>

<div>
    用户姓名：<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/>
    <br/>
    用户年龄：<input th:value="${user.age}"/>
    <br/>
    用户生日：<input th:value="${user.birthday}"/>
    <br/>
    用户生日：<input th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}"/>
    <br/>
</div>

<br/>

<div th:object="${user}">
    用户姓名：<input th:id="*{name}" th:name="*{name}" th:value="*{name}"/>
    <br/>
    用户年龄：<input th:value="*{age}"/>
    <br/>
    用户生日：<input th:value="*{#dates.format(birthday, 'yyyy-MM-dd hh:mm:ss')}"/>
    <br/>
</div>

<br/>

text 与 utext ：<br/>
<span th:text="${user.desc}">abc</span>
<br/>
<span th:utext="${user.desc}">abc</span>
<br/>
<br/>

URL:<br/>
<a href="" th:href="@{http://www.imooc.com}">网站地址</a>
<br/>

<br/>
<form th:action="@{/th/postform}" th:object="${user}" method="post" th:method="post">
    <input type="text" th:field="*{name}"/>
    <input type="text" th:field="*{age}"/>
    <input type="submit"/>
</form>
<br/>

<br/>
<div th:if="${user.age} == 18">十八岁的天空</div>
<div th:if="${user.age} gt 18">你老了</div>
<div th:if="${user.age} lt 18">你很年轻</div>
<div th:if="${user.age} ge 18">大于等于</div>
<div th:if="${user.age} le 18">小于等于</div>
<br/>

<br/>
<select>
    <option >选择框</option>
    <option th:selected="${user.name eq 'lee'}">lee</option>
    <option th:selected="${user.name eq 'imooc'}">imooc</option>
    <option th:selected="${user.name eq 'LeeCX'}">LeeCX</option>
</select>
<br/>

<br/>
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>年龄备注</th>
        <th>生日</th>
    </tr>
    <tr th:each="person:${userList}">
        <td th:text="${person.name}"></td>
        <td th:text="${person.age}"></td>
        <td th:text="${person.age gt 18} ? 你老了 : 你很年轻">18岁</td>
        <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd hh:mm:ss')}"></td>
    </tr>
</table>
<br/>

<br/>
<div th:switch="${user.name}">
    <p th:case="'lee'">lee</p>
    <p th:case="#{roles.manager}">普通管理员</p>
    <p th:case="#{roles.superadmin}">超级管理员</p>
    <p th:case="*">其他用户</p>
</div>
<br/>

</body>
</html>

在resourcestemplates/thymeleaf目录下新建center目录并在目录下：
新建index.html和test.html center.html内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
Thymeleaf模板引擎
<h1>center page</h1>
</body>
</html>