spring boot|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，没有数据库方面的依赖，所需依赖很少

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"> 
 4.0.0 
 Springboot_bootstrap 
 Springboot_bootstrap 
 0.0.1-SNAPSHOT 
  
 org.springframework.boot 
 spring-boot-starter-parent 
 1.4.7.RELEASE 
   
  
 
  
 UTF-8 
 UTF-8 
 1.8 
  
 
  
  
  org.springframework.boot 
  spring-boot-starter 
  
 
   
  org.springframework.boot 
  spring-boot-starter-web 
  
 
  
  
  
  org.springframework.boot 
  spring-boot-starter-thymeleaf 
  
  
  
 
  
  
   
  org.springframework.boot 
  spring-boot-maven-plugin 
   
  
  
 

在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 的前缀和后缀都可以改变的

 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 <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> 
  
  
 
 
  
  
  
 
   
    
   flex;"> 
    
   
   
    
    
   Primaopto 
    
   
   
  
  
 
  
  
 
   
    
    
    
    欢迎光临, 
    1310177 
    
 
    
    
   
 
    
     
     
    设置 
     
    
    
     
     
    个人资料 
     
    
   
 
    
     
     
    退出 
     
    
    
   
   
  
  
 
  
  
  
   
    
    
   
  
 
  
   
   
   
    
    
    
 
    
系统首页 
     
     
     
   
欢迎进入后台管理系统
 
     
     
    
    
   
   
  
  
 
  
 <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> 
 
 

搞定，运行application 输入localhost:8080

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

http://m.bbyears.com/wangyezhizuo/142907.html

推荐访问:spring源码深度解析 springer spring框架