SSM 整合+Maven+ Bootstrap搭建简单项目(基础+主要代码)

最近公司要求搭建展示数据的Web平台,虽然只是进行简单的查询展示操作,但正好可以用来练练手。此项目应用Spring+SpringMVC+Mybatis+Maven+Bootstrap。本人技术小白,如有写的不对的地方,欢迎大家批评指正,谢谢。

一.创建Maven工程(过程不累述)

1.目录结构如下图所示:相关文件层次应该一目了然,后面会做详细解读

SSM 整合+Maven+ Bootstrap搭建简单项目(基础+主要代码)

2.maven依赖导入

maven的依赖位于pom.xml中,要导入ssm等相关jar包的依赖,具体如下

                <dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>4.3.7.RELEASE</version>
		</dependency>

 		<!--引入pageHelper分页插件 -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>5.0.0</version>
		</dependency>

		<!-- 返回json字符串的支持 -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.8.8</version>
		</dependency>

		<!--JSR303数据校验支持;tomcat7及以上的服务器, 
		tomcat7以下的服务器:el表达式。额外给服务器的lib包中替换新的标准的el
		-->
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-validator</artifactId>
			<version>5.4.1.Final</version>
		</dependency>


		<!-- Spring-Jdbc -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
			<version>4.3.7.RELEASE</version>
		</dependency>

		<!--Spring-test -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>4.3.7.RELEASE</version>
		</dependency>


		<!-- Spring面向切面编程 -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aspects</artifactId>
			<version>4.3.7.RELEASE</version>
		</dependency>

		<!--MyBatis -->
                <dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>3.4.2</version>
		</dependency>

		<!-- MyBatis整合Spring的适配包 -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis-spring</artifactId>
			<version>1.3.1</version>
		</dependency>

		<!-- 数据库连接池、驱动 -->
		<dependency>
			<groupId>c3p0</groupId>
			<artifactId>c3p0</artifactId>
			<version>0.9.1</version>
		</dependency>

		<!-- -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.41</version>
		</dependency>

		<!-- (jstl,servlet-api,junit) -->
		<!-- https://mvnrepository.com/artifact/jstl/jstl -->
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
	
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.0.1</version>
			<scope>provided</scope>
		</dependency>


		<!-- junit -->
		<!-- https://mvnrepository.com/artifact/junit/junit -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
		</dependency>

二.Bootstrap

bootatrap是简单的前端框架,相关文件依赖可以去这个上面下载:http://www.bootcss.com/

bootstrap相关教程可在此网站上学习:http://www.runoob.com/bootstrap/bootstrap-tutorial.html

此项目中包括bootstrap、js、图片等相关静态资源都放在webapp目录下的static文件夹中。

三.Spring的相关配置

1.web.xml

启动Spring容器,制定spring配置文件applicationContext.xml的位置,并拦截来自前端的所有请求

        <!--1、启动Spring的容器  -->
	<!-- needed for ContextLoaderListener -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>

	<!-- Bootstraps the root web application context before servlet initialization -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	
	<!--2、springmvc的前端控制器,拦截所有请求  -->
	<!-- The front controller of this Spring Web application, responsible for handling all application requests -->
	<servlet>
		<servlet-name>dispatcherServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>

	<!-- 映射所有请求 -->
	<servlet-mapping>
		<servlet-name>dispatcherServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>

2.applicationContext.xml

