web工程之SSM快速搭建示例程序(文末含代码附件)

技术简介

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和宏使用。

配置文件

1. web.xml

<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 Applicationdisplay-name>

    
    <context-param>
        <param-name>contextConfigLocationparam-name>
        <param-value> classpath:spring/spring-mybatis.xml param-value>
    context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
    listener>

    
    <filter>
        <filter-name>encodingFilterfilter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
        <async-supported>trueasync-supported>
        <init-param>
            <param-name>encodingparam-name>
            <param-value>UTF-8param-value>
        init-param>
    filter>
    <filter-mapping>
        <filter-name>encodingFilterfilter-name>
        <url-pattern>/*url-pattern>
    filter-mapping>

    
    <servlet>
        <servlet-name>SpringMVCservlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
        <init-param>
            <param-name>contextConfigLocationparam-name>
            <param-value>classpath:/spring/spring-mvc.xmlparam-value>
        init-param>
    servlet>
    <servlet-mapping>
        <servlet-name>SpringMVCservlet-name>
        <url-pattern>/url-pattern>
    servlet-mapping>

    <welcome-file-list>
        <welcome-file>/index.htmlwelcome-file>
    welcome-file-list>

web-app>

1. spring-mvc.xml

<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">

    
    <mvc:resources mapping="/assets/**" location="/assets/" />


    
    <mvc:annotation-driven />
    
    <context:component-scan base-package="com.jd.jr.know" />

    
    <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" />
        
        <property name="viewClass"
            value="org.springframework.web.servlet.view.velocity.VelocityLayoutView" />
        
        <property name="layoutUrl" value="common/layout.vm" />
        <property name="dateToolAttribute" value="dateFormat"/>
        <property name="exposeSpringMacroHelpers" value="true"/>
        <property name="requestContextAttribute" value="request"/> 
    bean>

    
    <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

<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" />


    
    <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">
        
        <property name="basePackage" value="com.jd.jr.know.dao" />
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
    bean>

    
    <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(""+cnSourceTag.getTagName()+"");
        }
        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部局

<html lang="en">
            
            #parse("/common/header.vm")  
            
            #parse("/common/leftMenu.vm")   
            
            $screen_content
            
             #parse("/common/footer.vm")
        #parse("/common/script.vm")
        #parse($script)
    body>
html>

标准页面写法

"dialog">
#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/