Spring+Spring mvc+Mybatis+Adminlte(bootstrap)打造高大尚的项目框架

前言： SSM是现在热门的一个开发框架，相比SSH来说，SSM更容易上手。今天我们来整合这3个框架，搭建一个后台开发框架。MVC框架有了，我在考虑，前端UI要用啥呢？相对于老油条easyUI来说，确实是非常容易上手、简易，有着丰富的组件，但个人觉得实在接受不了那经典的UI风格，考虑了一下layui（国内）和bootstrap（国外），看着ui风格特别舒服，layui相对来说没有bootstrap稳定，果断使用了bootstrap，Adminlte是一个国外的开发模板，风格很不错。但AdminLte使用的是全局刷新，后面我们将使用iframe进行改造。 

我们先来看看完成的效果图：

 子页面没写，所以404。。。.嘻嘻

 

 

• SSM整合：Spring+MyBatis

    Spring 是一个轻量级的控制反转（ IoC ）和面向切面（ AOP ）的容器框架,主要负责各个模块（service,dao,controller）的注入，减少硬编码，解耦分离。

     MyBatis是一个的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 POJOs(Plain Old Java Objects,普通的 Java对象)映射成数据库中的记录

1. 创建applicationContext.xml配置文件

    

2. 创建mybatis_sql.xml配置文件(已在applicationContext.xml加载注入)

    

    

    

 

• SSM整合：SpringMvc

Spring MVC一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架  。    

主要由前端控制器 DispatcherServlet、处理器映射器 HandlerMapping、处理器适配器 HandlerAdapter、处理器 Handler、视图解析器 ViewResolver 以及 视图 View 组成

创建spring_mvc.xml配置文件

 

•  SSM整合：web.xml中配置启动加载applicationContext.xml,spring_mvc配置文件
   

  
  
  
  
  	
  	
  		characterEncoding
  		org.springframework.web.filter.CharacterEncodingFilter
  		
  			encoding
  			UTF-8
  		
  	
  
  	
  		characterEncoding
  		/*
  	
  
  	
  	
  		org.springframework.web.context.ContextLoaderListener
  	
  	
  		contextConfigLocation
  		classpath:applicationContext.xml
  	
  
  
  	
  	
  		springmvc
  		org.springframework.web.servlet.DispatcherServlet
  		
  		
  			contextConfigLocation
  			classpath:spring_mvc.xml
  		
  	
  
  
  	
  		springmvc
  		*.do
  	
  

    

 

• 整合AdminLte(bootstrap)

1. 下载Adminlte框架,拷贝bower_components ，dist ，plugins ，pages到项目中
   
   
2. 实现tabiframe.js对左侧列表进行封装，子页面只需要在home.js中配置即可 (稍后上传到GitHub中)
   home.jsp代码块

   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
   <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
   <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
   <%
   String path = request.getContextPath();
   %>                                                                    
   
   
   
       
       
       
       
       
     
     
     
     
     
     
     
     
     
     
     
     
   
   
   
       
       
   
           
           
   
               
               
   
                   
   
                       
                       
                   
                     
                   
                 
                   
               
               
               
               
   
               
           
           
       
   
   
       
       
   
           
   
               
   
                   
   
                   
               
           
           
   
               
   
               
           
       
       
   
   
   
   
   
   
   
   
   
   
   
   
   
   

3. home.js是配置左侧menu的核心模块，在添加子页面时，只需要在此配置即可

   
   $(function () {
       //设置根路径
       App.setbasePath("../");
       //动态添加tab
       addTabs({
           id: '10008',
           title: '欢迎页',
           close: true,
           url: 'welcome',
           urlType: "relative"
       });
   
       App.fixIframeCotent();
       //菜单menu
       var menus = [
           {
               id: "9001",
               text: "UI Elements",
               icon: "fa fa-laptop",
               children: [
                   {
                       id: "90011",
                       text: "线上订单管理",
                       icon: "fa fa-circle-o",
                       url: "../admin/f",
                       targetType: "iframe-tab"
                   },
                   {
                       id: "90012",
                       text: "线下订单管理",
                       url: "../admin/f",
                       targetType: "iframe-tab",
                       icon: "fa fa-circle-o"
                   },
                   {
                       id: "90013",
                       text: "退货订单管理",
                       url: "../admin/f",
                       targetType: "iframe-tab",
                       icon: "fa fa-circle-o"
                   }
               ]
           },
           {
               id: "9002",
               text: "Forms",
               icon: "fa fa-edit",
               children: [
                   {
                       id: "90021",
                       text: "test4",
                       url: "test4",
                       targetType: "iframe-tab",
                       icon: "fa fa-circle-o"
                   }
               ]
           },
           {
               id: "9003",
               text: "Forms",
               icon: "fa fa-edit",
               url: "test4",
               targetType: "iframe-tab"
               
           }
       ];
       $('.sidebar-menu').sidebarMenu({data: menus});
   });

   
   接下来正式开撸你的后台管理系统。。。