首页 > 编程语言 > 详细

关于thymeleaf+layout布局的使用方式,spring boot 访问页面(静态页面及jsp页面)

时间:2018-11-21 19:16:55      阅读:496      评论:0      收藏:0      [点我收藏+]
  1. 首先建立相同部分的html,这里我命名为layout.html,放在了`templates/layout‘文件夹下,这个路径以后是会用到的,以下是我的layout的代码,比较粗糙.
    但是应该会更好的帮助理解.
    要提到几个重要的部分
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
    * {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;}
    .header {background-color: #f5f5f5;padding: 20px;}
    .header a {padding: 0 20px;}
    .container {padding: 20px;margin:20px auto;}
    .footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}
    </style>
</head>
<body>
    <header class="header">
        <div>
            测试接口Demo
        </div>
    </header>
    <div class="container" layout:fragment="content"></div>
    <footer class="footer">
        <div>
            <p style="float: left">&copy;Exfresh WMS</p>
        </div>
    </footer>

</body>
</html>
  1. 然后建立新的html,这里我建立的是一个简单的添加用户的界面add.html,代码如下
    要提到的几个重要的部分
  • <html lang="zh-CN"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorator="demolayout/layout1">
    前边我们提到的路径,这个就是你layout.html文件的位置.
  • <div layout:fragment="content" > 设置div content 然后就可以将你需要更改的内容写在这个位置
    1. 之前在写到这的时候就直接跑程序了 ,发现不好用,但是感觉写的没有问题 ,最后找到了问题所在,在meaven中没有配置thmeleaf,
      所以在meaven中添加如下代码
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
        </dependency>

 



 

技术分享图片

 

技术分享图片

 参考:https://www.jianshu.com/p/3b5ebc545a99

关于thymeleaf+layout布局的使用方式,spring boot 访问页面(静态页面及jsp页面)

原文:https://www.cnblogs.com/shy1766IT/p/9996765.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!