SSM框架——thymeleaf学习总结

本人关于thymeleaf的学习源自：

https://www.bilibili.com/video/BV1qy4y117qi

1、thymeleaf的项目搭建

　　首先创建springboot项目，相关博客有详细的创建教程，下方仅本人推荐示例（视频中也有相关项目创建教程）：

　　IDEA创建项目教程 　　　　:https://www.jianshu.com/p/40422d484475

　　eclipse创建项目教程　　　  :https://blog.csdn.net/qq_35170365/article/details/80688484

　　项目搭建完成后,配置application.properties，配置如下，端口号只要不和本机当前口号冲突即可，本人用的是8001

server.port=8001
spring.thymeleaf.cache=false

　　  创建thymeleaf网页模板，相关代码如下:

DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

body>
html>

2、第一个程序

项目结构如图：

 

　　第一个程序（基本使用），实现前端标题的数据渲染，先上代码：

　　后台 创建包controller以及类IndexController：

package com.thym.thymdemo.controller;

import com.thym.thymdemo.view.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;

/**
 * @author June
 * @date 2021/12/25 15:35
 */
@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("title","传递的title");
        model.addAttribute("keywords","传递的keywords");
        model.addAttribute("description","传递的description");
        return "index";
    }
}

　　前端创建html网页，index.html，代码如下：

DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="|localhost-${title}|">默认的Titletitle>
    <meta th:content="${description}" name="description" content="默认的description">
    <meta th:content="${keywords}" name="keywords" content="默认的keywords">
head>
<body>

body>
html>

　　结果实现如下：

 

 

3、常用方法

　　实现后台数据的前端实现，有关对象与类的数据传递：

　　后台  创建实体类 User.java，代码如下：

package com.thym.thymdemo.view;

import lombok.Data;

import java.util.Date;
import java.util.List;

/**
 * @author June
 * @date 2021/12/25 15:46
 */
@Data
public class User {
　　//其中lombok插件可实现创建get、set方法，所以此处并未创建get、set方法
    private String username;
    private Integer age;
    private Integer sex;
    private Boolean isVip;
    private Date createTime;
    private List tags;

}

 　　IndexController.java 有关代码修改如下;

package com.thym.thymdemo.controller;

import com.thym.thymdemo.view.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;

/**
 * @author June
 * @date 2021/12/25 15:35
 */
@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("title","传递的title");
        model.addAttribute("keywords","传递的keywords");
        model.addAttribute("description","传递的description");
        return "index";
    }
    @GetMapping("/basic")
    public String basic(Model model){//此处即为javaweb项目中的前后端传值行为
        User user = new User();
        user.setUsername("lookroot");
        user.setAge(32);
        user.setSex(1);
        user.setIsVip(false);
        user.setCreateTime(new Date());
        user.setTags(Arrays.asList("PHP","Java"));
        model.addAttribute("user",user);
        return "basic";
    }
}

　　前端创建html页面，basic.html 代码如下;

DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    
<div th:object="${user}">
    <h2 th:text="*{username}">h2>
    <h2 th:text="*{age}">h2>
    <h2 th:text="*{sex}">h2>
    <h2 th:text="*{isVip}">h2>
    
    <h2 th:if="*{isVip}">会员h2>
    <h2 th:text="*{createTime}">h2>
    <h2 th:text="*{tags}">h2>
div>
    
    <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}">p>
<ul>
    
    <li th:each="tag:${user.tags}" th:text="${tag}">li>
ul>
    
<div th:switch="${user.sex}">
    <p th:case="1">男p>
    <p th:case="2">女p>
    <p th:case="*">默认p>
div>
    
    <div th:replace="~{component::com1}">div>
    
    <div th:insert="~{component::com1}">div>
    
    <div th:insert="~{component::#com2}">div>
    <div th:insert="~{component::com3('传递的数据')}">div>
    <div th:insert="~{component::com4(~{::#message})}">
        <p id="message">替换的模块p>
    div>
body>
html>

　　实现结果如下;

 4、thymeleaf中JavaScript、css的应用

　　thymeleaf+css，首先在src\main\resources\static目录下，创建css文件，写入如下代码：

.app{
    height: 300px;
    width: 300px;
    background-color: blue;
}

　　前端basic页面中代码添加如下（由于所引用的css文件在根目录下，所以可以直接引用）：

<div class="app">div>

　　显示效果如下：

 　　在html页面内部直接写入css有关代码

　　前端添加代码如下：　

<ul>
    <li th:each="tag,stat:${user.tags}" th:text="${tag}"
        th:classappend="${stat.last}?active">li>
ul>

　　结果显示如下：

 

 5、thymeleaf中组件的使用

　　创建component.html页面，写入如下代码：

DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <footer th:fragment="com1">
        
        <h2 th:text="${user.username}">h2>
        com1
    footer>
    <div id="com2">
        com2
    div>
    <div th:fragment="com3(message)">
        <p th:text="${message}">p>
    div>
    <div th:fragment="com4(message)">
        <p th:replace="${message}">p>
    div>
body>
html>

　　前端页面basic页面代码修改如下;

DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" th:href="@{app.css}">
    <style>
        .active{
            color: red;
        }
    style>
head>
<body>
    
    <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}">p>
<ul>
    
    <li th:each="tag:${user.tags}" th:text="${tag}">li>
ul>
<ul>
    <li th:each="tag,stat:${user.tags}" th:text="${tag}"
        th:classappend="${stat.last}?active">li>
ul>
    
    <div th:replace="~{component::com1}">div>
    
    <div th:insert="~{component::com1}">div>
    
    <div th:insert="~{component::#com2}">div>
    <div th:insert="~{component::com3('传递的数据')}">div>
    <div th:insert="~{component::com4(~{::#message})}">
        <p id="message">替换的模块p>
    div>
body>
<script th:inline="javascript">
    const user = /*[[${user}]]*/{}
    console.log(user)
script>
html>

　　实现结果如下：

 

WEB框架总结

相关

标签