前言： SSM是现在热门的一个开发框架，相比SSH来说，SSM更容易上手。今天我们来整合这3个框架，搭建一个后台开发框架。MVC框架有了，我在考虑，前端UI要用啥呢？相对于老油条easyUI来说，确实是非常容易上手、简易，有着丰富的组件，但个人觉得实在接受不了那经典的UI风格，考虑了一下layui（国内）和bootstrap（国外），看着ui风格特别舒服，layui相对来说没有bootstrap稳定，果断使用了bootstrap，Adminlte是一个国外的开发模板，风格很不错。但AdminLte使用的是全局刷新，后面我们将使用iframe进行改造。
我们先来看看完成的效果图：
-
SSM整合：Spring+MyBatis
Spring 是一个轻量级的控制反转（ IoC ）和面向切面（ AOP ）的容器框架,主要负责各个模块（service,dao,controller）的注入，减少硬编码，解耦分离。
MyBatis是一个的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 POJOs(Plain Old Java Objects,普通的 Java对象)映射成数据库中的记录
- 创建applicationContext.xml配置文件
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd" > <!-- 扫描注解service,dao,controller等 --> <context:component-scan base-package="com.jet.project"></context:component-scan> <!-- 步骤一 mybatis 配置数据源 --> <!-- 加载db.properties文件 --> <context:property-placeholder location="classpath:db.properties,classpath:resources.properties"/> <!-- 创建数据源BasicDataSource 也可以使用c3p0的ComboPooledDataSource spring都支持 --> <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"> <property name="driverClassName" value="${db.driver}" /> <property name="url" value="${db.url}" /> <property name="username" value="${db.username}" /> <property name="password" value="${db.password}" /> <property name="maxActive" value="10" /> <property name="maxIdle" value="5" /> </bean> <!-- 步骤二 mybatis 配置sqlsessionFactory --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 指定mybatis的全局配置文件路径 --> <property name="configLocation" value="classpath:mybatis_sql.xml"></property> <!-- 配置数据源 --> <property name="dataSource" ref="dataSource"></property> </bean> <!-- 步骤三 批量配置mapper代理类 配置mapper代理扫描 默认自动从上下文中获取 sqlSessionFactory 配置mybatis接口代理开发 * 接口类名和映射文件必须同名 * 接口类和映射文件必须在同一个目录 下 * 映射文件namespace名字必须是接口的全类路径名 * 接口的方法名必须和映射Statement的ｉｄ一致 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.jet.project.dao"></property> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property> </bean> <!-- 第4步：事务 --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"></property> </bean> <!-- 配置通知 --> <tx:advice id="txAdvice" transaction-manager="transactionManager"> <tx:attributes> <tx:method name="save*" propagation="REQUIRED" /> <tx:method name="update*" propagation="REQUIRED" /> <tx:method name="delete*" propagation="REQUIRED" /> <tx:method name="insert*" propagation="REQUIRED" /> <tx:method name="*" propagation="REQUIRED" /> </tx:attributes> </tx:advice> <!-- 配置拦截service --> <aop:config> <aop:advisor advice-ref="txAdvice" pointcut="execution(* com.jet.project.service.*.*(..))"/> </aop:config> </beans> -
创建mybatis_sql.xml配置文件(已在applicationContext.xml加载注入)
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <!-- 加载顺序3 设置结果类的别名，避免写resultType="cn.mybatis.test.b.OrderInfo"重复又长 --> <typeAliases> <package name="com.jet.project.domain"/> </typeAliases> </configuration>
-
SSM整合：SpringMvc
Spring MVC一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架 。
主要由前端控制器 DispatcherServlet、处理器映射器 HandlerMapping、处理器适配器 HandlerAdapter、处理器 Handler、视图解析器 ViewResolver 以及 视图 View 组成
创建spring_mvc.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.3.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd"
>
<!-- 引入resource -->
<context:property-placeholder
location="classpath:resources.properties" />
<!-- 注解扫描器 -->
<context:component-scan base-package="com.jet.project"></context:component-scan>
<!-- 使用该注解驱动，免去配置映射器和适配器，还有默认json转换器 -->
<mvc:annotation-driven>
</mvc:annotation-driven>
<!-- 国际化资源配置 -->
<bean id="messageSource" class="org.springframework.context.support.ResourceBundleMessageSource">
<!-- 国际化信息所在的文件名 -->
<property name="basename" value="message"/>
<!-- 如果在国际化资源文件中找不到对应代码的信息，就用这个代码作为名称 -->
<property name="useCodeAsDefaultMessage" value="true" />
</bean>
<!-- 视图解析器-->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsps/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
<!-- 登录拦截器 -->
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/admin/**"/>
<bean class="com.jet.project.interceptor.LoginInterceptor"></bean>
</mvc:interceptor>
</mvc:interceptors>
</beans>
-
SSM整合：web.xml中配置启动加载applicationContext.xml,spring_mvc配置文件
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <!-- 设置post编码格式 --> <filter> <filter-name>characterEncoding</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>characterEncoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 加载spring配置文件 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <!-- 加载SpringMvc配置文件 --> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 默认加载方式 默认加载必须规范： * 文件命名：servlet-name-servlet.xml====springmvc-servlet.xml 右键项目 ====>propertiesJava Build Path====>source====>Add Folder====>选择config文件夹 * 路径规范：必须在WEB-INF目录下面 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring_mvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> </web-app>
-
整合AdminLte(bootstrap)
- 下载Adminlte框架,拷贝bower_components ，dist ，plugins ，pages到项目中
- 实现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(); %> <html xmlns:th="http://www.thymeleaf.org"> <head> <!-- adminlte必要的css样式 --> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/> <link rel="stylesheet" href="<%=path%>/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="<%=path%>/adminlte/bower_components/font-awesome/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="<%=path%>/adminlte/bower_components/Ionicons/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" href="<%=path%>/adminlte/dist/css/AdminLTE.min.css"> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link rel="stylesheet" href="<%=path%>/adminlte/dist/css/skins/_all-skins.min.css"> <!-- tab_iframe的css样式 --> <link rel="stylesheet" href="<%=path%>/adminlte/dist/css/iframeTab.css"> <link rel="stylesheet" href="<%=path%>/adminlte/dist/css/common.css"> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <!-- 头部 -- > <jsp:include page="../common/header.jsp" /> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- search form --> <form action="#" method="get" class="sidebar-form"> <div class="input-group"> <input type="text" name="q" class="form-control" placeholder="Search..."/> <span class="input-group-btn"> <button type="submit" name="search" id="search-btn" class="btn btn-flat"> <i class="fa fa-search"></i> </button> </span> </div> </form> <!-- /.search form --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu" data-widget="tree"> </ul> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper" id="content-wrapper" style="min-height: 421px;"> <div class="content-tabs"> <nav class="page-tabs menuTabs tab-ui-menu" id="tab-menu"> <div class="page-tabs-content" style="margin-left: 0px;"> </div> </nav> </div> <div class="content-iframe "> <div class="tab-content " id="tab-content"> </div> </div> </div> <jsp:include page="../common/footer.jsp" /> </div> <!-- adminlte必要的js模块 --> <script src="<%=path%>/adminlte/bower_components/jquery/dist/jquery.min.js"></script> <script src="<%=path%>/adminlte/bower_components/jquery-ui/jquery-ui.min.js"></script> <script src="<%=path%>/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="<%=path%>/adminlte/dist/js/adminlte.min.js"></script> <!-- tab_iframe的js模块 --> <script src="<%=path%>/adminlte/dist/js/iframeTab.js"></script> <!-- 左侧的menu的js模块 --> <script src="<%=path%>/adminlte/dist/js/home.js"></script> </body> </html> - 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}); });
接下来正式开撸你的后台管理系统。。。
