首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

另一个Thymeleaf不会加载脚本和脚本文件(.js)问题-(在父jsp页面中工作良好,但当移动到模板时,不加载)

Thymeleaf是一种Java模板引擎,用于在服务器端生成HTML页面。它提供了一种将数据和模板结合的方式,使得开发人员可以轻松地将动态数据呈现给用户。

在Thymeleaf中,加载脚本和脚本文件(.js)的问题可能是由于模板的路径问题导致的。当将父jsp页面移动到模板时,可能需要调整脚本文件的路径,以确保正确加载。

解决这个问题的一种方法是使用Thymeleaf的内置属性th:src来指定脚本文件的路径。例如,如果脚本文件位于静态资源目录下的js文件夹中,可以使用以下代码来加载脚本文件:

代码语言:txt
复制
<script th:src="@{/js/script.js}"></script>

这里的@{/js/script.js}是Thymeleaf的URL表达式,它会根据应用程序的上下文路径自动解析为正确的URL。

另外,还可以使用Thymeleaf的th:inline属性将脚本直接嵌入到HTML页面中,而不是通过外部文件加载。这样可以避免路径问题。例如:

代码语言:txt
复制
<script th:inline="javascript">
    // 在这里编写JavaScript代码
</script>

推荐的腾讯云相关产品:腾讯云对象存储(COS)。腾讯云对象存储(COS)是一种高可用、高可靠、强安全的云存储服务,适用于存储海量文件、大数据分析、静态网站托管等场景。您可以使用腾讯云对象存储(COS)来存储和管理您的脚本文件。了解更多关于腾讯云对象存储(COS)的信息,请访问:腾讯云对象存储(COS)产品介绍

请注意,以上答案仅供参考,具体的解决方法可能因您的应用程序架构和需求而有所不同。建议您参考Thymeleaf的官方文档和腾讯云的相关文档,以获得更详细和准确的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

微服务架构Day03-SpringBoot之web开发配置

官方标准,使用广泛,丰富的第三方jsp标签库5. 性能良好 ,jsp编译成class文件执行,有很好的性能表现 1. jsp没有明显的缺点2....需要加入js脚本 freemarker: freemarker是一个用Java语言编写的模板引擎,基于模板生成文本来输出 freemarker与Web容器无关,也就是说,在Web运行时,并不知道是Servlet...,velocity是最好的,其次是jsp, 普通的页面freemarker性能最差.但是在复杂页面,比如包含大量判断,日期金额格式化的页面上 ,freemarker的性能比使用tag和el的jsp好...这个在建立 “宏库” 内置与Java语言无关的字符串,列表,Map的操作方法 能提示模版中的拼写错误以及其他错误 当访问一个不存在的变量时,freemarker在执行模版时会报错 通过配置,可以指定freemarker...XML与HTML模板: 相对于编写逻辑代码,开发者只需将标签属性添加到模板中即可 这些标签就会在文档对象模型DOM上执行预先制定好的逻辑 thymeleaf具有良好的扩展性: 可以使用thymeleaf

90210

一个Java程序猿眼中的前后端分离以及Vue.js入门

前后端不分 后端模板:Jsp、FreeMarker、Velocity 前端模板:Thymeleaf 前后端不分,Jsp 是一个非常典型写法,Jsp 将 HTML 和 Java 代码结合在一起,刚开始的时候...页面给前端 --> 前端不会Jsp。...在单页应用中,所有必要的代码( HTML、JavaScript 和 CSS )都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面。...,包括开发时依赖和发布时依赖 对于开发者来说,以后 99.99% 的工作都是在 src 中完成的,src 中的文件目录如下: ?...:1.页面模板(template);2.页面脚本(script);3.页面样式(style) 页面模板中,定义了页面的 HTML 元素,这里定义了两个,一个是一张图片,另一个则是一个 router-view

