zoukankan      html  css  js  c++  java
  • springboot集成thymeleaf(入门篇)

    一 前言

    本篇内容是关于thymeleaf的入门知识,即thymeleaf的引擎模板的入门搭建过程;

    公众号:知识追寻者

    知识追寻者(Inheriting the spirit of open source, Spreading technology knowledge;)

    二 springboot整合thymeleaf

    2.1 thymeleaf简介

    Thymeleaf 是 Java 模板引擎,Spring 官方推荐使用,也是 Spring Boot 默认的模板引擎;前后端分离之前就是thymeleaf这类引擎模板的地盘;其支持HTML5的视图模板,能够无缝衔接springboot;主要用途能进行web开发和非web开发,比如页面渲染,代码生成,文档生成等等,做些日常的小工具是个很好的选择;

    2.2 pom.xml

    springboot 2.x; maven 3.5 ; jdk -1.8; 引入 web 和 thymeleaf 启动器;

     		<!--thymeleaf引擎模板-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <!-- html无需严格校验-->
            <dependency>
                <groupId>net.sourceforge.nekohtml</groupId>
                <artifactId>nekohtml</artifactId>
                <version>1.9.15</version>
            </dependency>
    

    2.3 application.yml

    thymeleaf 引擎模板的相关配置,主要是字符集, 资源路径,模板路径,关闭缓存;

    server:
      port: 9200
    spring:
      # 引擎模板配置
      thymeleaf:
        cache: false # 关闭缓存
        mode: LEGACYHTML5 # 去除htm5严格校验
        prefix: classpath:/templates/ # 指定 thymeleaf 模板路径
        encoding: UTF-8 # 指定字符集编码
      mvc:
        static-path-pattern: /static/** # js ,css 等静态文件路径
    
    

    2.3 实体

    用户实体存储数据,实现内容就是在控制层进行封装数据通过springMVC的 ModelAndView 进行视图转发至thymeleaf 引擎模板位置;

    public class User {
    
        private Long id;
    
        private String name;
    
        private Integer age;
    }    
    

    2.4 控制层

    学过springMVC的读者应该不陌生,非常容易理解,就是 请求, 封装数据,视图转发,渲染;

    /**
     * @Author lsc
     * <p> </p>
     */
    @Controller//声明一个控制器
    public class UserController {
    
        @GetMapping("/user")// 请求路径为 ip + port + /user
        // 当访问此路径时会转发至逻辑视图 user
        public String getUser(Model model){
            // list中存放 用户
            ArrayList<User> userList = new ArrayList<>();
            for (long i=0; i<5; i++){
                User user = new User();
                user.setId(i);
                user.setAge(18);
                user.setName("知识追寻者");
                userList.add(user);
            }
            // 为视图添加用户
            model.addAttribute("users",userList);
            // 逻辑视图为 user 即在 templates 下的 user.html
            return "user";
        }
    
    }
    

    2.5 user.html

    user.html 文件位置为resource/templates/ 下;语法知识看文末链接;

    <!DOCTYPE html>
    <!--将默认的头 <html lang="en"> 引入thymeleaf-->
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>用户页面</title>
    </head>
    <body>
    <table border="1px">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
        <!--通过 th:aech 语法迭代user集合-->
        <tr th:each="user: ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
        </tr>
    </table>
    </body>
    </html>
    

    2.6 启动结果

    启动工程 访问路径 http://localhost:9200/user

    页面内容如下;

    id	name	age
    0	知识追寻者	18
    1	知识追寻者	18
    2	知识追寻者	18
    3	知识追寻者	18
    4	知识追寻者	18
    
    

    三 进阶知识

    对于深入学习引擎模板的语法相关知识,给出链接如下

    官网 : https://www.thymeleaf.org/documentation.html

    github : https://github.com/thymeleaf

    相关技术博客:

    https://segmentfault.com/a/1190000016284066

    https://www.jianshu.com/p/d24436f6cb70

  • 相关阅读:
    flink checkpoint机制的实现
    openjdk源码分析之AtomicLong
    cpp之宏和函数调用约定
    JNA 相关问题
    spark RDD
    最长连续序列
    买卖股票的最佳时机
    二叉树展开为链表
    不同的二叉搜索树
    柱状图中最大的矩形
  • 原文地址:https://www.cnblogs.com/zszxz/p/12968413.html
Copyright © 2011-2022 走看看