SpringBoot+Thymeleaf模板 实现html文件引入

参考

https://www.jianshu.com/p/acee38389266

https://blog.csdn.net/h1021456873/article/details/79085505

SpringBoot中使用Thymeleaf模板,需要在项目的application.properties文件中进行相关配置,如下:

spring.thymeleaf.prefix=classpath:webapp/views/   #配置静态页面所在的位置,这里静态文件的位置为resources/webapp/views/

注意啦,前端使用thymeleaf对应的th标签引用其他页面或模块时,需要结合application.properties中配置的路径来对应上指定的文件路径。

下面是application.properties的配置参考:

 

实际应用中,遇到过这个问题,主要原因有可能是指定文件不存在,或者文件路径配置错误(路径要参考配置的路径进行拼接)

参考:https://www.oschina.net/question/1251858_2235767

TemplateInputException: Error resolving template "xx", template might not exist 
or might not be accessible by any of the configured Template Resolvers (template:"views/index" ...)

下面是相关前端页面的代码:

1. structure.html (公共模块文件,用于定义一些公用模块)

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<!--定义引用模块-->
<div class="layui-header" th:fragment="navBar">
    <!--模块内容-->
</div>

2.index.html (引用定义好的模块Demo,相当于jsp中的include功能)

<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <!-- 引用 webapp/views/templates/structure.html 中的navBar模块 -->
    <!-- replace表示替换当前div,使用include则表示引用 -->
    <div th:replace="templates/structure :: navBar">
</body>
</html>

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现富文本编辑器可以使用一些开源的JavaScript库,比如常用的有: 1. CKEditor:功能强大、可扩展性好、使用方便,支持多种浏览器和平台,但是需要付费使用高级功能。 2. TinyMCE:也是一个功能强大的富文本编辑器,开源免费,支持多种浏览器和平台,易于集成到应用中。 3. Summernote:一个基于Bootstrap的富文本编辑器,开源免费,支持多种浏览器和平台,并且具有一些独特的功能,如代码视图、图片上传等。 4. Froala Editor:一个功能强大、易于使用的富文本编辑器,支持多种浏览器和平台,但是需要付费使用高级功能。 以下是基于SpringBootThymeleaf实现使用CKEditor富文本编辑器的步骤: 1. 引入CKEditor相关的JavaScript和CSS文件,可以从官网下载或者使用CDN方式引入: ```html <!-- 引入CSS --> <link rel="stylesheet" href="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.css"> <!-- 引入JS --> <script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script> ``` 2. 在Thymeleaf模板中使用CKEditor: ```html <!-- 定义富文本编辑器容器 --> <div id="editor"></div> <!-- 初始化CKEditor --> <script> CKEDITOR.replace('editor'); </script> ``` 3. 在后端Controller中获取富文本编辑器中的内容: ```java @PostMapping("/save") public String save(@RequestParam("content") String content) { // 处理富文本编辑器中的内容 return "success"; } ``` 以上就是基于SpringBootThymeleaf实现使用CKEditor富文本编辑器的步骤,其他富文本编辑器的使用方法类似。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值