title: ssm整合-1-CRUD
data:
tags:
- java
- ssm框架
categories: SSM整合
1、依赖
<!--spring、springmvc-->
<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.9.RELEASE</version>
</dependency>
<!--spring jdbc-->
<!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.2.14.RELEASE</version>
</dependency>
<!--spring aop-->
<!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>5.2.14.RELEASE</version>
</dependency>
<!--mybatis-->
<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.6</version>
</dependency>
<!--mybatis、spring整合包-->
<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.2</version>
</dependency>
<!--数据库连接池、驱动-->
<!-- https://mvnrepository.com/artifact/com.mchange/c3p0 -->
<dependency>
<groupId>com.mchange</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.5.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.18</version>
</dependency>
<!--jstl、servlet-api、junit-->
<!-- https://mvnrepository.com/artifact/jstl/jstl -->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/servletapi/servlet-api -->
<dependency>
<groupId>servletapi</groupId>
<artifactId>servlet-api</artifactId>
<version>2.4</version>
<scope>provided</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/junit/junit -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<!--其他-->
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.16</version>
<scope>provided</scope>
</dependency>
2、加入bootStrap
https://v3.bootcss.com/getting-started/#download
下载bootstrap，
在webapp文件下创建static文件夹，把bootstrap解压后的文件放到这里来
之后的使用也是参照官方文档
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>员工管理系统</title>
<%--引入样式--%>
<style href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js" crossorigin="anonymous"/>
<%--引入jquery--%>
<script type="text/javascript" src="static/js/jquery-3.5.1.min.js" crossorigin="anonymous"/>
</head>
<body>
<h1>hello</h1>
<button class="btn btn-primary">hello</button>
</body>
</html>
3、spring配置文件
data数据源
jdbc.driver=com.mysql.cj.jdbc.Driver
#数据库地址
jdbc.url=jdbc:mysql://localhost:3306/mybatis?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Hongkong
#用户名
jdbc.username=root
#密码
jdbc.password=123456
#最大连接数
c3p0.maxPoolSize=30
#最小连接数
c3p0.minPoolSize=10
#关闭连接后不自动commit
c3p0.autoCommitOnClose=false
#获取连接超时时间
c3p0.checkoutTimeout=10000
#当获取连接失败重试次数
c3p0.acquireRetryAttempts=2
spring核心配置文件
<?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/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
https://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<!--spring的配置文件，主要配置业务和业务逻辑有关的-->
<!--数据源、事务控制、等等-->
<!--1、注解扫描
除了controller不需要扫描，其他都需要扫描-->
<context:component-scan base-package="com.wang" use-default-filters="false">
<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<!--2、数据源-->
<context:property-placeholder location="classpath:data.properties"/>
<bean id="pooledDataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="${jdbc.driver}"/>
<property name="jdbcUrl" value="${jdbc.url}"/>
<property name="user" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<!--3、配置spring和mybatis的整合-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--指定mybatis的全局配置文件-->
<property name="configLocation" value="classpath:mybatis-config.xml"/>
<!--指定数据源-->
<property name="dataSource" ref="pooledDataSource"/>
<!--注册mapper文件-->
<property name="mapperLocations" value="classpath:mapper/*.xml"/>
</bean>
<!--4、配置扫描器，把mybatis接口的实现加入到IOC容器中来-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!--扫描所有的dao接口，加入到IOC容器中来，以便于后来的自动装配-->
<property name="basePackage" value="com.wang.dao"/>
</bean>
<!--5、事务控制-->
<bean id="dataSourceTransactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!--告诉事务控制器，我们用的是哪个数据源-->
<property name="dataSource" ref="pooledDataSource"/>
</bean>
<aop:config>
<!--这里的切入点表达式：给任意放回类型的service包下的所有类（包括新包）下的所有方法（这个方法可以包含任意多参数）-->
<!--txPoint表示事务切入点-->
<aop:pointcut id="txPoint" expression="execution(* com.wang.service..*(..))"/>
<!--配置事务增强,需要'advice事务如何切入属性'和'pointcut事务在哪切入属性'-->
<aop:advisor advice-ref="transactionInterceptor" pointcut-ref="txPoint"/>
</aop:config>
<!--配置事务增强，事务如何切入-->
<tx:advice id="transactionInterceptor" transaction-manager="dataSourceTransactionManager">
<tx:attributes>
<!--*表示所有方法都是事务方法-->
<tx:method name="*"/>
<!--以get开始的所有方法:我们都认为只读方法-->
<tx:method name="get*" read-only="true"/>
</tx:attributes>
</tx:advice>
<!--总结：spring配置文件的核心点：数据源、与mybatis的整合、事务控制-->
<!--================其他==================-->
<!--创建可以批量操作的sqlSession
注意：这里的template是一个bean工厂，所以class是sqlSessionTemplate，但是放入IOC容器的是SqlSession-->
<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"/>
<!--executorType：执行类型，为批量操作
把这个sqlsessiontemplate传入单元测试中就可以进行批量操作-->
<constructor-arg name="executorType" value="BATCH"/>
</bean>
</beans>
4、springmvc配置
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!--1、先把IOC容器配置文件引入到web.xml中-->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!--2、字符编码过滤器-->
<!--注意：过滤器的全局设置里面的url都需要是"/*",而不只是"/"-->
<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>
<!--3、rest分格过滤器,将普通的post请求转换成delete请求和put请求-->
<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>
<!--4、前端控制器:dispatcherServlet-->
<!--注意：这里需要引入springmvc配置文件-->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</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:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
https://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--springmvc的配置文件：包含网站的跳转逻辑，控制，配置
在web.xml的dispatcherServlet配置中需要配置这个配置文件-->
<!--1、扫描：只扫描带有control注解的控制器-->
<context:component-scan base-package="com.wang" use-default-filters="false">
<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<!--2、配置视图解析器-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
<!--两个标准配置-->
<!--将springmvc不能处理的资源交给tomcat处理-->
<mvc:default-servlet-handler/>
<!--能支持springmvc更高级的操作：JSR303校验，快捷的ajax等等-->
<!--更关键的是映射动态请求-->
<mvc:annotation-driven/>
</beans>
5、各配置文件之间的关系
6、mybatis逆向工程生成java程序
mybatis配置文件
- 一个设置
- 一个别名
<?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>
<settings>
<!--日志开关，此处为默认-->
<setting name="logImpl" value="STDOUT_LOGGING"/>
<setting name="jdbcTypeForNull" value="NULL"/>
<!--开启懒加载，在需要的时候才会读取数据 -->
<setting name="lazyLoadingEnabled" value="true"/>
<!--关闭强制加载，即关闭在加载实例的时候就读取全部数据-->
<setting name="aggressiveLazyLoading" value="false"/>
</settings>
<typeAliases>
<!--package是为这个包下的类都创建一个开头小写的别名-->
<package name="com.wang.pojo"/>
</typeAliases>
<mappers>
<mapper resource="mapper/EmployeeMapper.xml"/>
</mappers>
</configuration>
依赖
<!--mybatis 逆向工程-->
<!-- https://mvnrepository.com/artifact/org.mybatis.generator/mybatis-generator-core -->
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.4.0</version>
</dependency>
这里还需要添加一个插件
<!--在EmployeeExample中会出语言不支持的错误，需要加上这个插件-->
<build>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.3.2</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
</plugins>
</build>
mbg配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
"http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
<!--mysql 连接数据库jar 这里选择自己本地位置-->
<classPathEntry location="D:\WorkingSoft\apache-maven-3.6.2\repository\mysql\mysql-connector-java\8.0.15\mysql-connector-java-8.0.15.jar" />
<context id="testTables" targetRuntime="MyBatis3">
<commentGenerator>
<!-- 是否去除自动生成的注释 true：是 ： false:否 -->
<property name="suppressAllComments" value="true" />
</commentGenerator>
<!--数据库连接的信息：驱动类、连接地址、用户名、密码 -->
<jdbcConnection driverClass="com.mysql.jdbc.Driver"
connectionURL="jdbc:mysql://localhost:3306/vr_appointment?serverTimezone=CTT" userId="root"
password="123456">
<property name="nullCatalogMeansCurrent" value="true"/>
</jdbcConnection>
<!-- 默认false，把JDBC DECIMAL 和 NUMERIC 类型解析为 Integer，为 true时把JDBC DECIMAL 和
NUMERIC 类型解析为java.math.BigDecimal -->
<javaTypeResolver>
<property name="forceBigDecimals" value="false" />
</javaTypeResolver>
<!-- targetProject:生成PO类的位置 -->
<javaModelGenerator targetPackage="cn.jxust.srw.campushelper.po"
targetProject="src/main/java">
<!-- enableSubPackages:是否让schema作为包的后缀 -->
<property name="enableSubPackages" value="false" />
<!-- 从数据库返回的值被清理前后的空格 -->
<property name="trimStrings" value="true" />
</javaModelGenerator>
<!-- targetProject:mapper映射文件生成的位置
如果maven工程只是单独的一个工程，targetProject="src/main/java"
若果maven工程是分模块的工程，targetProject="所属模块的名称"，例如：
targetProject="ecps-manager-mapper"，下同-->
<sqlMapGenerator targetPackage="wechatOrder.mapper"
targetProject="src/main/java">
<!-- enableSubPackages:是否让schema作为包的后缀 -->
<property name="enableSubPackages" value="false" />
</sqlMapGenerator>
<!-- targetPackage：mapper接口生成的位置 -->
<!-- xml方式的mapper-->
<!-- <javaClientGenerator type="XMLMAPPER"-->
<!-- 注解方式的mapper-->
<javaClientGenerator type="ANNOTATEDMAPPER"
targetPackage="cn.jxust.srw.campushelper.dao"
targetProject="src/main/java">
<!-- enableSubPackages:是否让schema作为包的后缀 -->
<property name="enableSubPackages" value="false" />
</javaClientGenerator>
<!-- 指定数据库表 -->
<!-- <table schema="" tableName="address"></table>-->
<table schema="" tableName="t_form"></table>
</context>
</generatorConfiguration>
用test程序生成（用main没用）
@Test
public void test1() throws IOException, XMLParserException, InvalidConfigurationException, SQLException, InterruptedException{
List<String> warnings = new ArrayList<String>();
boolean overwrite = true;
File configFile = new File("D:\\Coding\\IntellijProjects\\SSM-Project\\SSM-1\\src\\main\\resources\\mbg.xml");
ConfigurationParser cp = new ConfigurationParser(warnings);
Configuration config = cp.parseConfiguration(configFile);
DefaultShellCallback callback = new DefaultShellCallback(overwrite);
MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
myBatisGenerator.generate(null);
}
在对应的mapper接口中补充
List<Employee> selectByExampleWithDepartment(EmployeeExample example);
Employee selectByPrimaryKeyWithDepartment(Integer employeeId);
在自动生成的mapper的xml文件里面补充
<!--=================补充：带部门的查询=====================-->
<resultMap id="withDepartmentResultMap" type="employee">
<id column="employee_id" property="employeeId"/>
<result column="employee_name" property="employeeName"/>
<result column="gender" property="gender"/>
<result column="email" property="email"/>
<result column="department_id" property="departmentId"/>
<!--分步查询-->
<!--调用departmentmapper中的selectByPrimaryKey来级联合成-->
<association property="department"
select="com.wang.dao.DepartmentMapper.selectByPrimaryKey"
column="department_id"/>
</resultMap>
<sql id="withDepartment_Column_List">
e.employee_id,e.employee_name,e.gender,e.email,e.department_id,d.department_name
</sql>
<!-- List<Employee> selectByExampleWithDepartment(EmployeeExample example);-->
<select id="selectByExampleWithDepartment" resultMap="withDepartmentResultMap" parameterType="com.wang.pojo.EmployeeExample">
select
<if test="distinct">
distinct
</if>
<include refid="withDepartment_Column_List" />
FROM tbl_employee e
LEFT JOIN tbl_department d
ON e.`department_id` = d.`department_id`
<if test="_parameter != null">
<include refid="Example_Where_Clause" />
</if>
<if test="orderByClause != null">
order by ${orderByClause}
</if>
</select>
<!-- Employee selectByPrimaryKeyWithDepartment(Integer employeeId);-->
<select id="selectByPrimaryKeyWithDepartment" resultMap="withDepartmentResultMap" parameterType="com.wang.pojo.EmployeeExample">
select
<include refid="withDepartment_Column_List" />
FROM tbl_employee e
LEFT JOIN tbl_department d
ON e.`department_id` = d.`department_id`
where employee_id = #{employeeId,jdbcType=INTEGER}
</select>
7、进行单元测试
依赖
<!--spring单元测试模块-->
<!-- https://mvnrepository.com/artifact/org.springframework/spring-test -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>5.2.13.RELEASE</version>
</dependency>
spring核心配置文件加入批量操作
<!--创建可以批量操作的sqlSession
注意：这里的template是一个bean工厂，所以class是sqlSessionTemplate，但是放入IOC容器的是SqlSession-->
<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"/>
<!--executorType：执行类型，为批量操作
把这个sqlsessiontemplate传入单元测试中就可以进行批量操作-->
<constructor-arg name="executorType" value="BATCH"/>
</bean>
测试插入
/*单元测试模块：
* 1、需要导入依赖
* 2、用@ContextConfiguration指明配置文件的位置
* 3、直接用@Autowire获取IOC中的实例即可
* */
//junit的注解，表示用哪个单元注解，这里我们用spring的单元注解
@RunWith(SpringJUnit4ClassRunner.class)
//为spring的单元注解指明核心配置文件
@ContextConfiguration(locations = {"classpath:applicationContext.xml"})
public class MapperTest {
@Autowired
DepartmentMapper departmentMapper;
@Autowired
EmployeeMapper employeeMapper;
@Autowired
SqlSession sqlSession;
//添加部门信息
@Test
public void test1(){
int num1 = departmentMapper.insertSelective(new Department(1,"开发部"));
if (num1>1){
System.out.println("开发提交成功");
}
int num2 = departmentMapper.insertSelective(new Department(2,"测试部"));
if (num2>1){
System.out.println("测试部提交成功");
}
}
//测试添加employee
@Test
public void test2(){
Employee employee = new Employee(null, "Jerry", "m", "Jerry@qq.com", 1, null);
int num1 = employeeMapper.insertSelective(employee);
if (num1>0){
System.out.println("提交成功");
}
}
//批量操作
@Test
public void test3(){
EmployeeMapper mapper = sqlSession.getMapper(EmployeeMapper.class);
for (int i=0;i<1000;i++){
String randomString = UUID.randomUUID().toString().substring(1, 5)+i;
int num = mapper.insertSelective(new Employee(null,randomString,"M",randomString+"@qq.com",1));
//会发现下面这部门代码根本不会执行
// if (num>0){
// System.out.println("提交成功");
// }
}
System.out.println("============载入完毕================");
}
}
8、制作页面
现在我们数据库的方面已经搞定，
现在只剩下了页面，和页面的逻辑请求跳转了
步骤：
使用pagehelper插件
依赖
<!--引入pageHelper插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0</version>
</dependency>
在mybatis-config.xml配置文件中配置这个插件
使用bootstrap搭建前端页面
前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
//用request.getContextPath()方法获取当前项目路径
//注意用这个方法得到的路径是：以/开头，但不以/结束
request.setAttribute("APP_PATH",request.getContextPath());
%>
<%--
web路径：
不以/开头的相对路径：找资源，是以当前资源的路径为基准，容器出现问题
而以/开头的相对路径，找资源是以服务器的路径为标准(http://localhost:3306）注意这里不包含加上项目路径
--%>
<%--引入样式--%>
<style href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js" crossorigin="anonymous"/>
<%--引入jquery--%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.5.1.min.js" crossorigin="anonymous"/>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>员工管理系统</title>
</head>
<body>
<%--bootstrap的栅格：
在大容器里面class为container
在里面每一个都为row，每一个都是一行
在每一行里面是细分成了12份，使用对应的class既可选择我们要的格子是占用了多少份的--%>
<%--搭建显示页面--%>
<div class="container">
<%--标题--%>
<div class="row">
<div class="col-md-6">
<h1>员工管理系统</h1>
</div>
</div>
<%--按钮--%>
<div class="row">
<%--按钮需要向右偏移4各格子--%>
<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>employeeName</th>
<th>gender</th>
<th>email</th>
<th>departmentName</th>
<th>操作</th>
</tr>
<tr>
<th>1</th>
<th>q</th>
<th>男</th>
<th>222@oo.com</th>
<th>departmentname</th>
<th>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
编辑
</button>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</th>
</tr>
</table>
</div>
</div>
<%--显示分页信息--%>
<div class="row">
<%--显示文字信息--%>
<div class="col-md-6">
当前记录数：XXXX
</div>
<%--分页条信息--%>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#">首页</a></li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li><a href="#">尾页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>