美文网首页程序员
SpringBoot系列(六)集成thymeleaf详解版

SpringBoot系列(六)集成thymeleaf详解版

作者: 全栈学习笔记 | 来源:发表于2020-04-18 16:54 被阅读0次

    SpringBoot系列(六)集成thymeleaf详解版

    目录

    1. thymeleaf简介
    2. thymeleaf特点
    3. thymeleaf在SpringBoot的应用
    4. SpringBoot引入Thymeleaf
    5. controller配置
    6. thymeleaf页面测试编写
    7. 结果展示
    8. 其他thymeleaf语法
    thymeleaf.png

    1. thymeleaf简介

     1. Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。

     2. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 -HTML可以在浏览器中正确显示,也可以作为静态原型工作,从而可以在开发团队中加强协作。

     3. Thymeleaf拥有适用于Spring Framework的模块,与您喜欢的工具的大量集成以及插入您自己的功能的能力,对于现代HTML5 JVM Web开发而言,Thymeleaf是理想的选择-尽管它还有很多工作要做。

    2. thymeleaf特点

     1. thymeleaf在有网络无网络的环境下都可以运行,所以可以直接在浏览器打开查看静态页面效果。它支持HTML原型,可以在HTML标签里面添加其他属性来实现数据渲染。

     2. thymeleaf具有开箱即用的特性,Thymeleaf是Spring boot推荐使用的模版引擎,直接以html显示,前后端可以很好的分离。

    3. thymeleaf在SpringBoot的应用

     1. 国际化,渲染不同国家的语言

     2. 共同页面显示,比如统一异常页面处理,共同的页面处理

    4. SpringBoot引入Thymeleaf

     新建一个Springboot web项目,然后添加以下依赖。

    <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>
    

     然后在配置文件里面添加如下依赖。

    spring:
      thymeleaf:
        cache: false 
        prefix: classpath:/templates/
        encoding: UTF-8 #编码
        suffix: .html #模板后缀
        mode: HTML #模板
    

    配置说明:

    cache这一行是将页面的缓存关闭,不然我们改变页面之后可能不能及时看到更改的内容,默认是true。

    prefix是配置thymeleaf模板所在的位置。

    encoding 是配置thymeleaf文档的编码,后面的就不说了

    5. controller配置

     上面我们配置好了环境之后就可以创建一个controller文件夹,然后写一个controller,来测试我们的thymeleaf是否成功引入。顺便创建一个对象。
    代码:

    @Controller
    public class ThymeleafController {
    
        @GetMapping("/getStudents")
        public ModelAndView getStudent(){
            List<Student> students = new LinkedList<>();
            Student student = new Student();
            student.setId(1);
            student.setName("全栈学习笔记");
            student.setAge(21);
            Student student1 = new Student();
            student1.setId(2);
            student1.setName("张三");
            student1.setAge(22);
            students.add(student);
            students.add(student1);
            ModelAndView modelAndView = new ModelAndView();
            modelAndView.addObject("students",students);
            modelAndView.setViewName("students");
            return modelAndView;
        }
    }
    

    代码解释 :我们创建一个list,然后在list里面添加数据,一遍一次将数据传到页面使用。然后我们创建一个ModelAndView的对象,将list放入这个modeAndView对象中,第一个参数是需要放到model中的属性名称相当于是一个键,第二个是,是一个对象。然后利用setViewName方法,设置要跳转的页面或者说是将数据传到对应的页面

     最外层我们使用了一个 @Controller,这个注解是用来返回一个页面或者视图层的。

     当然,返回ModelAndView对象只是一种方法,还有其他的方法,比如说下面这样

    @RequestMapping("/getString")
    public String getString(HttpServletRequest request){
        String name = "全栈学习笔记";
        request.setAttribute("name",name);
        return "index.html";
    }
    

    利用http的request传值。
    然后还有这样

    @RequestMapping("/getModel")
    public String getModel(Model model){
        model.addAttribute("key","这是一个键");
        return "index.html";
    }
    

     去掉末尾的.html也可以,因为我们在配置文件里面设置了文件的格式为HTML文件。return的字符串都是对应的HTML文件的名称。

    实体类代码如下:

    /**
     * (Student)实体类
     *
     * @author 全栈学习笔记
     * @since 2020-04-14 11:39:10
     */
    public class Student  {
        private static final long serialVersionUID = -91969758749726312L;
        /**
        * 唯一标识id
        */
        private Integer id;
        /**
        * 姓名
        */
        private String name;
        /**
        * 年龄
        */
        private Integer age;
        //省略get,set方法,自己加上
    }
    

    6. 页面编写

     写好代码就等页面了,在templates文件夹下面创建一个students.html文件,编写如下代码

    <!DOCTYPE html>
    <html lang="en" xmlns:th="https://www.thymeleaf.org/">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="1">
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr th:each="student:${students}">
            <td th:text="${student.id}"></td>
            <td th:text="${student.name}"></td>
            <td th:text="${student.age}"></td>
        </tr>
    </table>
    </body>
    </html>
    

     这里有一个很重要的事情就是,我们使用thymeleaf模板之前必须先引入thymeleaf,如下。

    <html lang="en" xmlns:th="https://www.thymeleaf.org/">
    

     这个很关键,不然你就用不了这个thymeleaf语法规则。

    代码说明:你可以看到th:each 这个语法,是用来遍历的,类似于for循环,然后我们通过th:text 这个语法来渲染文字。

    7.测试结果显示

     运行项目,浏览器输入localhost:8089/getStudents

    QQ截图20200418161622.png

    8.thymeleaf常用的语法

    常用的语法:

    <!-- 对象 -->
    <div th:object="${student}">
        <p th:text="id"></p>
        <p th:text="name"></p>
        <p th:text="age"></p>
    </div>
    <!-- 逻辑判断 -->
    th:if
    th:else
    <!-- 分支控制 -->
    th:switch
    th:case
    
    <!--循环 -->
    th:each
    <!-- 运算 -->
    <p th:text="${age}%2 == 0"></p>
    <!-- 赋制value -->
    th:value
    <!-- 链接 -->
    th:href
    

    本期讲解就到这里,如果你觉得本文对你有用,可以点个赞,点个关注哦!下一期更精彩!wx search 全栈学习笔记!点个关注不迷路。

    相关文章

      网友评论

        本文标题:SpringBoot系列(六)集成thymeleaf详解版

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