美文网首页
SpringBoot 2.2.5 整合Thymeleaf模版引擎

SpringBoot 2.2.5 整合Thymeleaf模版引擎

作者: 天不生我小金 | 来源:发表于2020-05-10 17:23 被阅读0次

    前言:该博客主要是记录自己学习的过程,方便以后查看,当然也希望能够帮到大家。

    完整代码地址在结尾!!

    第一步,在pom.xml加入依赖,如下

    <!-- web依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- thymeleaf依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- 简化w3c标准开发依赖 -->
    <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
    </dependency>
    

    第二步,配置application.yml,如下

    spring:
      thymeleaf:
        cache: false # 关闭thymeleaf缓存,开发时使用,否则没有实时画面
        check-template-location: true # 检查模板是否存在,然后再呈现
        enabled: true  # 启用MVC Thymeleaf视图分辨率
        encoding: utf-8
        mode: HTML # 指定模板编码
        prefix: classpath:/templates # 设置thymeleaf路径默认为src/main/resources/templates
        servlet:
          content-type: text/html # Content-Type值
        suffix: .html # 构建URL时附加查看名称的后缀.
    
    server:
      port: 8082
      servlet:
        context-path: /templates # 在构建URL时的前缀
    

    第三步,在src/main/resources目录下创建templates文件夹,用于放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>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div>
        <span>访问 Model:</span><span th:text="${model}"></span>
    </div>
    <div>
        <span>访问列表</span>
        <table>
            <thead>
            <tr>
                <th>id:</th>
                <th>姓名:</th>
                <th>年龄:</th>
                <th>性别:</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="t : ${list}">
                <td th:text="${t.id}"></td>
                <td th:text="${t.name}"></td>
                <td th:text="${t.age}"></td>
                <td th:text="${t.sex}"></td>
            </tr>
            </tbody>
        </table>
    </div>
    </body>
    </html>
    
    常用th属性:
    th:text:文本替换;
    th:utext:支持html的文本替换。
    th:value:属性赋值  
    th:each:遍历循环元素
    th:if:判断条件,类似的还有th:unless,th:switch,th:case
    th:insert:代码块引入,类似的还有th:replace,th:include,常用于公共代码块提取的场景
    th:fragment:定义代码块,方便被th:insert引用
    th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。
    th:attr:设置标签属性,多个属性可以用逗号分隔
    

    第四步,分别创建类Test,iTestService,TestServiceImpl,TestController用于测试

    Test
    import lombok.Data;
    
    import java.io.Serializable;
    
    /**
     * @Description:
     * @Author: luoyu
     * @Date: 2020/4/12 下午1:24
     * @Version: 1.0.0
     */
    @Data
    public class Test implements Serializable {
    
        private String id;
        private String name;
        private int age;
        private String sex;
    
    }
    
    iTestService
    import com.luoyu.thymeleaf.entity.Test;
    
    import java.util.List;
    
    /**
     * @Description:
     * @Author: luoyu
     * @Date: 2020/4/12 下午1:23
     * @Version: 1.0.0
     */
    public interface iTestService {
    
        /**
         * @Author: luoyu
         * @Description: 随机返回一组数据用于展示
         * @Date: 2020/5/10 4:43 下午
         * @Return: java.util.List<com.jinhaoxun.thymeleaf.pojo.Test>
         * @Throws:
         */
        List<Test> getTest();
    
    }
    
    TestServiceImpl
    import com.luoyu.thymeleaf.entity.Test;
    import com.luoyu.thymeleaf.service.iTestService;
    import org.springframework.stereotype.Service;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Random;
    
    /**
     * @Description:
     * @Author: luoyu
     * @Date: 2020/4/12 下午1:27
     * @Version: 1.0.0
     */
    @Service
    public class TestServiceImpl implements iTestService {
    
        /**
         * @Author: luoyu
         * @Description: 随机返回一组数据用于展示
         * @Date: 2020/5/10 4:43 下午
         * @Return: java.util.List<com.jinhaoxun.thymeleaf.pojo.Test>
         * @Throws:
         */
        @Override
        public List<Test> getTest() {
            List<Test> testList = new ArrayList<>();
            Random random = new Random();
            int count = random.nextInt(30);
            for (int i = 0; i < count; i++) {
                Test test = new Test();
                if(i%3 == 0){
                    test.setId("123");
                    test.setName("李白");
                    test.setAge(18);
                    test.setSex("男");
                }else if(i%3 == 1){
                    test.setId("456");
                    test.setName("韩信");
                    test.setAge(20);
                    test.setSex("男");
                }else {
                    test.setId("789");
                    test.setName("露娜");
                    test.setAge(16);
                    test.setSex("女");
                }
                testList.add(test);
            }
            return testList;
        }
    
    }
    
    TestController
    import com.luoyu.thymeleaf.entity.Test;
    import com.luoyu.thymeleaf.service.iTestService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.ModelAndView;
    
    import java.util.List;
    
    /**
     * @Description:
     * @Author: luoyu
     * @Date: 2020/4/11 下午8:17
     * @Version: 1.0.0
     */
    @RestController
    @RequestMapping("/test")
    public class TestController {
    
        @Autowired
        private iTestService iTestService;
    
        @GetMapping("/getlist")
        public ModelAndView index(){
            ModelAndView mv = new ModelAndView();
            List<Test> testList = iTestService.getTest();
            mv.addObject("list", testList);
            mv.addObject("model", "测试一下模块名");
            mv.setViewName("/index.html");
            return mv;
        }
    
    }
    

    第四步,启动项目,访问:http://localhost:8082/templates/test/getlist,端口号根据配置文件application.yml里面的端口号进行修改,刷新可以随机请求到不同的数据,文中只列举了简单的交互方式,还有各种复杂好玩的方式,有需要的可以自行百度了解

    完整代码地址:https://github.com/Jinhx128/springboot-demo
    注:此工程包含多个module,本文所用代码均在thymeleaf-demo模块下

    后记:本次分享到此结束,本人水平有限,难免有错误或遗漏之处,望大家指正和谅解,欢迎评论留言。

    相关文章

      网友评论

          本文标题:SpringBoot 2.2.5 整合Thymeleaf模版引擎

          本文链接:https://www.haomeiwen.com/subject/gbijnhtx.html