当前位置: 首页 > 编程笔记 >

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

孟翰海
2023-03-14
本文向大家介绍spring boot+thymeleaf+bootstrap实现后台管理系统界面,包括了spring boot+thymeleaf+bootstrap实现后台管理系统界面的使用技巧和注意事项,需要的朋友参考一下

最近在学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://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中放的是页面

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍10k+点赞的 SpringBoot 后台管理系统教程详解,包括了10k+点赞的 SpringBoot 后台管理系统教程详解的使用技巧和注意事项,需要的朋友参考一下 其实项目网上有很多了,但是教程比较详细的没多少,今天分享的项目从安装部署到代码具体功能都有很详细都说明 eladmin 是一款基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、red

  • 本文向大家介绍对 bootstrap 的掌握?为什么用 angular+bootstrap 搭建后台管理系统相关面试题,主要包含被问及对 bootstrap 的掌握?为什么用 angular+bootstrap 搭建后台管理系统时的应答技巧和注意事项,需要的朋友参考一下 bootstrap是一个快速开发的响应式框架,主要是为了快速搭建ui界面,bootstrap 的web组件和js插件对pc端开发

  • RBAC - YII2权限管理 开源协议 GPL 注意事项 严禁使用本软件从事任何非法活动 安装步骤 复制install目录下的dev文件至config目录下 修改dev目录下的db.php中的数据库配置 数据库导入SQL脚本,对应的脚本install目录下 默认密码:ranko/admin 后台地址:index.php?r=site/login 使用事项 starter/filter/Backe

  • 本文向大家介绍python实现停车管理系统,包括了python实现停车管理系统的使用技巧和注意事项,需要的朋友参考一下 Python停车管理系统可实现车辆入库,按车牌号或者车型查询车辆,修改车辆信息,车辆出库时实现计费,按车型统计车辆数和显示全部车辆信息的功能 (1)定义车辆类,属性有车牌号、颜色、车型(小汽车、小卡、中卡和大卡)、到达的时间和离开的时间等信息和相关的对属性做操作的行为。 (2)定

  • 本文向大家介绍java实现学籍管理系统,包括了java实现学籍管理系统的使用技巧和注意事项,需要的朋友参考一下 本教程为大家分享了学籍管理系统的具体java代码,供大家参考,具体内容如下 1.需求分析 1.1系统功能设计 (1)能够查询学生的基本信息,如:学号,姓名年龄,班级和性别 (2)能对表格中的学生信息实现增加,删除,查找,修改等功能 (3)能将数据保存到MySQL数据库中,记录下来 (4)

  • 本文向大家介绍mybatis实现图书管理系统,包括了mybatis实现图书管理系统的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了mybatis实现图书管理系统的具体代码,供大家参考,具体内容如下 在项目开始前先将数据库中的关系表建立,先分析需要几个模块表,用户,图书,类别,租借,购买,简单的分成这五个。 用户表 图书表 类别 租借 购买 在表中简单插入数据 建立工程 1、配置环境导