欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-12-09 15:17:33
最近在学spring boot ，学习一个框架无非也就是使用它来做以前做的事情，两者比较才有不同，说一下自己使用的体会。 先来说下spring boot ，微框架。快速开...

最近在学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项目 看一下建好的项目整体结构

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

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

<project xmlns="http://maven.apache.org/pom/4.0.0" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://maven.apache.org/pom/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 
 <modelversion>4.0.0</modelversion> 
 <groupid>springboot_bootstrap</groupid> 
 <artifactid>springboot_bootstrap</artifactid> 
 <version>0.0.1-snapshot</version> 
 <parent> 
 <groupid>org.springframework.boot</groupid> 
 <artifactid>spring-boot-starter-parent</artifactid> 
 <version>1.4.7.release</version> 
 <relativepath/> <!-- lookup parent from repository --> 
 </parent> 
 
 <properties> 
 <project.build.sourceencoding>utf-8</project.build.sourceencoding> 
 <project.reporting.outputencoding>utf-8</project.reporting.outputencoding> 
 <java.version>1.8</java.version> 
 </properties> 
 
 <dependencies> 
 <dependency> 
  <groupid>org.springframework.boot</groupid> 
  <artifactid>spring-boot-starter</artifactid> 
 </dependency> 
 
  <dependency> 
  <groupid>org.springframework.boot</groupid> 
  <artifactid>spring-boot-starter-web</artifactid> 
 </dependency> 
 
 <!-- thymeleaf --> 
  
 <dependency> 
  <groupid>org.springframework.boot</groupid> 
  <artifactid>spring-boot-starter-thymeleaf</artifactid> 
 </dependency> 
  
 </dependencies> 
 
 <build> 
 <plugins> 
  <plugin> 
  <groupid>org.springframework.boot</groupid> 
  <artifactid>spring-boot-maven-plugin</artifactid> 
  </plugin> 
 </plugins> 
 </build> 
</project>

在src /main/resource 建立 application.properties文件

server.port=8080 
server.session.timeout=10 
server.tomcat.uri-encoding=utf-8 
 
spring.thymeleaf.prefix=classpath:/views/ 
spring.thymeleaf.suffix=.html 
spring.thymeleaf.mode=html5 
spring.thymeleaf.encoding=utf-8 
spring.thymeleaf.content-type=text/html 
spring.thymeleaf.cache=false

写入口程序

package com.zanghan.youyu; 
 
import org.springframework.boot.springapplication; 
import org.springframework.boot.autoconfigure.springbootapplication; 
 
@springbootapplication 
public class youyuapplication { 
 
 public static void main(string[] args) { 
 springapplication.run(youyuapplication.class, args); 
 } 
}

控制器跳转bootstrap界面

package com.zanghan.youyu.controller; 
 
import org.springframework.stereotype.controller; 
import org.springframework.web.bind.annotation.requestmapping; 
 
@controller 
public class logincontroller { 
 @requestmapping("/") 
 public string index(){ 
 return "/index"; 
 } 
}

引入bootstrap js css 放在哪里？放在static文件夹里，views中放的是页面

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

index.html界面存放在 src/main/resource 下的views 文件夹里，为啥不是tepmlates 因为在属性配置文件中写的是views ，thymeleaf 的前缀和后缀都可以改变的

<!doctype html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" 
 xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> 
<head> 
 <meta charset="utf-8" /> 
 <meta http-equiv="x-ua-compatible" content="ie=edge"/> 
 <meta name="viewport" content="width=device-width, initial-scale=1"/> 
 <title>mes平台</title> 
 <!--bootstrap--> 
 <link th:href="@{bootstrap/bootstrap/css/bootstrap.min.css}" rel="stylesheet" /> 
 <!-- font awesome --> 
 <link th:href="@{bootstrap/font-awesome/css/font-awesome.min.css}" rel="stylesheet" /> 
 <!--[if ie 7]> 
 <link href="/content/font-awesome/css/font-awesome-ie7.min.css" rel="stylesheet" /> 
 <![endif]--> 
 <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> 
 <!--[if lt ie 9]> 
 <script src="/scripts/html5shiv.js"></script> 
 <script src="/scripts/respond.min.js"></script> 
 <![endif]--> 
 <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实现后台管理系统界面

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

上一篇： 索尼PS4/PS Vita游戏机正式入华 PS4售2899元

下一篇：

推荐阅读