Spring+Spring mvc+Mybatis+Adminlte(bootstrap)打造高大尚的專案框架
阿新 • • 發佈：2019-01-07
前言： 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}); });
接下來正式開擼你的後臺管理系統。。。
