技術簡介
Spring+SpringMVC+Mybatis
前端框架:velocity,ace admin, jquery。
SpringMVC
Spring MVC屬於SpringFrameWork的後續產品,已經融合在Spring Web Flow裏面。Spring Web MVC是一種基於Java的實現了Web MVC設計模式的請求驅動類型的輕量級Web框架,將web層進行職責解耦,基於請求驅動指的就是使用請求-響應模型,框架的目的就是幫助我們簡化開發。
SpringMVC請求處理流程流程圖:
Velocity
Velocity 是一個基於java 的模板引擎(template engine)。它性能良好,不支持java代碼所以能實現嚴格的MVC分層。支持VTL表達式語言、宏定義。velocity宏非常好用,類似函數,一處聲明,其它地方一行代碼即可引用,見文末分頁宏示例。
代碼示例:聲明用#,變量引用$,foreach和宏使用。
配置文件
- web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<display-name>Archetype Created Web Application</display-name>
<!-- Spring監聽器:加載指定配置文件到context上下文 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value> classpath:spring/spring-mybatis.xml </param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- 編碼過濾器 -->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<async-supported>true</async-supported>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- Spring MVC servlet:默認是查找/SpringMVC-servlet.xml -->
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:/spring/spring-mvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>/index.html</welcome-file>
</welcome-file-list>
</web-app>
- 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:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd">
<!-- 處理靜態資源的請求:如圖片、樣式表、js等:所有由/resources路徑開頭的請求都由/resources及子目錄提供服務 -->
<mvc:resources mapping="/assets/**" location="/assets/" />
<!-- 配置註解驅動控制器:bean,controller映射bean或URL -->
<mvc:annotation-driven />
<!-- 配置將指定目錄下使用註解@的類註冊爲bean -->
<context:component-scan base-package="com.jd.jr.know" />
<!-- 配置VM視圖解析器:使用prefix屬性和suffix屬性由視圖的邏輯名構造出模板文件路 -->
<bean
class="org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver">
<property name="cache" value="false" />
<property name="suffix" value=".vm" /><!-- 視圖文件的後綴名 -->
<property name="contentType" value="text/html;charset=UTF-8" />
<!-- 默認只將請求簡單傳遞給jsp,要使用vm標籤需要指定特定view。 -->
<property name="viewClass"
value="org.springframework.web.servlet.view.velocity.VelocityLayoutView" />
<!-- layout佈局設置, -->
<property name="layoutUrl" value="common/layout.vm" />
<property name="dateToolAttribute" value="dateFormat"/>
<property name="exposeSpringMacroHelpers" value="true"/>
<property name="requestContextAttribute" value="request"/>
</bean>
<!-- velocity配置視圖文件 -->
<bean id="velocityConfig"
class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<property name="resourceLoaderPath">
<value>/WEB-INF/vm/</value>
</property>
<property name="configLocation" value="classpath:spring/velocity.properties" />
</bean>
</beans>
- spring-mybatis.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:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:aop="http://www.springframework.org/schema/aop"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.1.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.1.xsd">
<bean id="dataSource" class="com.wangyin.commons.cp.WangyinCPDataSource">
<property name="propertiesLocation" value="classpath:db.properties" />
</bean>
<context:component-scan base-package="com.jd.jr.know" />
<!-- ===============針對myBatis的配置項=========== -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="mapperLocations" value="classpath:mybatis/mappers/*.xml" />
</bean>
<!-- 配置掃描器 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!-- 掃描me.gacl.dao這個包以及它的子包下的所有映射接口類 -->
<property name="basePackage" value="com.jd.jr.know.dao" />
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
</bean>
<!-- 配置Spring的事務管理器 -->
<bean id="transactionManager"
class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<!-- 攔截器方式配置事物 -->
<tx:advice id="transactionAdvice" transaction-manager="transactionManager">
<tx:attributes>
<tx:method name="query*" propagation="REQUIRED" />
<tx:method name="select*" propagation="REQUIRED" />
<tx:method name="delete*" propagation="REQUIRED" />
<tx:method name="update*" propagation="REQUIRED" />
<tx:method name="add*" propagation="REQUIRED" />
<tx:method name="insert*" propagation="REQUIRED" />
<tx:method name="del*" propagation="REQUIRED" />
<tx:method name="*" propagation="SUPPORTS" />
</tx:attributes>
</tx:advice>
<aop:config>
<aop:pointcut id="transactionPointcut"
expression="execution(* com.jd.jr.know.service..*Service.*(..))" />
<aop:advisor pointcut-ref="transactionPointcut"
advice-ref="transactionAdvice" />
</aop:config>
</beans>
- velocity.properties
input.encoding=UTF-8
output.encoding=UTF-8
contentType=text/html;charset=UTF-8
#directive.foreach.counter.name=vmForCount
directive.foreach.counter.initial.value=1
velocimacro.library = common/macro.vm
velocimacro.library.autoreload = true
- JAVA文件
@RequestMapping(value = "/queryByPage", method = RequestMethod.POST)
public String queryContentByPage(@RequestParam("pageNo") int pageNo,
Model model, ContentRequest contentRequest) {
//寫業務邏輯,contentRequest初始化用於傳遞表單對象參數,tagList爲響應數據
model.addAttribute("tagList", tagList);
model.addAttribute("contentRequest", contentRequest);
return "article/articleMng";
}
@RequestMapping(value = "/query", method = RequestMethod.GET,produces = "text/html;charset=UTF-8")
public @ResponseBody String query(@RequestParam("sourceTag") String sourceTag,Model model) {
//處理json,包括亂碼問題
StringBuilder html = new StringBuilder();
for (CnSourceTag cnSourceTag : sourceTagList) {
html.append("<option value='"+cnSourceTag.getTagName()+"'>"+cnSourceTag.getTagName()+"</option>");
}
return html.toString();
}
- velocity分頁通用宏
#macro( macroPage $reqURL)
<div align="center" id="pager">
#if($basePage.pageNo==1)
<span >首頁</span>
<span >前一頁</span>
#else
#set($pageNo = 1)
<span ><a class="pageQuery" href="$reqURL$pageNo">首頁</a></span>
#set($pageNo = $basePage.pageNo - 1)
<span ><a class="pageQuery" href="$reqURL$pageNo">前一頁</a></span>
#end
<span >|Page <input id="pageSize" type="text" style="width:6%;" value="$basePage.pageNo"/>of $basePage.totalPage|</span>
#if($basePage.pageNo==$basePage.totalPage)
<span >後一頁</span>
<span >尾頁</span>
#else
#set($pageNo = $basePage.pageNo + 1)
<span ><a class="pageQuery" href="$reqURL$pageNo">後一頁</a></span>
<span ><a class="pageQuery" href="$reqURL$basePage.totalPage">尾頁</a></span>
#end
<span >共$basePage.count條</span>
</div>
#end
layout.vm部局
<!DOCTYPE html>
<html lang="en">
<!-- 添加header.vm -->
#parse("/common/header.vm")
<!-- 這裏添加left -->
#parse("/common/leftMenu.vm")
<!-- 這裏添加main_content -->
$screen_content
<!-- 這裏添加foot -->
#parse("/common/footer.vm")
#parse("/common/script.vm")
#parse($script)
</body>
</html>
標準頁面寫法
<div id="dialog"></div>
#set($footerJs=["jquery.nestable.min.js","jquery-ui.custom.min.js",])
#set($script="relation/relationScript.vm")
不使用layout的寫法
#set($layout = "/common/blank.vm")
<div id="dialog"></div>
- jquery
<script language="JavaScript">
jQuery(function($){
querySourceTags();
submitPage();
updateTag();
});
function updateTag(){
//彈框顯示
$("#updateTag").on('click',function(){
$("#updateDialog").load($(this).attr("href"),{"x": Math.random()}, function(){
var dialog = $("#updateDialog").dialog({
autoOpen:false,
modal: true,
width: 450,
show: 'clip',
hide: 'explode',
resizable: false,
title: "修改文章標籤",
draggable: false
}).dialog('open');
});
return false;
});
}
function submitPage(){
//帶查詢form的分頁提交
$(".pageQuery").on('click',function(){
var href = $(this).attr("href");
var pageNo = href.substring(href.lastIndexOf("=")+1);
$("#pageNo").val(pageNo);
$("#submitBtn").click();
return false;
});
}
function querySourceTags(){
var engine = $('.EngineModel');
//可編輯select具體實現
var focus = false;
$("#inputModel").focus(function () {
focus = true;
$(this).next().css('display', 'block');
}).blur(function () {
if (focus) {
$(this).next().css('display', 'none');
}
}).keyup(function () {
var queryCondition = $("#inputModel").val().toLowerCase();
if (queryCondition.length >= 2) {
$.get("../sourceTag/query.vm?sourceTag="+queryCondition,function(data){
$("#EngineModel").empty();
$("#EngineModel").html(data);
});
}
}).next().mousedown(function () {
focus = false;
}).change(function () {
$(this).css('display', 'none').prev().val(this.value);
});
}
</script>
示例代碼:
SSM工程demo.zip
參考文檔
bootstrap:
英文官網:http://getbootstrap.com/ ,
中文官網: http://v3.bootcss.com/
jquery: 輕量級的js框架。
官網: http://jquery.com/
ace官網: http://ace.jeka.by/
velocity官網:http://velocity.apache.org/