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 在访问就可以了

  • 相关阅读:
    Ext JS学习第三天 我们所熟悉的javascript(二)
    Ext JS学习第二天 我们所熟悉的javascript(一)
    Ext JS学习第十七天 事件机制event(二)
    Ext JS学习第十六天 事件机制event(一)
    Ext JS学习第十五天 Ext基础之 Ext.DomQuery
    Ext JS学习第十四天 Ext基础之 Ext.DomHelper
    Ext JS学习第十三天 Ext基础之 Ext.Element
    Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)
    针对错误 “服务器提交了协议冲突. Section=ResponseHeader Detail=CR 后面必须是 LF” 的原因分析
    C# 使用HttpWebRequest通过PHP接口 上传文件
  • 原文地址:https://www.cnblogs.com/zxh06820/p/12642825.html
Copyright © 2011-2022 走看看