Thymeleaf中js调取变量、模板化及静态资源拦截

公司项目,使用springboot开发,今天在后台与前台通讯过程中,发现几个问题,做简单整理,加深一下印象。

js调取变量

后台返回变量之后,在前端进行接收,之后需要在js里面对该变量继续处理,如何在js里面进行变量的接收呢?

  • 使用th:inline属性进行javascript的标记。
  • 使用如下方式进行变量数据接收:[[${example}]]

示例代码

 <script th:inline="javascript">
        var message=[[${error}]];
        var code=[[${code}]];
</script>

注意:
在使用script的标签的时候,一定要使用th:inline属性进行标记,否则不会引用到。

静态资源路径

由于默认springmvc对所有的请求都做了拦截。因此,当我们访问一个本地静态资源的话,springmvc拦截器依旧会将请求拦截到。从而造成数据的访问失败。很显然,这不是我们希望的结果。

万幸的是,早在springmvc的时候就spring团队就已经给我们提供了方案。即—在配置的时候将静态资源的请求进行重新定位。两步走:

  1. 继承WebMvcConfigurerAdapter类。
  2. 重写addResourceHandlers方法。

在springboot里面怎么去设置呢?其实是一样的,不过,由于springboot完全基于注解,无法从web.xml里面进行配置,只能新建配置类。如下为我的配置类,仅供参考:

@Configuration
public class WebConfiguration extends WebMvcConfigurerAdapter{

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/admin/static/**").addResourceLocations("classpath:/static/");

    }

注意,需要加入Configuration注解,告诉spring框架这是一个配置类。
如上代码表示,假如收到以admin/static开头的url请求,会将该请求定位到classess/static文件夹。

模块化

我们在使用jsp编写前端页面的时候,会采用分模块的形式,将一个页面里面重复的头和尾部代码提取出来。使用include标签将该页面进行引入,这样做是整个页面的后期修改和完善更加的灵活。那么,对于Thymeleaf而言,存在这种神器吗?
答案当然是肯定的。

  1. 使用th:fragment标签进行模板的定义
  2. 使用th:include标签进行模板的引入。

示例代码如下:
mainfragment.html

<div th:fragment="top">
    <div class="chl-poster simple" id="header">
  </div>
</div>

下面进行该模板的引入:

 <div th:include="mainfragment ::nav"></div>

其中,mainfragment 为引入文件名,nav为模板名。
需要注意:文件名需要带路径,假如mainfragment 存在上级文件夹,将文件夹路径全部写入才行。

 <div th:include="base/mainfragment ::nav"></div>

推荐阅读更多精彩内容