前言： 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}); });
接下來正式開擼你的後臺管理系統。。。
