bootstrap+Ajax+SSM(maven搭建)实现增删改查
Posted 野狼谷
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap+Ajax+SSM(maven搭建)实现增删改查相关的知识，希望对你有一定的参考价值。
功能点：
- 分页
- 数据校验
- 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
#u5728u5f00u53d1u73afu5883u4e0bu65e5u5fd7u7ea7u522bu8981u8bbeu7f6eu6210DEBUGuff0cu751fu4ea7u73afu5883u8bbeu7f6eu6210infou6216error
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是关闭的，必须开启 -->
<[email protected] 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="Close">