springboot 项目直接使用 jquery，不使用 thymeleaf 模板的方法

最新推荐文章于 2023-08-03 14:36:52 发布
最新推荐文章于 2023-08-03 14:36:52 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： java js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beguile/article/details/105593105
版权
java 同时被 2 个专栏收录
245 篇文章 7 订阅
订阅专栏
js
95 篇文章 0 订阅
订阅专栏

把 html 类型的页面放在 static 目录下就可以，

在页面里引入 <script type="text/javascript" src="../../js/jquery.min.js"></script> 

和 <link rel="stylesheet" href = "../../css/bootstrap.css"> 就可以直接使用 jquery。

 

 

热带鱼2020
关注
专栏目录
SpringBoot+Thymeleaf+Jquery实现模态框的显示与数据填充
BADAO_LIUMANG_QIZHI的博客
05-14 7295
场景 实现 Html代码 <div th:fragment="content"> <div class="ibox float-e-margins"> <div class="ibox-content"> <div class="table-responsive"> ...
光知道SpringBoot，不用thymeleaf就太不对了
Java架构师联盟
12-19 679
之前的时候，我为了演示Linux配置提交项目执行环境，简单的整理了一下springboot得相关内容，但是在实际的开发过程中，SpringBoot得使用可不仅仅就是这一点点遍历而已，在SpringBoot中推荐使用thymeleaf模板引擎，简单点评价这个模板就是语法简单，功能更强大 所以今天我们来看一下这个强大得模板引擎到底有多强大 文章首发公众号：Java架构师联盟，每日更新技术好文，源码已经上传git，大家可以自行下载 添加thymeleaf模板 这里有两种创建方式 1.新建springBoot项目
SpringBoot不使用Thymeleaf的ajax成功后html跳转
FromNowOnUntilTheEnd
03-06 9415
一、SpringBoot不使用Thymeleaf的ajax成功后html跳转如图所示，ajax请求成功之后，这样子跳转页面是失败的二、解决办法     在该目录下新建static文件夹，把html放在这里...
如何去掉Spring Boot 的thymeleaf模版引擎强制校验
zjh_746140129的博客
08-08 2941
笔者在使用Spring Boot 的thymeleaf模版引擎做html页面时。遇到一个很头疼的问题，那就是thymeleaf模版引擎强制校验，由于是网上找的bootstrap模版，用的h5，页面很多标签都没有闭合标签/，就会报错跳转到错误页面。 html页面如下： 解决方案： 1、在配置文件新添加如下配置 spring.thymeleaf.content-type=text/htm...
SpringBoot学习------SpringBoot使用Thymeleaf模块访问不了静态页面
weixin_30487317的博客
08-18 570
SpringBoot使用Thymeleaf模块访问不了静态页面 最近学习SpringBoot的过程中使用了Thymeleaf模块引擎，页面发送请求后老是无法显示静态页面，所有的步骤都是参考资料来执行，自我检查好久都没有找到问题的答案，哎呦，我这暴脾气就上来了，一个小页面就想难倒我？那我还怎么找到ONE PIECE？ 下面就给大家分享一下我悲惨的心路历...
SpringBoot开发问题-没有thymeleaf导入页面是无法找到的
gangsijay888的博客
08-13 1365
1、SpringBoot开发问题-没有thymeleaf导入页面是无法找到的
springboot与thymeleaf结合的实战、实例项目
04-15
在"spring-boot-thymeleaf"这个实战项目中，你可能会学习到如何创建SpringBoot工程，添加Thymeleaf依赖，配置Thymeleaf模板路径，编写Controller，设计HTML模板，以及如何处理用户输入和响应。通过实际操作，你可以...
SpringBoot--使用Thymeleaf模板开发web项目
LG_49的博客
10-23 6548
1.什么是thymeleaf？ 是一个用于web开发的模板引擎（使用户界面与业务数据(内容)分离而产生的，不属于特定技术领域，是跨领域跨平台的概念），可以完全的替代JSP。 是一个java库.是一个XML/XHTML/HTML4模板引擎,能够在模板文件上应用一组转换,将程序产生的数据或文本显示到模板文件上.
springboot+mybatis+thymeleaf+ajax+JQuery 技术整合搭建项目开发环境__02_技术落地（技术选型）
Coder_Boy_的博客
04-26 1746
目前各类公司开始采用前后端分离模式开发 这种开发模式的好处：分工明确，职责分明，可以提供更好的系统使用体验。 后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。 前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。 通过将整个开发团队分成前后端，让两边的工程师更加专注各自的领域，独立治理，然后构建出一个全栈式的精益求精的开发队伍 上面的介绍只是说明下本整合框架支...
【Springboot】 thymeleaf模板应用 及 ajax请求问题
doctors-w的博客
12-23 1万+
一：为啥springboot不推荐使用jsp 我的理解是，现在开发的时候都是前后端分离，如果用jsp，前端的同志们看不到运行结果啊，也不知道自己的代码自己敲的对不对，旁边的大佬就是前端的，用的vscode，写的全是html页面，本地启动一个服务，分分钟看到效果，这玩意能带来成就感啊。当然了，最重要的事springboot不推荐用jsp。 二：使用themleaf时的项目结构  static下...
springboot模板引擎thymeleaf对于没有关闭标签的错误解析
wnl_csdn的博客
12-14 1241
在使用springboot结合thymeleaf的时候，我们需要做出以下配置正确解析html： 添加pom.xml的依赖： <dependency> <groupId>net.sourceforge.nekohtml</groupId> <artifactId>nekohtml</artifactId> <ver
SpringBoot使用Thymeleaf填坑
、思考致富的博客
05-06 546
使用了thymeleaf模板的jquery函数要尽量写在section里面，不然可能没有效果： <section> <script> //分页查询 getExamListByPage = function (currentPage) { var pageSize = $("#pageSize").val()...
SpringBoot2.x整合Thymeleaf
river106的博客
02-22 548
一、Thymeleaf简介 Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发，除了thymeleaf之外还有Velocity、FreeMarker等模板引擎，功能类似。Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎；Spring官方支持的服务的渲染模板中，并不包含jsp。而是Thymeleaf和Freemarker等，而Thymeleaf与Sp...
15 springboot项目——thymeleaf语法与关闭模板引擎
最新发布
no996yes885的博客
08-03 540
介绍thymeleaf中"@{}"的使用语法以及关闭模板缓存的方法。
SpringBoot整合Thymeleaf
qq_42582489的博客
06-27 1113
SpringBoot整合Thymeleaf 文章目录SpringBoot整合Thymeleaf前言引入thymeleafthymeleaf的配置第一个thymeleaf页面thymeleaf语法thymeleaf登录页面参考文章 前言 对于动态数据，模板引擎会自动渲染并绑定，呈现动态页面。 Thymeleaf 是用来开发 Web 和独立环境项目的服务器端的 Java 模版引擎，与 SpringMVC 的视图技术，及 SpringBoot 的自动化配置集成非常完美。 与其他的模板引擎，例如 FreeMarke
springboot下jsp的使用情况以及thymeleaf模板技术替代
YuanYuQiuShui的博客
02-15 483
从jsp到thymeleaf模板的替代
07-SpringBoot-Thymeleaf模板引擎
qq_45632660的博客
01-30 215
视图解析：SpringBoot默认不支持 JSP，需要引入第三方模板引擎技术实现页面渲染。 1、视图解析 2、简介 【1】Thymeleaf 是 Web 和独立环境的现代服务器端 Java 模板引擎，能够处理HTML，XML，JavaScript，CSS 甚至纯文本。 【2】Thymeleaf 的主要目标是提供一种优雅和高度可维护的创建模板的方式。为了实现这一点，它建立在自然模板的概念上，将其逻辑注入到模板文件中，不会影响模板被用作设计原型。这改善了设计的沟通，弥补了设计和开发团队之间的差距。 【3】Th
SpringBoot整合模板引擎（Thymeleaf、Freemarker、JSP）
yu的博客
03-22 3146
前后端分离可以说是当今最主流的思想（前端写前端的代码，后端写后端的代码，之间互不影响）。在传统的 Java Web 开发中，通常都是使用 JSP 来进行前台页面的开发。但 JSP 页面是HTML+Java一起写的，显然不符合“前后端分离”的思想。因此在现在的 Java Web 开发中，JSP的使用已经逐渐变小。其中 Thymeleaf 就是其中较为优秀的代替JSP使用的技术之一。Thymeleaf 它是一种模板引擎，用来渲染 XML、XHTML、HTML5、JavaScript、CSS 甚至纯文本。
（项目实战干货）Spring boot 中Thymeleaf 模板 html 标签使用
热门推荐
zhtbs的博客
07-07 2万+
Spring boot 中Thymeleaf 模板 html 标签使用 ​ 在Spring boot 项目开发中，会常常使用到Thymeleaf模板。在对Thymeleaf模板标签的使用技巧，有的人不是很熟悉。这篇文章专门介绍一下模板标签的使用技巧。静态原型中（html页面）Thymeleaf元素与html元素相结合使用的说明与代码例子。文中会提高大量Thymeleaf标签的属性介绍和使用的逻辑示例代码。 1 文字内联标签引入 ​ Thymeleaf模板中的使用文字内联标签，需要在使用的html元素上加上
写一个多人聊天对话框的前端页面,要求使用Springboot+thymeleaf+jquery,不使用WebSocket
05-25
好的，以下是一个简单的多人聊天对话框的前端页面示例，使用Spring Boot作为后端框架，Thymeleaf作为模板引擎，jQuery作为前端框架，不使用WebSocket。 HTML部分： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>多人聊天室</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script th:src="@{/js/chat.js}"></script> <link rel="stylesheet" th:href="@{/css/chat.css}" /> </head> <body> <div class="chat-container"> <div class="chat-header"> <h1>多人聊天室</h1> </div> <div class="chat-body"> <div class="chat-messages"> <ul id="messages"></ul> </div> <div class="chat-input"> <input id="message" type="text" placeholder="输入消息..."> <button id="send-btn">发送</button> </div> </div> </div> </body> </html> ``` CSS部分： ```css .chat-container { display: flex; flex-direction: column; height: 100vh; width: 100vw; } .chat-header { text-align: center; font-size: 24px; padding: 10px; } .chat-body { display: flex; flex-direction: column; flex: 1; overflow-y: scroll; padding: 10px; } .chat-messages { flex: 1; overflow-y: scroll; } .chat-messages li { margin-bottom: 10px; } .chat-input { display: flex; margin-top: 10px; } .chat-input input { flex: 1; margin-right: 10px; } .chat-input button { padding: 5px 10px; border: none; background-color: #007bff; color: #fff; cursor: pointer; } .chat-input button:hover { background-color: #0069d9; } ``` JavaScript部分： ```javascript $(function() { var username = prompt("请输入您的昵称："); var socket = new WebSocket("ws://" + location.host + "/chat"); socket.onopen = function() { socket.send(JSON.stringify({ type: "join", username: username })); }; socket.onmessage = function(event) { var message = JSON.parse(event.data); handleMessage(message); }; $("#send-btn").click(function() { var message = $("#message").val(); if (message.trim() != "") { socket.send(JSON.stringify({ type: "message", username: username, message: message })); $("#message").val(""); } }); function handleMessage(message) { if (message.type == "message") { var msgElement = $("<li>").text(message.username + ": " + message.message); $("#messages").append(msgElement); $(".chat-body").scrollTop($(".chat-body")[0].scrollHeight); } else if (message.type == "join") { var joinElement = $("<li class='join-msg'>").text(message.username + " 加入了聊天室"); $("#messages").append(joinElement); $(".chat-body").scrollTop($(".chat-body")[0].scrollHeight); } else if (message.type == "leave") { var leaveElement = $("<li class='leave-msg'>").text(message.username + " 离开了聊天室"); $("#messages").append(leaveElement); $(".chat-body").scrollTop($(".chat-body")[0].scrollHeight); } } }); ``` 以上代码实现了一个简单的多人聊天室的前端页面，使用Thymeleaf作为模板引擎，jQuery作为前端框架，不使用WebSocket。后端代码需要实现一个WebSocket处理器来处理WebSocket连接和消息的收发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值