在此配置文件中指定spring容器扫描的包(扫描除了controller之外的所有包),以及配置数据源、mybatis、事物控制等。

        <context:component-scan base-package="com.bstc">
		<context:exclude-filter type="annotation"
			expression="org.springframework.stereotype.Controller" />
	</context:component-scan>

	<!-- Spring的配置文件,这里主要配置和业务逻辑有关的 -->
	<!--=================== 数据源,事务控制,xxx ================-->
	<context:property-placeholder location="classpath:dbconfig.properties" />
	<bean id="pooledDataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
		<property name="jdbcUrl" value="${jdbc.jdbcUrl}"></property>
		<property name="driverClass" value="${jdbc.driverClass}"></property>
		<property name="user" value="${jdbc.user}"></property>
		<property name="password" value="${jdbc.password}"></property>
	</bean>

	<!--================== 配置和MyBatis的整合=============== -->
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<!-- 指定mybatis全局配置文件的位置 -->
		<property name="configLocation" value="classpath:mybatis-config.xml"></property>
		<property name="dataSource" ref="pooledDataSource"></property>
		<!-- 指定mybatis,mapper文件的位置 -->
		<property name="mapperLocations" value="classpath:mapper/*.xml"></property>
	</bean>

	<!-- 配置扫描器,将mybatis接口的实现加入到ioc容器中 -->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<!--扫描所有dao接口的实现,加入到ioc容器中 -->
		<property name="basePackage" value="com.bstc.dao"></property>
	</bean>
	
	<!-- 配置一个可以执行批量的sqlSession -->
	<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
		<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg>
		<constructor-arg name="executorType" value="BATCH"></constructor-arg>
	</bean>
	<!--=============================================  -->

	<!-- ===============事务控制的配置 ================-->
	<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<!--控制住数据源  -->
		<property name="dataSource" ref="pooledDataSource"></property>
	</bean>
	
	<tx:annotation-driven transaction-manager="transactionManager"/>

三、SpringMVC配置文件

倘若没有在web.xml文件中指定springMVC配置文件的位置,则mvc配置文件默认位置在WEB-INF目录下,默认名为web.xml文件中前端控制器名-servlet.xml,此处为dispatcher-servlet.xml

此处使用IOC注解,并配置视图解析器

        <!-- 启用IoC注解 -->
	<context:component-scan base-package="com.bstc"/>


	<!-- 配置视图解析器,msg ,最终拼接而成的物理视图是:/adsPage/msg.jsp -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/" />
		<property name="suffix" value=".jsp" />
	</bean>
	
	<mvc:annotation-driven></mvc:annotation-driven>
	
	<!-- 把springmvc不能不处理的请求交给tomcat -->
	<mvc:default-servlet-handler/>

四、Mybatis配置文件

在Spring配置文件applicationContext.xml中已经指定了全局配置文件和mapper映射文件的位置

1.全局配置文件

此处启用驼峰命名法,使用别名,以及使用了分页插件

<configuration>
	<settings>
		<setting name="mapUnderscoreToCamelCase" value="true"/>
	</settings>
	
	<typeAliases>
		<package name="com.bstc.bean"/>
	</typeAliases>
	
	<plugins>
		<plugin interceptor="com.github.pagehelper.PageInterceptor">
			<!--分页参数合理化,防止出现负的页数,和超过实际存在的页数  -->
			<property name="reasonable" value="true"/>
		</plugin>
	</plugins>

</configuration>

2.mapper映射文件

由于我的初始页面有四个查询条件栏(后续会有展示),最少输入一项就能查询出结果,所以此处使用了动态sql

<mapper namespace="com.bstc.dao.TestDao">
	
	<resultMap type="java.util.HashMap" id="FirstMap">
		<id column="id" property="id" jdbcType="VARCHAR"/>
		<result column="companyName" property="companyName" jdbcType="VARCHAR"/>
	</resultMap>

        <!-- 根据四个条件查询 查公司-->
	<select id="getCompanyByFour" resultMap="FirstMap">
		 select distinct cominfo.id,cominfo.companyName from cominfo,capabilityinfo
		 <where>
		   
		    	cominfo.id=capabilityinfo.companyId
		   
		    <if test="id != null and id.length()>0">
		        and cominfo.id=#{id}
		    </if>
		    <if test="companyName != null and companyName.length()>0">
		    	and cominfo.companyName like "%"#{companyName}"%"
		    </if>
		    <if test="checkRange != null and checkRange.length()>0">
		    	and capabilityinfo.checkRange=#{checkRange}
		    </if>
		    <if test="abilityName != null and abilityName.length()>0">
		    	and capabilityinfo.name=#{abilityName}
		    </if>
		 </where>
		 order by cominfo.id ASC
	
	</select>
</mapper>

五.相关类的编写

1.dao层:根据查询参数得到公司列表

public interface TestDao {
	
