(3)springboot开发教程-thymeleaf集成adminlte
发布时间： 2024-06-06，浏览量：611
springboot开发教程-thymeleaf集成adminlte
到adminlte官网https://adminlte.io/下载相应的模版文件
项目中先引入thymeleaf 模板引擎
<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>
<version>2.2.2</version>
</dependency>配置文件中加入相关的模版配置
spring:
profiles:
#当前运行模式 dev开发 pro生成 test测试
active: dev
mvc:
static-path-pattern: /static/**
thymeleaf:
prefix: classpath:/templates/
suffix: .html
cache: false这里改用了yml配置。
thymeleaf教程可查看
https://fanlychie.github.io/post/thymeleaf.html
resources中创建文件目录如下：
layout为模版文件，内容如下
<!doctype html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head >
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link rel="stylesheet" href="/static/css/adminlte.min.css">
<link rel="stylesheet" href="/static/css/all.min.css">
<link rel="stylesheet" href="/static/css/highlighter.css">
<link rel="stylesheet" href="/static/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/static/css/toastr.min.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.overlayScrollbars.min.js"></script>
</head>
<!--占位css-->
<div layout:fragment="css" ></div>
<body class="sidebar-mini layout-fixed" style="height: auto;">
<div class="wrapper">
<div th:replace="common/top :: top"></div>
<div th:replace="common/left :: left"></div>
<div layout:fragment="content" id="content" ></div>
<footer class="main-footer">
<strong>Copyright © 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.2.0
</div>
</footer>
</div>
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/adminlte.min.js"></script>
<script src="/static/js/sweetalert2.min.js"></script>
<script src="/static/js/toastr.min.js"></script>
<!--占位js-->
<div layout:fragment="js" ></div>
</body>
<style>
</style>
</html>
top.html
<div style="width: 100%;
" th:fragment="top">
<!-- <div class="preloader flex-column justify-content-center align-items-center" style="height: 0px;">-->
<!--<!– <img class="animation__shake" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60" style="display: none;">–>-->
<!-- </div>-->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-controlsidebar-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
</div>left.html
<div class="" style="width: 100%;" th:fragment="left">
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="/" class="brand-link">
<img src="https://picc.51pcode.com/image/blog/02b4530c3f9146a6bf4bcd7685eed650.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<div class="sidebar os-host os-theme-light os-host-overflow os-host-overflow-y os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-transition">
<div class="os-resize-observer-host observed"><div class="os-resize-observer" style="left: 0px; right: auto;"></div>
</div>
<div class="os-size-auto-observer observed" style="height: calc(100% + 1px); float: left;">
<div class="os-resize-observer"></div>
</div>
<div class="os-content-glue" style="margin: 0px -8px; width: 249px; height: 884px;"></div>
<div class="os-padding">
<div class="os-viewport os-viewport-native-scrollbars-invisible" style="overflow-y: scroll;">
<div class="os-content" style="padding: 0px 8px; height: 100%; width: 100%;">
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="/static/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">张三 </a>
</div>
</div>
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="/" class="nav-link">
<i class="nav-icon fas fa-home"></i>
<p>
主页
<!-- <span class="right badge badge-danger"></span>-->
</p>
</a>
</li>
<li class="nav-item ">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Widgets
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable os-scrollbar-auto-hidden">
<div class="os-scrollbar-track">
<div class="os-scrollbar-handle" style="width: 100%; transform: translate(0px, 0px);"></div>
</div>
</div>
<div class="os-scrollbar os-scrollbar-vertical os-scrollbar-auto-hidden">
<div class="os-scrollbar-track">
<div class="os-scrollbar-handle" style="height: 65.1214%; transform: translate(0px, 0px);"></div>
</div>
</div>
<div class="os-scrollbar-corner"></div>
</div>
</aside>
</div>
home.Controller下创建两个方法
@Controller
public class HomeController {
@GetMapping("/")
public String home(Model model) {
model.addAttribute("name", "World");
return "home/main";
}
@GetMapping("/login")
public String login(Model model) {
model.addAttribute("name", "World");
return "login/login";
}
}新建main页面
内容如下
<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
layout:decorate="~{layout}">
<body>
<div class="content-wrapper" style="min-height: 828px;" layout:fragment="content">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h5 class="m-0">欢迎您！登录</h5>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">主页</a></li>
<li class="breadcrumb-item active">面板</li>
</ol>
</div>
</div>
</div>
</div>
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box">
<span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>
<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
<span class="info-box-number">
10
<small>%</small>
</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
</div>
</div>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>
<div class="info-box-content">
<span class="info-box-text">Sales</span>
<span class="info-box-number">760</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>
<div class="info-box-content">
<span class="info-box-text">New Members</span>
<span class="info-box-number">2,000</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header border-transparent">
<h3 class="card-title">Latest Orders</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table m-0">
<thead>
<tr>
<th>Order ID</th>
<th>Item</th>
<th>Status</th>
<th>Popularity</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="pages/examples/invoice.html">OR9842</a></td>
<td>Call of Duty IV</td>
<td><span class="badge badge-success">Shipped</span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
</td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR1848</a></td>
<td>Samsung Smart TV</td>
<td><span class="badge badge-warning">Pending</span></td>
<td>
<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
</td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR7429</a></td>
<td>iPhone 6 Plus</td>
<td><span class="badge badge-danger">Delivered</span></td>
<td>
<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
</td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR7429</a></td>
<td>Samsung Smart TV</td>
<td><span class="badge badge-info">Processing</span></td>
<td>
<div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
</td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR1848</a></td>
<td>Samsung Smart TV</td>
<td><span class="badge badge-warning">Pending</span></td>
<td>
<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
</td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR7429</a></td>
<td>iPhone 6 Plus</td>
<td><span class="badge badge-danger">Delivered</span></td>
<td>
<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
</td>
</tr>
<tr>
<td><a href="pages/examples/invoice.html">OR9842</a></td>
<td>Call of Duty IV</td>
<td><span class="badge badge-success">Shipped</span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer clearfix">
<a href="javascript:void(0)" class="btn btn-sm btn-info float-left">Place New Order</a>
<a href="javascript:void(0)" class="btn btn-sm btn-secondary float-right">View All Orders</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Recently Added Products</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body p-0">
<ul class="products-list product-list-in-card pl-2 pr-2">
<li class="item">
<div class="product-img">
<img src="#" alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">Samsung TV
<span class="badge badge-warning float-right">$1800</span></a>
<span class="product-description">
Samsung 32" 1080p 60Hz LED Smart HDTV.
</span>
</div>
</li>
<li class="item">
<div class="product-img">
<img src="#" alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">Bicycle
<span class="badge badge-info float-right">$700</span></a>
<span class="product-description">
26" Mongoose Dolomite Men's 7-speed, Navy Blue.
</span>
</div>
</li>
<li class="item">
<div class="product-img">
<img src="#" alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">
Xbox One <span class="badge badge-danger float-right">
$350
</span>
</a>
<span class="product-description">
Xbox One Console Bundle with Halo Master Chief Collection.
</span>
</div>
</li>
<li class="item">
<div class="product-img">
<img src="#" alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">PlayStation 4
<span class="badge badge-success float-right">$399</span></a>
<span class="product-description">
PlayStation 4 500GB Console (PS4)
</span>
</div>
</li>
</ul>
</div>
<div class="card-footer text-center">
<a href="javascript:void(0)" class="uppercase">View All Products</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>运行后界面打开 http://127.0.0.1:8080/
经典语录
热门文章
查看更多
-
2023-06-10 浏览量：1498
-
2023-01-06 浏览量：1416
-
2023-03-18 浏览量：1324
-
2022-12-21 浏览量：1315
-
2023-01-06 浏览量：1209
-
2022-12-30 浏览量：1158
-
2021-12-30 浏览量：1145
-
2023-12-20 浏览量：1125
-
2022-12-30 浏览量：1119
-
2024-06-24 浏览量：991