功能点：
- 分页
- 数据校验
- ajax
- Rest风格的URI：使用HTTP协议请求方式的动词，来表示对资源的操作（GET（查询），POST（新增），PUT（修改），DELETE（删除））
技术点
- 基础框架-ssm
- 数据库mysql
- 前端框架-bootstrap
- 项目依赖 -Maven
- 分页 -pagehelper
- 逆向工程-Mybatis Generator
实现效果
添加按钮弹出模态框
编辑按钮弹出模态框
删除
基础环境搭建
1）新建一个maven工程
生成后的样子
如果发现没有自动生成，在下图maven Project点击刷新按钮
在main下新建一个java文件夹，并且右键make as source root
2）引入项目依赖的jar包
-
springMVC
打开http://mvnrepository.com/
搜索Spring Web MVC
选择了4.3.12.RELEASE
复制里面的内容到pom.xml
-
jdbc
选择同样的版本
-Spring面向切面
同样的版本 -
mybtatis
任意一个版本 -
mybatis整合spring的适配包
-
数据库连接池，驱动包
c3p0要注意不能选错
-
mysql驱动
-
jstl
注意要选对
-
servlet API
整个pom.xml如下：
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.crud</groupId> <artifactId>crud</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>crud Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!--引入项目依赖的jar包 --> <!--SpringMVC、Spring --> <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.3.12.RELEASE</version> </dependency> <!--spring jdbc --> <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.12.RELEASE</version> </dependency> <!--spring面向切面 spring aspect --> <!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>4.3.12.RELEASE</version> </dependency> <!--Mybatis --> <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.4.5</version> </dependency> <!--mybatis和spring整合包 --> <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.0</version> </dependency> <!--c3p0数据库连接池--> <!-- https://mvnrepository.com/artifact/c3p0/c3p0 --> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1.2</version> </dependency> <!--mysql驱动 --> <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>6.0.6</version> </dependency> <!--JSTL --> <!-- https://mvnrepository.com/artifact/jstl/jstl --> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- https://mvnrepository.com/artifact/javax.servlet/servlet-api --> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> </dependencies> <build> <finalName>crud</finalName> </build> </project> 3.引入bootstrap
http://v3.bootcss.com/getting-started/#download
选择最左边的如图所示下载
将下载的内容复制到项目中：
图片.png
将jquery引入项目
在index.html文件中引入样式
<html>
<head>
<!--引入jquery -->
<script src="static/js/jquery-3.2.1.min.js"></script> <!-- 引入样式--> <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <h2>Hello World!</h2> </body> </html> 4.SSM整合部分的配置文件（与02节相同稍作修改即可）
项目架构
1）mybatis
sqlMapConfig.xml
<?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> <!-- 全局setting，根据配置添加--> <!--配置别名--> <typeAliases> <!-- 批量扫描的别名--> <package name="com.chinglee.ssm.pojo"/> </typeAliases> </configuration> 2)spring
applicationContext-dao.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" 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-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!-- 加载db.properties文件中的内容，db.properties文件中key命名要有一定的特殊规则 --> <context:property-placeholder location="classpath:db.properties" /> <!-- 配置数据源 ，dhcp--> <!-- <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close"> <property name="driverClassName" value="${jdbc.driver}" /> <property name="url" value="${jdbc.url}" /> <property name="username" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" /> <property name="maxActive" value="30" /> <property name="maxIdle" value="5" /> </bean> --> <!-- 这里使用c3p0数据源--> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource" destroy-method="close"> <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> <!-- sqlSessionFactory --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 数据库连接池 --> <property name="dataSource" ref="dataSource" /> <!-- 加载mybatis的全局配置文件 --> <property name="configLocation" value="classpath:mybatis/sqlMapConfig.xml" /> </bean> <!-- mapper扫描器 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <!-- 扫描包路径，如果需要扫描多个包，中间使用半角逗号隔开 --> <property name="basePackage" value="com.chinglee.ssm.mapper"></property> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" /> </bean> </beans> applicationContext-service.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" 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-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!-- 用户的service--> <!--<bean id="userService" class="com.chinglee.ssm.serviceImpl.UserServiceImpl"/>--> </beans> applicationContext-transaction.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" 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-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!-- 事务管理器 对mybatis操作数据库控制，spring使用jdbc的事务控制类 --> <bean id="TransactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <!-- 数据源--> <property name="dataSource" ref="dataSource"/> </bean> <!-- 通知--> <tx:advice id="txAdvice" transaction-manager="TransactionManager"> <tx:attributes> <tx:method name="save" propagation="REQUIRED"/> <tx:method name="delete" propagation="REQUIRED"/> <tx:method name="insert" propagation="REQUIRED"/> <tx:method name="update" propagation="REQUIRED"/> <tx:method name="find" propagation="SUPPORTS" read-only="true"/> </tx:attributes> </tx:advice> <!--aop配置 --> <aop:config> <aop:advisor advice-ref="txAdvice" pointcut="execution(* com.changqing.ssm.serviceImpl.*.*(..) )"/> </aop:config> </beans> springmvc.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" 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-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd "> <!--组件扫描 --> <context:component-scan base-package="com.changqing.ssm.controller"/> <!-- mvc注解驱动--> <mvc:annotation-driven></mvc:annotation-driven> <!--视图解析器 解析jsp，默认使用jstl标签，classpath下的需要有jstl包 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!--配置jsp路径的前缀 --> <property name="prefix" value="/WEB-INF/jsp/"/> <!--配置jsp路径的后缀 --> <property name="suffix" value=".jsp"/> </bean> <!--将springMVC不能处理的请求交给tomcat --> <mvc:default-servlet-handler/> </beans> db.properties
jdbc.driver=com.mysql.jdbc.Driver
//换成自己的数据库
jdbc.url=jdbc:mysql://localhost:3306/new_schema
jdbc.username=root
jdbc.password=19940905
log4j.properties
# Global logging configuration
#\u5728\u5f00\u53d1\u73af\u5883\u4e0b\u65e5\u5fd7\u7ea7\u522b\u8981\u8bbe\u7f6e\u6210DEBUG\uff0c\u751f\u4ea7\u73af\u5883\u8bbe\u7f6e\u6210info\u6216error
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <display-name>Archetype Created Web Application</display-name> <!-- 加载spring容器 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/classes/spring/applicationContext-*.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!--springmvc配置前端控制器--> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!--contextConfigLocation配置springmvc 配置springmvc加载的配置文件（配置处理器映射器、适配器等等） --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/springmvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <!-- 第一种：*.action访问以action结尾由DispatcherServlet进行解析 第二种：/，所有访问由DispatcherServlet进行解析，对于静态文件的解析需要配置不让DispatcherServlet进行解析 --> <url-pattern>*.action</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> <!-- 使用REST风格的URI，将页面普通的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> </web-app> 5.逆向工程将user表生成mapper
数据库可以直接导入项目中的user.sql脚本。
user.sql脚本
new_schema数据库
user数据表
6.实现增删改查功能
1）访问index.html页面
2）页面加载完成后执行js脚本，js脚本发起异步请求获取用户数据。
3）UserController接受请求，调用service查出员工数据，然后使用PageHelp插件，将数据分页。将得到的PageInfo对象作为ResponseBody返回。
4）js将获得的数据解析显示到页面。
- index.html页面（参考bootstrap官方文档）
https://v3.bootcss.com/css/#tables
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>用户管理</title> <!--引入jquery --> <script src="./static/js/jquery-3.2.1.js"></script> <!-- 引入样式--> <link rel="stylesheet" href="./static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="./static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="./static/js/index.js"></script> <!--web.xml中如果你用的jsp1.2版本的DTD,默认EL是关闭的，必须开启 --> <!--@ page isELIgnored="false"%--> </head> <body> <!--使用bootstrap搭建页面 --> <div class="container"> <!--标题 --> <div class="row"> <div class="col-md-12"> <h1>用户管理</h1> </div> </div> <!--按钮 --> <div class="row"> <div class="col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8"> <button class="btn btn-primary" id="user_add_modal_btn">新增</button> <button class="btn btn-danger" id="user_delete_all_btn">删除</button> </div> </div> <br> <!--显示表格数据 --> <div class="row"> <div class="table-responsive col-md-12"> <table class="table table-hover" id="users_table"> <thead> <tr> <th> <input type="checkbox" id="check_all"/> </th> <th>流水号</th> <th>姓名</th> <th>性别</th> <th>工号</th> <th>部门</th> <th>权限</th> <th>密码</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <!--显示分页信息 --> <div class="row"> <!--分页文字信息 --> <div class="col-md-6 col-sm-6" id="page_info_area"> 当前第页，总共页，总共条记录 </div> <!--分页导航条信息 --> <div class="col-md-6 col-sm-6" id="page_nav_area"> </div> </div> </div> <!-- 添加用户弹出的模态框 --> <div class="modal fade" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label=