zoukankan      html  css  js  c++  java
  • SpringBoot与Thymeleaf使用入门

    Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。

    与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。

    1.编写一个controller方法,返回一些用户数据,放入模型中,将来在页面渲染

    @GetMapping("/all")
    public String all(ModelMap model) {
        // 查询用户
        List<User> users = this.userService.queryAll();
        // 放入模型
        model.addAttribute("users", users);
        // 返回模板名称(就是classpath:/templates/目录下的html文件名)
        return "users";
    }

    2.引入thymeleaf启动器:

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    SpringBoot会自动为Thymeleaf注册一个视图解析器: ThymeleafViewResolver

    与解析JSP的InternalViewResolver类似,Thymeleaf也会根据前缀和后缀来确定模板文件的位置:

    • 默认前缀:classpath:/templates/

    • 默认后缀:.html

    所以如果我们返回视图:users,会指向到 classpath:/templates/users.html

    3.静态页面编写users.html

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style type="text/css">
            table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
            table, th, td {border: 1px solid darkslategray;padding: 10px}
        </style>
    </head>
    <body>
    <div style="text-align: center">
        <span style="color: darkslategray; font-size: 30px">hello world!</span>
        <hr/>
        <table class="list">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>用户名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>生日</th>
            </tr>
            <tr th:each="user : ${users}">
                <td th:text="${user.id}">1</td>
                <td th:text="${user.name}">小明</td>
                <td th:text="${user.userName}">xiaoming</td>
                <td th:text="${user.age}">23</td>
                <td th:text="${user.sex}"></td>
                <td th:text="${user.birthday}">1999-02-30</td>
            </tr>
        </table>
    </div>
    </body>
    </html>

    使用了以下语法:

    • ${} :这个类似与el表达式,但其实是ognl的语法,

    • th-指令:th-是利用了Html5中的自定义属性来实现的。如果不支持H5,可以用data-th-来代替

      • th:each:类似于c:foreach 遍历集合,

      • th:text:声明标签中的文本

        • 例如<td th-text='${user.id}'>1</td>,如果user.id有值,会覆盖默认的1

        • 如果没有值,则会显示td中默认的1。这正是thymeleaf能够动静结合的原因,模板解析失败不影响页面的显示效果,因为会显示默认值!

      • 测试

    Thymeleaf会在第一次对模板解析之后进行缓存,修改页面后并不会立刻看到效果,开发阶段可以关掉缓存使用:

    # 开发阶段关闭thymeleaf的模板缓存
    spring.thymeleaf.cache=false
    注意:
    在Idea中,我们需要在修改页面后按快捷键:`Ctrl + Shift + F9` 对项目进行rebuild才可以。

    另外还需要注意的是

    springboot加载templates下html打印的是返回的字符串,而不是页面内容,

    错误原因:是因为在controller类中使用了 @RestController 注解(补充 : 如果加上注解 @ResponseBody 也会出现相同情况)

    解决办法:将@RestController改为 @Controller 在访问就可以了

  • 相关阅读:
    刚装上最新node,npm install报这个错误!求ndoe大神解答!!!
    NodeJS、NPM安装配置与测试步骤(windows版本)
    使用vue框架运行npm run dev 时报错解决
    【转】C 语言吧 · 问题资料大全【转】
    动态嵌入式DLL木马病毒的发现及清除
    上班族最致命的十种生活方式
    如何避免重复包含一个头文件?#ifndef #define #endif #Pragma
    VC编程经验汇总
    C++学习重点分析
    关于内存对齐
  • 原文地址:https://www.cnblogs.com/zxh06820/p/12642825.html
Copyright © 2011-2022 走看看