1.4K30
  • 一个Java程序猿眼中的前后端分离以及Vue.js入门

    前后端不分 后端模板:Jsp、FreeMarker、Velocity 前端模板:Thymeleaf 前后端不分,Jsp 是一个非常典型写法,Jsp 将 HTML 和 Java 代码结合在一起,刚开始的时候...页面给前端 --> 前端不会Jsp。...在单页应用中,所有必要的代码( HTML、JavaScript 和 CSS )都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面。...,包括开发时依赖和发布时依赖 对于开发者来说,以后 99.99% 的工作都是在 src 中完成的,src 中的文件目录如下: ?...:1.页面模板(template);2.页面脚本(script);3.页面样式(style) 页面模板中,定义了页面的 HTML 元素,这里定义了两个,一个是一张图片,另一个则是一个 router-view

    91510

    freemarker+yml介绍 以及freemarker与JSP的区别

    2.3 编写模板文件*.ftl(当做jsp使用即可) ​编辑     2.4 访问控制器后进行页面跳转       3. freemarker常用语法   3.1 取值    3.2 条件    ...但是在复杂页面上(包含大量判断、日期金额格式化)的页面上,freemarker的性能比使用tag和el的jsp好。 2、宏定义比jsp tag方便 3、内置大量常用功能。...在模板中,主要用于如何展现数据, 而在模板之外注意于要展示什么数据 注1:springboot中支持的两种模板技术         thymeleaf(默认)/freemarker 2....,js,css等       mvc:     static-path-pattern: /static/**   2.3 编写模板文件*.ftl(当做jsp使用即可)   2.4 访问控制器后进行页面跳转...但是在复杂页面上(包含大量判断、日期金额格式化)的页面上,freemarker的性能比使用tag和el的jsp好。 2、宏定义比jsp tag方便 3、内置大量常用功能。

    1.5K40

    JavaWeb-汇总

    每个JSP文件都有一个自己的类加载器,也就是说,此加载器可能会存在多个实例。...通过这样进行划分,就很好地解决了我们上面所提到的问题,但是我们发现,这样的类加载机制,破坏了JDK 的双亲委派机制,比如 Webapp ClassLoader,它只加载自己的 class 文件,它没有将类交给父类加载器进行加载...快速入门 1、首先还是新建一个 Web 项目,在创建时勾选 Thymeleaf 依赖 2、编写一个前端页面,名称为test.html,放在 resource 目录下,在 html 标签内部添加xmlns...模板布局 在某些网页中,我们会发现,整个网站的页面,除了中间部分的内容会随着我们的页面跳转而变化外,有些部分是一直保持一个状态的。...Thymeleaf 可以轻松实现这样的操作,我们只需要将不会改变的板块设定为模板布局,并在不同的页面中插入这些模板布局,就无需每个页面都去编写同样的内容了。

    1.4K30

    软件架构之前后端分离与前端模块化发展史

    痛点一:JSP 效率问题 首先,JSP 必须要在 Servlet 容器中运行(例如 Tomcat,jetty 等),在请求 JSP 时也需要进行一次编译过程,最后被译成 Java 类和 class 文件...,这些都会占用 PermGen 空间,同时也需要一个新的类加载器加载,JSP 技术与 Java 语言和 Servlet 有强关联,在解耦上无法与模板引擎或者纯 html 页面相媲美。...在这种工作模式下,人为出错率较高,后端开发人员任务更重,修改问题时需要双方协同开发,效率低下,一旦出现问题后,前端开发人员面对的是充满标签和表达式的 JSP 页面,后端人员在面对样式或者交互的问题时本就造诣不高的前端技术也会捉襟见肘...在设计完成后,Web 端开发人员、App 端开发人员、后端开发人员都可以投入到开发工作当中,能够做到并行开发,前端开发人员与后端开发人员职责分离,即使出现问题,也是修复各自的问题不会互相影响和耦合,开发效率高且满足企业对于多产品线的开发需求...另一个问题,因为真实项目中的公用脚本之间的依赖关系是比较复杂的,比如 c 脚本依赖 b 脚本,a 脚本依赖 b 脚本,那么我们在引入的时候就要注意必须要这样引入。

    1.3K10

    Thymeleaf 生成静态化模板

    译过来就是:Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎 thymeleaf是一个XML/XHTML/HTML5…模板引擎 可用于Web与非Web环境中的应用开发。...与JSP 不同它本身就是一个.jsp的文件, 通过服务器数据渲染翻译,成 .html 而 Thymeleaf 是通过 html 文件标签中,th:xx 属性进行渲染, 最后还是一个html静态页面...模板引擎是动态网页发展进步的产物,在最初并且流传度最广的 jsp它就是一个模板引擎。...我们在开发时候要确保页面是最新的所以需要禁用缓存; 而在上线运营时可能页面不常改动为了减少服务端压力以及提升客户端响应速度会允许页面缓存的使用。...实际开发中,对于 用户访问量高,项目 浏览器对于静态页面加载快,且更加兼容 采用 静态页面比较ok! 当然实际开发中,数据可能来源于多个模块!且更加复杂…这个是需要注意的!

    15110

    一起来学 SpringBoot 2.x | 第四篇:整合 Thymeleaf 模板

    使用嵌入式Servlet容器时,请避免使用JSP,因为使用JSP打包后会存在一些限制。 在SpringBoot使用上述模板,默认从 src/main/resources/templates下加载。...浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。...所以它可以让前端小姐姐在浏览器中查看页面的静态效果,又可以让程序员小哥哥在服务端查看带数据的动态页面效果。...src/main/resources/templates 目录下创建一个名 index.html 的模板文件,可以看到 thymeleaf 是通过在标签中添加额外属性动态绑定数据的 <!...,只需要在src/main/static/目录下放置一张名为favicon.ico就可以了 默认配置 SpringBoot 默认情况下为我们做了如下的默认配置工作,熟悉默认配置在开发过程中可以更好的解决问题

    61740

    Spring Boot (十三): Spring Boot 小技巧

    update:最常用的属性,第一次加载hibernate时根据model类会自动建立起表的结构(前提是先建立好数据库),以后加载hibernate时根据 model类自动更新表结构,即使表结构改变了但表中的行仍然存在不会删除以前的行...validate :每次加载hibernate时,验证创建数据库表结构,只会和数据库中的表进行比较,不会创建新表,但是会插入新值。5、 none : 什么都不做。...第二种方式启动的时候不会创建表,需要在初始化脚本中判断表是否存在,再初始化脚本的步骤。 在生产中,这两种模式都建议慎用!...也比如你在使用 Vue.js 这样的库,然后有 这样的 html 代码,也会被 Thymeleaf 认为不符合要求而抛出错误。...通过设置 Thymeleaf 模板可以解决这个问题,下面是具体的配置: spring.thymeleaf.cache=false spring.thymeleaf.mode=LEGACYHTML5 LEGACYHTML5

    1.2K20

    springboot(十三):springboot小技巧

    update:最常用的属性,第一次加载hibernate时根据model类会自动建立起表的结构(前提是先建立好数据库),以后加载hibernate时根据 model类自动更新表结构,即使表结构改变了但表中的行仍然存在不会删除以前的行...validate :每次加载hibernate时,验证创建数据库表结构,只会和数据库中的表进行比较,不会创建新表,但是会插入新值。 5、 none : 什么都不做。...第二种方式启动的时候不会创建表,需要在初始化脚本中判断表是否存在,再初始化脚本的步骤。 在生产中,这两种模式都建议慎用!...也比如你在使用Vue.js这样的库,然后有这样的html代码,也会被thymeleaf认为不符合要求而抛出错误。...通过设置thymeleaf模板可以解决这个问题,下面是具体的配置: spring.thymeleaf.cache=false spring.thymeleaf.mode=LEGACYHTML5 LEGACYHTML5

    1.2K100

    SpringBoot ( 二 ) :web 综合开发

    update:最常用的属性,第一次加载hibernate时根据model类会自动建立起表的结构(前提是先建立好数据库),以后加载hibernate时根据 model类自动更新表结构,即使表结构改变了但表中的行仍然存在不会删除以前的行...validate :每次加载hibernate时,验证创建数据库表结构,只会和数据库中的表进行比较,不会创建新表,但是会插入新值。...,也需要安装一套完整的开发环境,然后各类Java IDE中修改模板、静态资源文件,启动/重启/重新加载应用服务器,刷新页面查看最终效果。...但实际上前端工程师的职责更多应该关注于页面本身而非后端,使用JSP,Velocity等传统的Java模板引擎很难做到这一点,因为它们必须在应用服务器中渲染完成后才能在浏览器中看到结果,而Thymeleaf...从根本上颠覆了这一过程,通过属性进行模板渲染不会引入任何新的浏览器不能识别的标签,例如JSP中的,不会在Tag内部写表达式。

    99630

    重学SpringBoot系列之整合静态资源与模板引擎

    这样在层次划分上属于比较含糊不清的。当然企业可以通过规范的方式去限制,不允许在jsp页面写java代码,但这只是规范层面的事,实际怎样无法控制。...我们都知道,JSP在第一次执行的时候需要转换成Servlet类,开发阶段进行功能调适时,需要频繁的修改JSP,每次修改都要编译和转换,那么试想一天中我们浪费在程序编译的时间有多少。...但是java模板引擎,仍然是使用的服务器端的渲染技术,也就是没有办法将html页面和后台服务层面全面解耦,这就要求前端工程师和后端工程师在同一个项目结构下工作,而且前端工程师及其依赖于后端的业务数据,页面无法脱离于后端请求数据在浏览器独立运行...Thymeleaf 模板可以直接当作静态原型来使用,它主要目标是为开发者的开发工作流程带来优雅的自然模板,也是 Java 服务器端 HTML5 开发的理想选择 ---- 准备工作-IDEA设置 在开始使用...webjars的版本号暴露出来,一定程度上造成安全问题,所以使用webjars就别用链接表达式): 其它表达式 在基础语法中,默认支持字符串连接、数学运算、布尔逻辑和三目运算等。

    5.2K31

    Web性能优化之Worker线程(上).md

    创建工作线程 创建工作线程最常见的方式是「加载 JS 文件」:即把「文件路径」提供给 Worker 构造函数,然后构造函数再在「后台异步加载」脚本并实例化工作线程。...中,因此 main.js 必须以 Worker 对象 为「代理」实现与工作线程通信 在{3}行,虽然相应的工作线程可能还不存在,但该 Worker 对象已在原始环境中可用了 安全限制 工作线程的脚本文件...「只能」从与父页面「相同的源」加载。...从其他源加载工作线程的脚本文件会导致错误,如下所示: 假设父页面为https://bcnz.com // 尝试基于 与父页面同源的脚本创建工作者线程 const sameOriginWorker = new...虽然父上下文中可以立即使用这个 Worker 对象,但与之关联的工作线程可能还没有创建,因为「存在请求脚本的网格延迟和初始化延迟」。

    1.3K10

    为什么要放弃 JSP ?

    包括你的js,css,图片,各种第三方的库,对吧? 好,下面在浏览器中输入你的网站域名:www.xxx.com,之后发生了什么?...前端工程师做好html后,需要由Java工程师来将html修改成jsp页面,出错率较高(因为页面中经常会出现大量的js代码),修改问题时需要双方协同开发,效率低下。 3....JSP 内有较多标签和表达式,前端工程师在修改页面时会捉襟见肘,遇到很多痛点。 7. 如果JSP中的内容很多,页面响应会很慢,因为是同步加载。...发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。 页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责。...加重了前端团队的工作量,减轻了后端团队的工作量,提高了性能和可扩展性。 4. 我们需要一些前端的框架来解决类似于页面嵌套,分页,页面跳转控制等功能。(上面提到的那些前端框架)。 5.

    1.1K40

    为什么要放弃 JSP ?

    前端工程师做好 html 后,需要由 Java 工程师来将 html 修改成 jsp 页面,出错率较高(因为页面中经常会出现大量的 js 代码),修改问题时需要双方协同开发,效率低下。...每次请求 JSP 都是访问 Servlet 再用输出流输出的 html 页面,效率没有直接使用 html 高。 JSP 内有较多标签和表达式,前端工程师在修改页面时会捉襟见肘,遇到很多痛点。...如果 JSP 中的内容很多,页面响应会很慢,因为是同步加载。 基于上述的一些痛点,我们应该把整个项目的开发权重往前移,实现前后端真正的解耦!...发现 bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。 页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责。...加重了前端团队的工作量,减轻了后端团队的工作量,提高了性能和可扩展性。 我们需要一些前端的框架来解决类似于页面嵌套,分页,页面跳转控制等功能。(上面提到的那些前端框架)。

    1.3K40

    Java Web项目为什么要放弃JSP

    包括你的js,css,图片,各种第三方的库,对吧? 好,下面在浏览器中输入你的网站域名:www.xxx.com,之后发生了什么?...前端工程师做好html后,需要由Java工程师来将html修改成jsp页面,出错率较高(因为页面中经常会出现大量的js代码),修改问题时需要双方协同开发,效率低下。 3....JSP 内有较多标签和表达式,前端工程师在修改页面时会捉襟见肘,遇到很多痛点。 7. 如果JSP中的内容很多,页面响应会很慢,因为是同步加载。...发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。 页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责。...加重了前端团队的工作量,减轻了后端团队的工作量,提高了性能和可扩展性。 4. 我们需要一些前端的框架来解决类似于页面嵌套,分页,页面跳转控制等功能。(上面提到的那些前端框架)。 5.

    2.6K21

    为什么要放弃 JSP ?

    包括你的js,css,图片,各种第三方的库,对吧? 好,下面在浏览器中输入你的网站域名:www.xxx.com,之后发生了什么?...前端工程师做好html后,需要由Java工程师来将html修改成jsp页面,出错率较高(因为页面中经常会出现大量的js代码),修改问题时需要双方协同开发,效率低下。 3....JSP 内有较多标签和表达式,前端工程师在修改页面时会捉襟见肘,遇到很多痛点。 7. 如果JSP中的内容很多,页面响应会很慢,因为是同步加载。...发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。 页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责。...加重了前端团队的工作量,减轻了后端团队的工作量,提高了性能和可扩展性。 4. 我们需要一些前端的框架来解决类似于页面嵌套,分页,页面跳转控制等功能。(上面提到的那些前端框架)。 5.

    93060

    【技术创作101训练营】innerHTML插入运行js字符串问题探究

    最近改了一个老项目, 里面的页面请求大部分是通过ajax请求后来渲染的jsp页面, 然后再用innerHTML插入到当前页....但是这就遇到了一个问题, jsp里引入的js库以及一些js代码就无法运行了, 所以就探索了一下innerHTML以及解析js的一些方法 1. innerHTML介绍 有两个功能, 一个是可以获取指定DOM...的HTML元素, 另一个就是替换指定DOM的HTML元素 2. innerHTML插入js会发生什么 什么也不会发生, 因为用 innerHTML 插入文本到网页中有可能成为网站攻击的媒介,从而产生潜在的安全风险问题...firefox 先将被插入 HTML 代码的元素从其父元素中移除,然后使用innerHTML插入包含SCRIPT元素的代码,最后将这个元素恢复至原父元素中,则经过此操作后SCRIPT中的脚本可以被执行。...3.2 eval 可以用ajax获取外部js脚本, 然后通过eval去加载外部的js脚本和内联js脚本.

    1.2K00

    为什么要放弃 JSP ?

    前端工程师做好 html 后,需要由 Java 工程师来将 html 修改成 jsp 页面,出错率较高(因为页面中经常会出现大量的 js 代码),修改问题时需要双方协同开发,效率低下。...每次请求 JSP 都是访问 Servlet 再用输出流输出的 html 页面,效率没有直接使用 html 高。 JSP 内有较多标签和表达式,前端工程师在修改页面时会捉襟见肘,遇到很多痛点。...如果 JSP 中的内容很多,页面响应会很慢,因为是同步加载。 基于上述的一些痛点,我们应该把整个项目的开发权重往前移,实现前后端真正的解耦!...发现 bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。 页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责。...加重了前端团队的工作量,减轻了后端团队的工作量,提高了性能和可扩展性。 我们需要一些前端的框架来解决类似于页面嵌套,分页,页面跳转控制等功能。(上面提到的那些前端框架)。

    96910

    浏览器已原生支持 ES 模块,这对前端开发来说意味着什么?

    这意味着我们的前端开发工作流从“石器时代”跨越到了“工业时代”,但是对浏览器来说并没有质的改变,它所加载的代码依然一个 bundle.js ,与我们在 Hello World 时加载脚本的方式没什么两样...如果我们的脚本的执行需要操作前面的 DOM 元素,并且后面的 DOM 元素的加载和渲染依赖该脚本的执行结果,这样的阻塞是有意义的。但如果情况相反,那么脚本的执行只会拖慢页面的渲染。...但当有多个 script 标签时,二者表现不同: async 脚本每个都会在下载完成后立即执行,无关 script 标签出现的顺序 defer 脚本会根据 script 标签顺序先后执行 所以以上问题中...上文只分析了包含 src 属性的 script 标签,也就是需要发起网络请求从外部加载脚本的情况,那么当内联 标签遇到 async 和 defer 属性时又如何呢?...#3 必须保持向后兼容 在上文我们已经提到这点,在实践中我们务必要记得在部署到生产环境时,依然要打包一份旧版浏览器可用的 bundle.js 文件,这一步是已有工作流,只需要给 script 标签加一个

    2.9K80
    领券