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

配置与使用
1.在application.properties文件中增加Thymeleaf模板的配置。
#关闭thymeleaf的缓存，不然在开发过程中修改页面不会立刻生效需要重启，生产可配置为true

#关闭thymeleaf的缓存，不然在开发过程中修改页面不会立刻生效需要重启，生产可配置为true

spring.thymeleaf.cache=false

spring.thymeleaf.prefix=classpath:/web/

spring.thymeleaf.suffix=.html

spring.thymeleaf.mode=HTML5

spring.thymeleaf.encoding=UTF-

spring.thymeleaf.content-type=text/html

spring.resources.chain.strategy.content.enabled=true

spring.resources.chain.strategy.content.paths=/**

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

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

<dependency>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

3、编写一个测试的Controller

package com.lynch.web;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

@RequestMapping("/layui")

public class LayuiController {

    @RequestMapping("/index")

    public String demo() {

        return "layui/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/layui下。

<!DOCTYPE html>

<html lang="en" 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="@{/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:;"> aaa 贤心 </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="@{/layui/layui.js}"></script>

    <script>

        //JavaScript代码区域

        layui.use('element', function() {

            var element = layui.element;

        });

    </script>

</body>

</html>

5、引入layui
从https://www.layui.com/下载layui-v2.4.5.zip，解压后把layui-v2.4.5目录下的layui文件夹拷贝到/src/java/resources/static目录下。

6、效果图
项目启动成功，访问http://localhost:8080/layui/index，运行效果如下：

Springboot+Thymeleaf+layui框架的配置与使用的更多相关文章

  1. springboot+Thymeleaf+layui 实现分页

    layui分页插件 引入相关的js和css layui:css <link rel="stylesheet" th:href="@{layui/css/layui. ...

  2. java框架之SpringBoot(5)-SpringMVC的自动配置

    本篇文章内容详细可参考官方文档第 29 节. SpringMVC介绍 SpringBoot 非常适合 Web 应用程序开发.可以使用嵌入式 Tomcat,Jetty,Undertow 或 Netty ...

  3. Springboot+Thymeleaf框架的button错误

    ---恢复内容开始--- 在做公司项目时,遇到了一个Springboot+Thymeleaf框架问题: 使用框架写网站时,没有标明type类型的button默认成了‘submit’类型,每次点击按钮都 ...

  4. springBoot日志框架自动配置与原理

    1.日志框架 小张:开发一个大型系统: ​ 1.System.out.println(""):将关键数据打印在控制台:去掉?写在一个文件? ​ 2.框架来记录系统的一些运行时信息: ...

  5. layui表格数据渲染SpringBoot+Thymeleaf返回的数据时报错（Caused by: org.attoparser.ParseException: Could not parse as expression: ")

    layui table渲染数据时报错(Caused by: org.attoparser.ParseException: Could not parse as expression: ") ...

  6. 权限管理系统之SpringBoot集成LayUI实现后台管理首页

    万事开头难,昨天一直在构思用户权限管理系统怎么实现,实现哪些需求,采用什么技术等,也在网上百度了好多,计划使用SpringBoot + Mybatis + thymeleaf  + LayUI + S ...

  7. springboot深入学习(二)-----profile配置、运行原理、web开发

    一.profile配置 通常企业级应用都会区分开发环境.测试环境以及生产环境等等.spring提供了全局profile配置的方式,使得在不同环境下使用不同的applicaiton.properties ...

  8. 不要再学 JSP 了，学 SpringBoot + Thymeleaf + Vue吧

    老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 读 ...

  9. layUI框架中文件上传前后端交互及遇到的相关问题

    下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...

随机推荐

  1. JAVA初学者的JDB 尝试

    使用JDB调试简单递归程序 跟着娄老师的博客学习, 首先在终端使用Ctrl+Shift+T打开三个标签,方便操作. 使用Vim编辑自己的程序,练习程序如下 1 public class Factori ...

  2. C# NPOI 日期格式

    之前整理的NPOI导入导出Excel 在之前使用过程中没发现问题. 但是后来发现导入的文档如果有日期时间格式,导入时会有混乱 后来找了一下解决方案,最终将其中一段修改即可导入日期(导出未测试) 原因 ...

  3. c++11 线程池学习笔记 (一) 任务队列

    学习内容来自一下地址 http://www.cnblogs.com/qicosmos/p/4772486.html github https://github.com/qicosmos/cosmos ...

  4. 第一次使用zxxbox弹层经历

    一:首先这个插件是基于JQuery的插件,要先导入JQuery,然后再导入这个插件 二:HTML部分 <a href="http://www.jisuapi.com/static/im ...

  5. Python11/26--mysql之视图/触发器/事务/存储过程

    视图: 1.什么是视图 视图就是通过查询得到一张虚拟表,然后保存下来,下次用的时候直接使用即可 2.为什么用视图 如果要频繁使用一张虚拟表,可以不用重复查询 3.如何用视图 select * from ...

  6. Python基础整理

    第一章 Python介绍 1.3 基本类型 操作符 +,-,*,/,%,**(幂),divmod(除法) divmod(10,3)=(3,1) None表示出错 表示假: None,0,0.0,&qu ...

  7. tomcat是否有必要配置环境变量（摘）

    之前发表了一篇关于如何安装和配置Tomcat的文章,而最近在开发项目的时候总是报错.后来被公司的大神问了一句:是谁告诉你Tomcat是需要配置环境变量的? 作为新手的我瞬间整个人都不好了!于是偷偷百度 ...

  8. Codeforces Round #486 (Div. 3) D. Points and Powers of Two

    Codeforces Round #486 (Div. 3) D. Points and Powers of Two 题目连接: http://codeforces.com/group/T0ITBvo ...

  9. centos7图形界面

    安装centOS7服务器版本,系统默认是不会安装GUI的图形界面程序,这个需要手动安装CentOS7 Gnome GUI包. 安装GUI包.开机自动启动图形界面.重启 # yum groupinsta ...

  10. 用scp这个命令来通过ssh传输文件

    小结: 1. upload files 到 ssh 服务器 localhost $ scp localfile root@172.20.34.**:~/remotepath 2. 从 ssh 服务器d ...