扩展：Springboot+Thymeleaf+layui框架的配置与使用

最新推荐文章于 2023-12-08 16:11:48 发布

baochanghong

最新推荐文章于 2023-12-08 16:11:48 发布

阅读量2.3w

点赞数 7

分类专栏：【14】、spring boot

【14】、spring boot 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

整体框架

效果图

前言

Springboot默认是不支持JSP的，默认使用thymeleaf模板引擎。所以这里介绍一下springboot使用Thymeleaf的实例以及遇到的问题。

配置与使用

1.在application.properties文件中增加Thymeleaf模板的配置。

#thymelea模板配置
spring.thymeleaf.prefix=classpath:/web/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

说明一下，这些配置不是必须的，如果配置了会覆盖默认的。

在开发时建议将spring.thymeleaf.cache设置为false，否则会有缓存，导致页面没法及时看到更新后的效果。

比如你修改了一个文件，已经update到tomcat，但刷新页面还是之前的页面，就是因为缓存引起的。

2.在pom.xml中添加thymeleaf的依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3.编写一个测试的Controller

@Controller
public class UserController {

@RequestMapping("/")
public String index(){
return "index";
}
}

可以看到，Controller与普通的SpringMVC的Controller无异。

4.编写index.html

默认情况下：

spring-boot项目静态文件目录：/src/java/resources/static （比如：js、css、img等静态资源）

spring-boot项目模板文件目录：/src/java/resources/templates （所有的页面文件，这个地方我已经通过 application.properties 将 templates 改为了web ）

所以index.html文件在/src/java/resources/web下。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"; xmlns:th="http://www.thymeleaf.org"; >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>layout 后台大布局 - Layui</title>
    <link th:href="@{/js/layui-v2.2.5/layui/css/layui.css}" rel="stylesheet"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq";; class="layui-nav-img"/>
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">内容主体区域</div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script th:src="@{/js/layui-v2.2.5/layui/layui.js}"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;

});
</script>
</body>
</html>

index.html中的内容全部为layui官网上的布局内容（复制过来的），只是改了几个地方，我已经高亮标出：

说白了，就是对 Thymeleaf标签的引用以及对css和js的引用方式不同而已。

5.以下为访问地址：

http://127.0.0.1:8010/

这里这是一个基本的使用示例，更多Thymeleaf的用法请自行搜索。

baochanghong

关注

7
点赞
踩
29

收藏

觉得还不错? 一键收藏
4
评论
扩展：Springboot+Thymeleaf+layui框架的配置与使用

整体框架效果图前言Springboot默认是不支持JSP的，默认使用thymeleaf模板引擎。所以这里介绍一下springboot使用Thymeleaf的实例以及遇到的问题。配置与使用1.在application.properties文件中增加Thymeleaf模板的配置。#thymelea模板配置spring.thymeleaf.prefix=classpath:/web/spring.t...
复制链接

扫一扫