	/**
	 * 根据四个参数查询公司list
	 * */
     List<Map<String, Object>> getCompanyByFour(@Param("id") String id,@Param("companyName")String companyName,
			@Param("checkRange")String checkRange,@Param("abilityName")String abilityName);

2.service层

@Service
public class TestService {
	
	@Autowired
	private TestDao testDao;

        //测试map接收数据
	public List<Map<String, Object>> getCompanyByFour(String id,String companyName,String checkRange,String abilityName){
		
		return testDao.getCompanyByFour(id,companyName,checkRange,abilityName);
	}
}

3.controller层,将从数据库查询到的信息返还给前端控制器

@Controller
public class TestController {
	
	@Autowired
	private TestService testService;

        @RequestMapping("/test")
	public String test(@RequestParam(value="pn",defaultValue="1") Integer pn,HttpServletRequest request) {
		String id = request.getParameter("id");
		String companyName = request.getParameter("companyName");
		String checkRange = request.getParameter("checkRange");
		String abilityName = request.getParameter("abilityName");
	  
		List<Map<String, Object>> lists = testService.getCompanyByFour(id, companyName, checkRange, abilityName);
		for(Map<String, Object> map:lists){
			for(Entry<String, Object> e:map.entrySet()){
				e.getKey();
				e.getValue();
				System.out.println(e.getKey() + ":" + e.getValue());
			}
		}
		request.setAttribute("companyList", lists);
		return "success";
	}
}

六.前端代码  

由于前端中路径信息经常出错,所以我在head中得到根路径信息

<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>

1.查询页面:此表单向controller层发送请求test.action

<form class="form-horizontal" role="form" action="${APP_PATH }/test.action" onsubmit="return check()">
				  <div class="form-group">
				    <label for="firstname" class="col-sm-2 control-label">机构ID</label>
				    <div class="col-sm-8">
				      <input type="text" class="form-control"  id="id" name="id" placeholder="请输入机构ID">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="lastname" class="col-sm-2 control-label">机构名称</label>
				    <div class="col-sm-8">
				      <input type="text" class="form-control"  id="companyName"  name="companyName" placeholder="请输入名称">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="firstname" class="col-sm-2 control-label">检测对象</label>
				    <div class="col-sm-8">
				      <input type="text" class="form-control"  id="checkRange"  name="checkRange" placeholder="请输入检测对象">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="lastname" class="col-sm-2 control-label">项目名称</label>
				    <div class="col-sm-8">
				      <input type="text" class="form-control" id="abilityName" name="abilityName" placeholder="请输入项目名称">
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <button type="submit" class="btn btn-default" >查询</button>
				    </div>
				  </div>
				</form>

2.展示页面 success.jsp

   <div class="container">
   	  <div class="row">
   	  	<div class="col-sm-12">
   	  		<h3 class="text-center">机构列表</h3>
   	  		<h4 class="text-right"><a href="${APP_PATH }/first.jsp">返回查询页</a></h4>
   	  	</div>
   	  </div>
   	 </div>
   	 
   <div class="container">
   	  <div class="row">
   	  	<div class="col-sm-12,row pre-scrollable">	 
		   	<c:if test="${requestScope.companyList != null}">
		   		<table class="table table-striped">
		   			<tr>	  
		   			  <th>机构名称</th>
		   			  <th>机构ID(链接)</th>
		   			</tr>
		   			
		   		<c:forEach items="${requestScope.companyList }" var="list">
		   			
		   			<tr>
		   			<c:forEach items="${list }" var="map">
			   			  <c:choose>
			   			    <c:when test="${map.key == 'id' }">
			   			       <th><a href="${APP_PATH}/getAll?id=${map.value}">${map.value}</a></th>
			   			    </c:when>
			   			    <c:otherwise>
			   			       <th>${map.value}</th>
			   			    </c:otherwise>
			   			  </c:choose>	
		   				       				
		   			</c:forEach>
		   			</tr>
		   			</c:forEach>
		   		</table>
		   	</c:if>	   
		 </div>	 
	  </div>
   </div>

七.测试

1.查询:输入一个查询条件进行模糊查询

SSM 整合+Maven+ Bootstrap搭建简单项目(基础+主要代码)

2.查询结果

SSM 整合+Maven+ Bootstrap搭建简单项目(基础+主要代码)