FreeMarker
快来分享你的内容吧～
模板引擎-Thymeleaf与Freemarker
<html> <head></head> <body> <div class="content ql-editor"> <p><span style="font-size: 2em; font-family: PingFangSC-Regular;">模板引擎</span></p> <p><br></p> <p>模板引擎：将数据和页面显示分离。</p> <p><br></p> <p>模板文件 + 数据 --> 模板引擎 --> html</p> <p><br></p> <p>通过正则表达式来识别哪些是固定不变的模板，哪些是变化的数据，用已有的API（如：不同的表达式类型）把什么样的数据用什么格式来渲染进去，根据提供好的规则，模板引擎就可以解析出来。</p> <p><br></p> <p>JSP的局限性：</p> <p><br></p> <p>1）springboot内嵌容器时（打成jar包），不支持JSP。</p> <p>如果要运行JSP需要打成war包，则需要使用外部容器。</p> <p><br></p> <p>2）undertow容器是不支持JSP的。</p> <p><br></p> <p>3）扩展性有限，对于一些默认处理，很难自定义。</p> <p><br></p> <p>4）在容器化技术（如docket）中，对JSP的使用也很繁杂。</p> <p><br></p> <p>因为JSP有这么多的局限性，所以才有了模板引擎</p> <p><br></p> <p>较早的模板引擎：velocity、freemarker</p> <p>国人开发的模板：beetl</p> <p><br></p> <h1>Thymeleaf</h1> <p><br></p> <p>自然的模板，动静分离，是一个处理纯文本的模板引擎。</p> <p><br></p> <h2>引入thymeleaf命名空间</h2> <div class="ql-code-block-container"> <div class="ql-code-block"><span class="ql-token hljs-comment"><!--引入thymeleaf的命名空间，使用时才有提示--><html lang="en" xmlns:th="http://www.thymeleaf.org"></span> </div> </div> <h2><br></h2> <h2>表达式</h2> <p><br></p> <p><strong>${}</strong> 变量表达式，引用一个变量</p> <p><strong><em>{}</em></strong><em> 选择变量表达式，当我们通过${}拿到一个对象时，可以通过</em>{}拿到这个对象的属性值</p> <p><strong>#{} </strong>消息表达式，可以通过配置文件拿到某些数据，还可以用来实现国际化效果</p> <p><strong>@{}</strong> 链接表达式</p> <p><strong>~{}</strong> 片段表达式，引用相同的代码片段</p> <p><br></p> <h2>字符串的拼接</h2> <div class="ql-code-block-container"> <div class="ql-code-block"><span class="ql-token hljs-tag"><p th:text="${person.name} + ' is ' + ${person.age}"></p><!--使用 | 将${}的内容替换成对象，其余的不变--><p th:text="|${person.name} is ${person.age}|"></p></span> </div> </div> <h2><br></h2> <h2>条件判断</h2> <p><br></p> <h3>if的使用</h3> <div class="ql-code-block-container"> <div class="ql-code-block"><span class="ql-token hljs-tag"><p th:if="${msg=='yes'}"></span>这是第一个msg的取值：<span class="ql-token hljs-tag"></p><p th:text="${msg}" th:if="${msg=='yes'}"></p><p th:if="${msg=='no'}"></span>这是第二个msg的取值：<span class="ql-token hljs-tag"></p><p th:text="${msg}" th:if="${msg=='no'}"></p></span> </div> </div> <h3>unless的使用</h3> <div class="ql-code-block-container"> <div class="ql-code-block"><span class="ql-token hljs-tag"><p th:unless="${msg=='yes'}"></span>这是第一个msg的取值：<span class="ql-token hljs-tag"></p><p th:text="${msg}" th:unless="${msg=='yes'}"></p><!--当msg的值不等于no时进行展示，所以下面的会展示出来--><p th:unless="${msg=='no'}"></span>这是第二个msg的取值：<span class="ql-token hljs-tag"></p><p th:text="${msg}" th:unless="${msg=='no'}"></p></span> </div> </div> <h3>switch的使用</h3> <div class="ql-code-block-container"> <div class="ql-code-block"> <div th:switch="${num}"><p th:case="1">1</p><p th:case="2">2</p><p th:case="*">*</p></div> </div> </div> <h2><br></h2> <h2>for循环</h2> <h3>th:each</h3> <div class="ql-code-block-container"> <div class="ql-code-block"><span class="ql-token hljs-tag"><table><thead><tr><th></span>名字<span class="ql-token hljs-tag"></th><th></span>年龄<span class="ql-token hljs-tag"></th></tr></thead><tbody><tr th:each="data:${list}"><td th:text="${data.name}"></span>name<span class="ql-token hljs-tag"></td><td th:text="${data.age}"></span>age<span class="ql-token hljs-tag"></td></tr></tbody></table></span> </div> </div> <h3><br></h3> <h3>状态变量</h3> <p>默认命名是：参数名+Stat（如上的：dataStat），用来<strong>保存迭代状态</strong></p> <p>自定义的命名是：<code><tr th:each="data,status:${list}"></code> 此时状态变量名为status</p> <p>状态变量的属性：</p> <p>index 索引，从0开始</p> <p>count 计数，从1开始</p> <p>size 集合的大小</p> <p>current 当前对象</p> <p>first / last 布尔类型，是否是第一个/最后一个</p> <p>even / odd 布尔类型，是否是 偶数 / 奇数 个</p> <div class="ql-code-block-container"> <div class="ql-code-block"><span class="ql-token hljs-tag"><table><thead><tr><th></span>名字<span class="ql-token hljs-tag"></th><th></span>年龄<span class="ql-token hljs-tag"></th><th></span>index<span class="ql-token hljs-tag"></th><th></span>count<span class="ql-token hljs-tag"></th><th></span>size<span class="ql-token hljs-tag"></th><th></span>current<span class="ql-token hljs-tag"></th><th></span>first<span class="ql-token hljs-tag"></th><th></span>last<span class="ql-token hljs-tag"></th><th></span>even<span class="ql-token hljs-tag"></th><th></span>odd<span class="ql-token hljs-tag"></th></tr></thead><tbody><tr th:each="data:${list}"><td th:text="${data.name}"></span>name<span class="ql-token hljs-tag"></td><td th:text="${data.age}"></span>age<span class="ql-token hljs-tag"></td><td th:text="${dataStat.index}"></span>index<span class="ql-token hljs-tag"></td><td th:text="${dataStat.count}"></span>count<span class="ql-token hljs-tag"></td><td th:text="${dataStat.size}"></span>size<span class="ql-token hljs-tag"></td><td th:text="${dataStat.current}"></span>current<span class="ql-token hljs-tag"></td><td th:text="${dataStat.first}"></span>first<span class="ql-token hljs-tag"></td><td th:text="${dataStat.last}"></span>last<span class="ql-token hljs-tag"></td><td th:text="${dataStat.even}"></span>even<span class="ql-token hljs-tag"></td><td th:text="${dataStat.odd}"></span>odd<span class="ql-token hljs-tag"></td></tr></tbody></table></span> </div> </div> <h2><br></h2> <h2>URL的使用</h2> <h3>基础使用</h3> <div class="ql-code-block-container"> <div class="ql-code-block"> <form th:action="@{/login}" method="post"> </div> <div class="ql-code-block"> username: </div> <div class="ql-code-block"> <input type="text" name="username"> </div> <div class="ql-code-block"> password: </div> <div class="ql-code-block"> <input type="password" name="password"><input type="submit" value="提交"></form> </div> </div> <h3><br></h3> <h3>绝对路径</h3> <h4>1、基本用法</h4> <div class="ql-code-block-container"> <div class="ql-code-block"> <a th:href="@{http://cn.bing.com}">外链到：bing</a><!--渲染效果为<a href="http://cn.bing.com">外链到：bing</a>--> </div> </div> <h4>2、协议自动识别补全</h4> <p>**使用方法： 开头用 // **</p> <p>以引用静态资源举例：</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <script type="text/javascript" th:src="@{//code.jquery.com/jquery-3.4.1.min.js}"></script> </div> </div> <p>渲染结果：</p> <p><code><script type="text/javascript" src="[//code.jquery.com/jquery-3.4.1.min.js](http://code.jquery.com/jquery-3.4.1.min.js)"></script></code></p> <h3><br></h3> <h3>相对路径</h3> <h4>1、上下文相关的URL</h4> <h5>1）基本用法</h5> <p><code><form th:action="@{/login}" method="post"></code></p> <p>比如说：部署项目的地址 localhost:8080/demo</p> <p>渲染结果为：</p> <p>验证方式：在配置文件中增加<code>server.servlet.context-path=/demo</code></p> <h5>2）引用静态资源的方式</h5> <p>先利用springboot的依赖配置</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.4.1</version></dependency> </div> </div> <p>接着在某个html文件中引用</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <script type="text/javascript" th:src="@{/webjars/jquery/3.4.1/jquery.js}"></script> </div> </div> <h5>3）参数的使用</h5> <p>请求中携带参数</p> <p>a）携带一个参数时，如：/addPerson?id=1</p> <p>在表达式中使用：@{/addPerson(id=1)}</p> <p><strong>单个参数的使用，用括号括起来</strong></p> <p>b）携带多个参数时，如：/addPerson?id=1&name=‘lsq’</p> <p>在表达式中使用：@{/addPerson(id=1,name=‘lsq’)}</p> <p><strong>用括号将多个参数括起来，参数之间用逗号隔开</strong></p> <p>c）当参数是路径的一部分时，如： /addPerson/1?name=‘lsq’</p> <p>在表达式中使用：@{/addPerson/{id}(id=1,name=‘lsq’)}</p> <p><strong>支持路径中包含变量 可以使用参数去替换</strong></p> <h4>2、服务器相关URL</h4> <p><code><a th:href="@{~/a.html}"></a></code></p> <p>通过 <strong>~</strong> 知道指定的是服务器某个地址，就不是和项目相关的，这样不同的项目可以访问同一个服务器下的某个文件。</p> <p>渲染结果为：<strong><a href="/a.html"></strong></p> <p><strong>不会增加上下文路径（项目访问路径），可以访问同一个服务器上的不同项目，访问到固定地址。</strong></p> <p><br></p> <p><strong>补充：</strong></p> <p><img src="https://pic.code-nav.cn/planet_post_image/1632761346305089537/s5anxrvy.jpeg"></p> <p><br></p> <p><br></p> <p><br></p> <h2>内置对象/内嵌变量</h2> <p>工具类的使用：（使用方式是 <strong>加前缀#</strong><a href="http:///a.html" target="_blank">）</a></p> <p>dates、calendars、numbers、strings、objects、bools、arrays、lists、sets、Maps</p> <p>日期dates</p> <p>日期格式化：#datas.format()</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <!--dates的使用--><p th:text="${date}"></p><p th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></p><!--拿到当前的时间--><p th:text="${#dates.createNow()}"></p><p th:text="${#dates.createToday()}"></p> </div> </div> <p>strings的使用</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <!--strings的使用--><p th:text="${#strings.isEmpty(str)}"></p><p th:text="${#strings.length(str)}"></p><p th:text="${#strings.equals(str,'duing')}"></p> </div> </div> <p><br></p> <h2>表达式语言</h2> <p>OGNL：Object-Graph Navigation Language 对象视图导航语言</p> <p>可以通过表达式语言 来获取Java的对象</p> <p>在JavaWeb中使用较多</p> <p>SpEL：基于Spring的表达式语言，提供给我们一种运行时对象的交互能力</p> <p>本质都是 在视图层和控制层将数据建立联系的方式</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <p th:text="${ 1 * 2 + 3 - 4}"></p><p th:text="${list[0].name}"></p><p th:text="${T(java.lang.Math).random()}"></p> </div> </div> <h2><br></h2> <h2>内联表达式</h2> <p>用两个中括号 <strong>[ [ ] ] 将一个引用的对象括起来，对象本身还是${}</strong> 获取，这样就能将展示的信息与其它字符串拼接起来了。（展示文本的时候简化逻辑）</p> <p>凡是可以用th:text或th:utext显示的内容都可以用内联表达式来转换。</p> <p><code>th:text</code> => <code>[[...]]</code> 转义了，若含有标签，标签效果不起作用</p> <p><code>th:utext</code> => <code>[(...)]</code> 不转义，按照标签效果输出</p> <p>如果文本需要展示含<code>[[]]</code>的数据，可以禁用内联表达式。</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <p> 加油，[[${info}]] </p><p> 加油，<span th:text="${info}"></span> </p><!--禁用内联表达式--><p th:inline="none"> 加油，[[<span th:text="${info}"></span>]] </p> </div> </div> <p><strong>内联JavaScript</strong></p> <p>当给JavaScript中传一些数据的时候，使用内联JavaScript</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <script type="text/javascript" th:inline="javascript"> </div> <div class="ql-code-block"> //var info = [[${info}]]; </div> <div class="ql-code-block"> <!--内联js，同样支持动静分离,使用 /**/ 将动态数据引起来，在其后跟上静态数据，但这样使用之后原来的注释就不能用了，同时还有一个局限性：在外部js文件里不能使用，在html文件中的js代码生效 --> </div> <div class="ql-code-block"> var info = /*[[${info}]]*/ 123; </div> <div class="ql-code-block"> console.log(info); </div> <div class="ql-code-block"> </script> </div> </div> <p>类似js，同样支持css</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <style th:inline="css"></style> </div> </div> <h2><br></h2> <h2>碎片代码</h2> <p><strong>th:fragment，th:include，th:replace，th:insert</strong></p> <p>有些网页内容，需要在许多网页中使用，可以使用<code>th:fragment</code>在某个独立的（网页）标签中设置碎片代码，并为其命名。</p> <p>在需要引入碎片代码的网页中使用<code>th:include、th:replace、th:insert</code>等引入</p> <p><strong>include，replace，insert的区别：</strong></p> <ol> <li data-list="bullet"><span class="ql-ui"></span>include是只引进碎片代码的内容，不把其标签属性引入（即不引入碎片标签），保留原有的标签属性</li> <li data-list="bullet"><span class="ql-ui"></span>replace与include相反，只引入碎片代码的内容，引入碎片标签，不保留原有的标签</li> <li data-list="bullet"><span class="ql-ui"></span>insert是即引入碎片标签，也保留原有标签（当样式冲突时，碎片标签属性起作用，看网页源码可知）</li> </ol> <p><br></p> <p><img src="https://pic.code-nav.cn/planet_post_image/1632761346305089537/krhrnx5y.jpeg"></p> <p><br></p> <p><br></p> <h1>Freemarker</h1> <p><br></p> <p>一个用java编写的模板引擎，适合作为web项目中的视图层组件，是生成文本的工具。</p> <p>ftl文件本质也是html格式的</p> <p>freemarker区分大小写</p> <p>ftl组成部分：文本（静态的），插值（动态的），标签，注释**<#-- -->**</p> <h2><br></h2> <h2>使用步骤</h2> <p><strong>1）引入freemarker依赖</strong></p> <div class="ql-code-block-container"> <div class="ql-code-block"> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency> </div> </div> <p><strong>2）增加自定义的配置文件</strong></p> <div class="ql-code-block-container"> <div class="ql-code-block"> #旧的使用方式# 文件位置#spring.mvc.view.prefix=/templates# 文件后缀#spring.mvc.view.suffix=.ftl </div> <div class="ql-code-block"> #新的使用方式# 文件位置spring.freemarker.template-loader-path=classpath:/templates# 文件后缀spring.freemarker.suffix=.ftl </div> </div> <p><strong>3）编写controller及ftl文件</strong></p> <h2><br></h2> <p><br></p> <h2>字符串的使用</h2> <p>定义变量：<strong><#assign</strong> info1 = ‘how are you?’></p> <p>字符串的拼接：</p> <p>Hello ${info <strong>+</strong> info1}</p> <p>字符串的内嵌函数：（调用时使用 <strong>字符串名?</strong> ）</p> <p>${info1?substring(0,3)}</p> <p><#--左闭右开--></p> <p>${info1?length}</p> <div class="ql-code-block-container"> <div class="ql-code-block"> Hello ${info} </div> <div class="ql-code-block"><br> </div> <div class="ql-code-block"> <#–定义变量–> </div> <div class="ql-code-block"> <#assign info1 = ‘how are you?’> </div> <div class="ql-code-block"> <#–字符串的拼接–> </div> <div class="ql-code-block"> Hello ${info + info1} </div> <div class="ql-code-block"> <#--字符串的内嵌函数--> </div> <div class="ql-code-block"> ${info1?substring(0,3)} </div> <div class="ql-code-block"> <#--左闭右开--> </div> <div class="ql-code-block"> ${info1?length} </div> </div> <p><br></p> <h2>条件判断</h2> <div class="ql-code-block-container"> <div class="ql-code-block"> <#assign num = 666> </div> <div class="ql-code-block"> <#if num == 666> </div> <div class="ql-code-block"> <span class="ql-token hljs-tag"><p></span>666<span class="ql-token hljs-tag"></p></span> </div> <div class="ql-code-block"> <#elseif num == 888> </div> <div class="ql-code-block"> <span class="ql-token hljs-tag"><p></span>888<span class="ql-token hljs-tag"></p></span> </div> <div class="ql-code-block"> <#else> </div> <div class="ql-code-block"> <span class="ql-token hljs-tag"><p></span>000<span class="ql-token hljs-tag"></p></span> </div> <div class="ql-code-block"> </#if> </div> <div class="ql-code-block"> <#switch num> </div> <div class="ql-code-block"> <#case 666> </div> <div class="ql-code-block"> <span class="ql-token hljs-tag"><p></span>666<span class="ql-token hljs-tag"></p></span> </div> <div class="ql-code-block"> <#break> </div> <div class="ql-code-block"> <#case 888> </div> <div class="ql-code-block"> <span class="ql-token hljs-tag"><p></span>888<span class="ql-token hljs-tag"></p></span> </div> <div class="ql-code-block"> <#break> </div> <div class="ql-code-block"> <#default> </div> <div class="ql-code-block"> <span class="ql-token hljs-tag"><p></span>000<span class="ql-token hljs-tag"></p></span> </div> <div class="ql-code-block"> </#switch> </div> </div> <h2><br></h2> <h2>列表</h2> <div class="ql-code-block-container"> <div class="ql-code-block"> <#assign myList = [1,3,5,7,10,9]> </div> <div class="ql-code-block"><span class="ql-token hljs-tag"><h5></span>无序数组：<span class="ql-token hljs-tag"></h5></span> </div> <div class="ql-code-block"> <#list myList as item> </div> <div class="ql-code-block"> ${item} </div> <div class="ql-code-block"> </#list> </div> <div class="ql-code-block"><span class="ql-token hljs-tag"><br><h5></span>有序数组：<span class="ql-token hljs-tag"></h5></span> </div> <div class="ql-code-block"> <#list myList?sort as item> </div> <div class="ql-code-block"> ${item} </div> <div class="ql-code-block"> </#list> </div> <div class="ql-code-block"><span class="ql-token hljs-tag"><br></span> </div> <div class="ql-code-block"> </div> <div class="ql-code-block"> <#list [1,2,3] as item> </div> <div class="ql-code-block"> ${item} </div> <div class="ql-code-block"> </#list> </div> <div class="ql-code-block"><span class="ql-token hljs-tag"><br></span> </div> <div class="ql-code-block"> </div> <div class="ql-code-block"> <#list 1..3 as item> </div> <div class="ql-code-block"> ${item} </div> <div class="ql-code-block"> </#list> </div> <div class="ql-code-block"><span class="ql-token hljs-tag"><br></span> </div> <div class="ql-code-block"> </div> <div class="ql-code-block"> <#--元素的别名 缀上 _index 代表下标--> </div> <div class="ql-code-block"> <#list 1..3 as item> </div> <div class="ql-code-block"> ${item_index} <#--获取索引--> </div> <div class="ql-code-block"> , ${item}<span class="ql-token hljs-tag"><br></span> </div> <div class="ql-code-block"> </#list> </div> <div class="ql-code-block"> </div> <div class="ql-code-block"> <#list 1..3 as item> </div> <div class="ql-code-block"> <#--判断是否有下一项--> </div> <div class="ql-code-block"> <#if item_has_next> </div> <div class="ql-code-block"> ${item} </div> <div class="ql-code-block"> </#if> </div> <div class="ql-code-block"> </#list> </div> </div> <h2><br></h2> <h2>判断变量是否为空</h2> <div class="ql-code-block-container"> <div class="ql-code-block"> <#--判断变量是否为空：通过 ! 来判断--> </div> <div class="ql-code-block"> <#--<#assign str = 'str'>--> </div> <div class="ql-code-block"> ${str!"default"} </div> </div> <h2><br></h2> <h2>引入其它文件的值</h2> <p>在一个html中引入另一个html中的一些变量的值，不仅能读取，还能修改</p> <div class="ql-code-block-container"> <div class="ql-code-block"> <#import 'other.ftl' as otherFtl> </div> <div class="ql-code-block"> ${otherFtl.name} <span class="ql-token hljs-tag"><br></span> </div> <div class="ql-code-block"> <#--不仅可以读取到它的值，还能修改它的值--> </div> <div class="ql-code-block"> <#assign name = 'welcome ftl is here' in otherFtl> </div> <div class="ql-code-block"> ${otherFtl.name} </div> </div> <p><br></p> <p><br></p> <p>更好的阅读体验可移步到：<a href="https://www.codefather.cn/post/1760679073350279169" target="_blank">模板引擎-Thymeleaf与Freemarker - 编程导航 (</a><a href="http://codefather.cn" target="_blank">code-nav.cn</a><a href="https://www.codefather.cn/post/1760679073350279169" target="_blank">)</a></p> <p><br></p> <p>#模板引擎# #Thymeleaf# #Freemarker# #知识碎片# #CodeGeeX活动#</p> </div> </body> </html>