ssm整合总结(二)--第二步之整合sping，sping mvc，bootstrap

迷南。 2022-04-12 13:43 152阅读 0赞

说明：本文内容来自山硅谷，整合了任务5--任务8的内容http://www.gulixueyuan.com/my/course/50

本文是继[https://www.cnblogs.com/alpsong/p/10059698.html][https_www.cnblogs.com_alpsong_p_10059698.html]的基础上来加入sping，spring mvc，bootstrap配置

**目录**

1引入Bootstrap

1.1进入bootstrap官网

2配置web.xml文件

2.1配置sping

2.2整个web.xml配置如下

3spring mvc的配置文件

3.1dispatcherServlet-servlet.xml文件内容如下

4配置sping的配置文件applicationContext.xml

4.1完整的内容如下

5分页页面

5.1页面完整内容如下

5.2页面解释

5.2.1引入c标签，可以做循环

5.2.2得到项目路径

6控制层的代码

6.1控制层完整代码如下

6.2解释

6.2.1这个是得到所有的结果集

6.2.2将这个结果集封装成分页需要的对象pageinfo对象

6.2.3通过model参数返回给list.jsp页面

--------------------

# **1引入Bootstrap** #

## 　　**1.1进入bootstrap官网** ##

![1170676-20181203173251503-863203725.png][]

![1170676-20181203173310616-182421179.png][]

![1170676-20181203173326786-1491975214.png][]

![1170676-20181203173343082-1085040853.png][]

![1170676-20181203173435909-208698237.png][]

**1.2使用bootstrap**

**                  1.2.1helloworld**

**                    **网址：[https://v3.bootcss.com/getting-started/\#download][https_v3.bootcss.com_getting-started_download]

![1170676-20181203173704277-1196035201.png][]

**1.2.2css样式操作api**

网址：[https://v3.bootcss.com/getting-started/\#download][https_v3.bootcss.com_getting-started_download]

![1170676-20181203174027327-340303037.png][]

![1170676-20181203174115741-858644269.png][]

**       **到此，bootstrap的文件已经引入到项目中了，也大致介绍了bootstrap的使用方式。暂时不写前端代码，只是引入bootstrap   需要的js，css等

# **2配置web.xml文件** #

##         **2.1配置sping** ##

2.1.1** **说明：这里配置的sping与单独使用spring时的配置不一样

2.1.1 web.xml中如下配置

2.2.2还需要建一个sping的配置文件

目录如下

![1170676-20181203175817634-1872019959.png][]

代码如下

# #

## ** 2.2整个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_2_5.xsd"
        id="WebApp_ID" version="2.5">
        
        
        
        <context-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </context-param>
    
        
        <listener>
            <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
        </listener>
    
        
        
        <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>
    
        
        <filter>
            <filter-name>CharacterEncodingFilter</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>
            <init-param>
                <param-name>forceRequestEncoding</param-name>
                <param-value>true</param-value>
            </init-param>
            <init-param>
                <param-name>forceResponseEncoding</param-name>
                <param-value>true</param-value>
            </init-param>
        </filter>
        <filter-mapping>
            <filter-name>CharacterEncodingFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
    
        
        <filter>
            <filter-name>HiddenHttpMethodFilter</filter-name>
            <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>HiddenHttpMethodFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
        <filter>
            <filter-name>HttpPutFormContentFilter</filter-name>
            <filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
        </filter>
        <filter-mapping>
            <filter-name>HttpPutFormContentFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
    
    
    </web-app>

2.2.1对web.XML中配置的spring mvc部分进行补充。引入spring mvc还需要新建一个spring mvc的配置文件

文件目录如下

![1170676-20181203180327172-1191089607.png][]

文件内容如下：（该文件中暂时不配置任何信息，只是创建出来）

**       2.2.2字符编码的过滤器必须放在所有过滤器之前**

# **3spring mvc的配置文件** #

## **　　3.1dispatcherServlet-servlet.xml文件内容如下** ##

**3.2对该配置文件进行说明**

![1170676-20181203181901056-213473032.png][]

# 4配置sping的配置文件applicationContext.xml #

##        4**.1完整的内容如下** ##

<?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:aop="http://www.springframework.org/schema/aop"
        xmlns:tx="http://www.springframework.org/schema/tx"
        xsi:schemaLocation="http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
            http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
            http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
    
        <context:component-scan base-package="com.atguigu">
            <context:exclude-filter type="annotation"
                expression="org.springframework.stereotype.Controller" />
        </context:component-scan>
    
        
        
        <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>
    
        
        <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
            
            <property name="configLocation" value="classpath:mybatis-config.xml"></property>
            <property name="dataSource" ref="pooledDataSource"></property>
            
            <property name="mapperLocations" value="classpath:mapper/*.xml"></property>
        </bean>
    
        
        <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
            
            <property name="basePackage" value="com.atguigu.crud.dao"></property>
        </bean>
    
        
        <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>
        
        <aop:config>
            
            <aop:pointcut expression="execution(* com.atguigu.crud.service..*(..))" id="txPoint"/>
            
            <aop:advisor advice-ref="txAdvice" pointcut-ref="txPoint"/>
        </aop:config>
    
        
        <tx:advice id="txAdvice" transaction-manager="transactionManager">
            <tx:attributes>
                
                <tx:method name="*"/>
                
                <tx:method name="get*" read-only="true"/>
            </tx:attributes>
        </tx:advice>
    
        
    
    </beans>

#  5分页页面 #

##         5.1页面完整内容如下 ##

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工列表</title>
    <%
    	pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    
    <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
    <link
    	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
    	rel="stylesheet">
    <script
    	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    	
    	<div class="container">
    		
    		<div class="row">
    			<div class="col-md-12">
    				<h1>SSM-CRUD</h1>
    			</div>
    		</div>
    		
    		<div class="row">
    			<div class="col-md-4 col-md-offset-8">
    				<button class="btn btn-primary">新增</button>
    				<button class="btn btn-danger">删除</button>
    			</div>
    		</div>
    		
    		<div class="row">
    			<div class="col-md-12">
    				<table class="table table-hover">
    					<tr>
    						<th>#</th>
    						<th>empName</th>
    						<th>gender</th>
    						<th>email</th>
    						<th>deptName</th>
    						<th>操作</th>
    					</tr>
    					<c:forEach items="${pageInfo.list }" var="emp">
    						<tr>
    							<th>${emp.empId }</th>
    							<th>${emp.empName }</th>
    							<th>${emp.gender=="M"?"男":"女" }</th>
    							<th>${emp.email }</th>
    							<th>${emp.department.deptName }</th>
    							<th>
    								<button class="btn btn-primary btn-sm">
    									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
    									编辑
    								</button>
    								<button class="btn btn-danger btn-sm">
    									<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    									删除
    								</button>
    							</th>
    						</tr>
    					</c:forEach>
    				</table>
    			</div>
    		</div>
    
    		
    		<div class="row">
    			
    			<div class="col-md-6">当前 ${pageInfo.pageNum }页,总${pageInfo.pages }
    				页,总 ${pageInfo.total } 条记录</div>
    			
    			<div class="col-md-6">
    				<nav aria-label="Page navigation">
    				<ul class="pagination">
    					<li><a href="${APP_PATH }/emps?pn=1">首页</a></li>
    					<c:if test="${pageInfo.hasPreviousPage }">
    						<li><a href="${APP_PATH }/emps?pn=${pageInfo.pageNum-1}"
    							aria-label="Previous"> <span aria-hidden="true">«</span>
    						</a></li>
    					</c:if>
    
    
    					<c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
    						<c:if test="${page_Num == pageInfo.pageNum }">
    							<li class="active"><a href="#">${page_Num }</a></li>
    						</c:if>
    						<c:if test="${page_Num != pageInfo.pageNum }">
    							<li><a href="${APP_PATH }/emps?pn=${page_Num }">${page_Num }</a></li>
    						</c:if>
    
    					</c:forEach>
    					<c:if test="${pageInfo.hasNextPage }">
    						<li><a href="${APP_PATH }/emps?pn=${pageInfo.pageNum+1 }"
    							aria-label="Next"> <span aria-hidden="true">»</span>
    						</a></li>
    					</c:if>
    					<li><a href="${APP_PATH }/emps?pn=${pageInfo.pages}">末页</a></li>
    				</ul>
    				</nav>
    			</div>
    		</div>
    		
    	</div>
    </body>
    </html>

##             5.2页面解释 ##

##            5.2.1引入c标签，可以做循环 ##

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

##            5.2.2得到项目路径 ##

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

# 6控制层的代码 #

##              6.1控制层完整代码如下 ##

package com.atguigu.crud.controller;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.validation.Valid;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.validation.BindingResult;
    import org.springframework.validation.FieldError;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.atguigu.crud.bean.Employee;
    import com.atguigu.crud.bean.Msg;
    import com.atguigu.crud.service.EmployeeService;
    import com.github.pagehelper.PageHelper;
    import com.github.pagehelper.PageInfo;
    
    /**
     * 处理员工CRUD请求
     * 
     * @author lfy
     * 
     */
    @Controller
    public class EmployeeController {
    
    	@Autowired
    	EmployeeService employeeService;
    	
    	/**
    	 * 查询员工数据（分页查询）
    	 * 
    	 * @return
    	 */
    	 @RequestMapping("/emps")
    	public String getEmps(
    			@RequestParam(value = "pn", defaultValue = "1") Integer pn,
    			Model model) {
    		// 这不是一个分页查询；
    		// 引入PageHelper分页插件
    		// 在查询之前只需要调用，传入页码，以及每页的大小
    		PageHelper.startPage(pn, 5);
    		// startPage后面紧跟的这个查询就是一个分页查询
    		List<Employee> emps = employeeService.getAll();
    		// 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。
    		// 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数
    		PageInfo page = new PageInfo(emps, 5);
    		model.addAttribute("pageInfo", page);
    
    		return "list";
    	}
    }

##      6.2解释 ##

###            6.2.1这个是得到所有的结果集 ###

List<Employee> emps = employeeService.getAll();

###          6.2.2将这个结果集封装成分页需要的对象pageinfo对象 ###

这里需要引入PageHelper插件。详细暂时不介绍了

PageInfo page = new PageInfo(emps, 5);

###          6.2.3通过model参数返回给list.jsp页面 ###

model.addAttribute("pageInfo", page);

[https_www.cnblogs.com_alpsong_p_10059698.html]: https://www.cnblogs.com/alpsong/p/10059698.html
[1170676-20181203173251503-863203725.png]: /images/20220412/65e1156a6b0f42f1b2c4cbc6944f1907.png
[1170676-20181203173310616-182421179.png]: /images/20220412/1595d5a7b642413f918677478b3a2cb9.png
[1170676-20181203173326786-1491975214.png]: /images/20220412/7f0cb4799ead4deea4f304c72cc69191.png
[1170676-20181203173343082-1085040853.png]: /images/20220412/b327f01169364219afcc5be705cf6452.png
[1170676-20181203173435909-208698237.png]: /images/20220412/5ea829807cce4bbe9cef51df49a9c67f.png
[https_v3.bootcss.com_getting-started_download]: https://v3.bootcss.com/getting-started/#download
[1170676-20181203173704277-1196035201.png]: /images/20220412/8e47ebbbbaf74674a9c1b69b90e83bf7.png
[1170676-20181203174027327-340303037.png]: /images/20220412/5663d67285d34f97b497ad0a00a3d1d1.png
[1170676-20181203174115741-858644269.png]: /images/20220412/65865631cef84bd5b78b0d67ddd5fb86.png
[1170676-20181203175817634-1872019959.png]: /images/20220412/40f0c365404e4f47a56c209f79b25696.png
[1170676-20181203180327172-1191089607.png]: /images/20220412/47472ee4f0b6469f8cba1bac38aeb88e.png
[1170676-20181203181901056-213473032.png]: /images/20220412/c1c1858910e544d581e81578632eaa50.png