spring boot+thymeleaf+bootstrap实现后台管理系统界面

时间：2021-05-19

最近在学spring boot ，学习一个框架无非也就是使用它来做以前做的事情，两者比较才有不同，说一下自己使用的体会。
先来说下spring boot ，微框架。快速开发，相当于零配置，从一个大神那看来的说：spring boot 相当于框架的框架，就是集成了很多，用哪个添加哪个的依赖就行，这样的话自己看不到配置，对于习惯了使用配置刚使用spring boot的开发者来说可能还有点不习惯，什么都不用配，看不到配置感觉对项目整体架构有点陌生，再说在spring boot 中使用 thymeleaf 。就拿个最简单的例子来说明 jsp显示helloworld , thymeleaf显示helloworld，两者也就pom文件引入依赖和属性文件配置不同，在你使用jsp的时候不要引入thymeleaf的依赖，当然在使用thymeleaf的时候也不要引入jsp的依赖有可能会产生冲突，spring boot 官方是推荐使用thymeleaf 我个人感觉也不错，开始项目吧！

1 、首先建一个meaven项目看一下建好的项目整体结构

建好项目结构弄pom.xml ,这个demo只用到thymeleaf，没有数据库方面的依赖，所需依赖很少

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://patible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>MES平台</title>  <link th:href="@{Bootstrap/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />  <link th:href="@{Bootstrap/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />  <link th:href="@{Bootstrap/sidebar-menu/sidebar-menu.css}" rel="stylesheet" /> <link th:href="@{Bootstrap/ace/css/ace-rtl.min.css}" rel="stylesheet" /> <link th:href="@{Bootstrap/ace/css/ace-skins.min.css}" rel="stylesheet" /> <link th:href="@{Bootstrap/toastr/toastr.min.css}" rel="stylesheet" /> <script th:src="@{Bootstrap/jquery-1.9.1.min.js}"></script> <script th:src="@{Bootstrap/bootstrap/js/bootstrap.min.js}"></script> <script th:src="@{Bootstrap/sidebar-menu/sidebar-menu.js}"></script> <script th:src="@{Bootstrap/bootstrap/js/bootstrap-tab.js}"></script>  <style type="text/css"> body { font-size: 12px; } .nav > li > a { padding: 5px 10px; } .tab-content { padding-top: 3px; } </style> </head> <body> <div class="navbar navbar-default" id="navbar"> <ul class="navbar-header pull-left"> <a class="fa fa-list-ul menu-toggler" id="menu-toggler" href="#"> <i class="icon-reorder" style="font-size:20px;margin-left:-18px;margin-top:8px;display:flex;"></i> </a> <a href="#" class="navbar-brand"> <small> Primaopto </small> </a> </ul> <div class="navbar-header pull-right" role="navigation"> <ul class="nav ace-nav"> <li class="light-blue" style="height:50px;"> <a data-toggle="dropdown" href="#" class="dropdown-toggle"> <img class="nav-user-photo" src="Content/ace/avatars/avatar2.png" alt="Admin's Photo" /> <span class="user-info"> <small>欢迎光临,</small> 1310177 </span> <i class="icon-caret-down"></i> </a> <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"> <li> <a href="#"> <i class="icon-cog"></i> 设置 </a> </li> <li> <a href="#"> <i class="icon-user"></i> 个人资料 </a> </li> <li class="divider"></li> <li> <a href="/Home/Logout"> <i class="icon-off"></i> 退出 </a> </li> </ul> </li> </ul> </div> </div> <div class="main-container" id="main-container"> <div class="main-container-inner"> <div class="sidebar" id="sidebar"> <div class="sidebar-collapse" id="sidebar-collapse" style="display:none;"> <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i> </div> <ul class="nav nav-list" id="menu"></ul> </div> <div class="main-content"> <div class="page-content"> <div class="row"> <div class="col-xs-12" style="padding-left:5px;"> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#Index" role="tab" data-toggle="tab">系统首页</a></li> </ul> <div class="tab-content" style="height:1000px"> <div role="tabpanel" class="tab-pane active" id="Index" style="height:100%"> <h2>欢迎进入后台管理系统</h2> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> //toastr.options.positionClass = 'toast-bottom-right'; $(function () { $('#menu').sidebarMenu({ data: [{ id: '1', text: '系统设置', icon: 'icon-cog', url: '', menus: [{ id: '2', text: '编码管理1', icon: 'icon-glass', url: '', menus: [{ id: '3', text: '编码管理2', icon: 'icon-glass', url: '', menus: [{ id: '2', text: '编码管理1', icon: 'icon-glass', url: '', }, { id: '3', text: '编码管理2', icon: 'icon-glass', url: '', },{ id: '4', text: '编码管理3', icon: 'icon-glass', url: '', }] }] }] }] }); $("#menu-toggler").click(function () { var children = $("#sidebar-collapse").children("i"); if ($(children).hasClass("icon-double-angle-left")) { $(children).removeClass("icon-double-angle-left").addClass("icon-double-angle-right"); $("#sidebar").attr("class", "sidebar menu-min display"); } else { $(children).removeClass("icon-double-angle-right").addClass("icon-double-angle-left"); $("#sidebar").attr("class", "sidebar display"); } }); }); </script> <script th:src="@{Bootstrap/ace/js/ace-extra.min.js}"></script> <script th:src="@{Bootstrap/ace/js/ace.min.js}"></script> </body> </html>

搞定，运行application 输入localhost:8080

更多学习资料请关注专题《管理系统开发》。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

spring boot+thymeleaf+bootstrap实现后台管理系统界面

相关文章

SpringBoot thymeleaf的使用方法解析

Springboot获取前端反馈信息并存入数据库的实现代码

SpringBoot2.1.x,创建自己的spring-boot-starter自动配置模块操作

spring-boot中使用spring-boot-devtools的实现代码

springboot实现热部署操作方法