03.bootstrap+Ajax+SSM(maven搭建)实现
2018-02-04 本文已影响464人
Ching_Lee
功能点：
- 分页
- 数据校验
- 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="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="userAddModalLabel">添加用户</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="username" class="form-control" id="userName_add_input" placeholder="姓名2-16位中英文、数字">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="userPassword_add_input"
placeholder="密码是6-18位英文和数字的组合">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="sex" id="sex1_add_input" value="男" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="sex" id="sex2_add_input" value="女"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">工号</label>
<div class="col-sm-10">
<input type="text" name="worknumber" class="form-control" id="worknumber_add_input" placeholder="请输入工号">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">部门</label>
<div class="col-sm-10">
<input type="text" name="department" class="form-control" id="department_add_input" placeholder="请输入部门">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">权限</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="permission" id="permission1_add_input" value="管理员"> 管理员
</label>
<label class="radio-inline">
<input type="radio" name="permission" id="permission2_add_input" value="普通用户" checked="checked"> 普通用户
</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="user_save_btn">保存</button>
</div>
</div>
</div>
</div>
<!--修改用户弹出的模态框 -->
<div class="modal fade" id="userReviseModal" 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"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="userReviseModalLabel">修改用户</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" name="username" class="form-control" id="userName_revise_input" placeholder="姓名是2-5位中文或6-16位英文和数字的组合">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="userPassword_revise_input"
placeholder="密码是6-18位英文和数字的组合">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="sex" id="sex1_revise_input" value="男" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="sex" id="sex2_revise_input" value="女"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">工号</label>
<div class="col-sm-10">
<input type="text" name="worknumber" class="form-control" id="worknumber_revise_input" placeholder="请输入工号">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">部门</label>
<div class="col-sm-10">
<input type="text" name="department" class="form-control" id="department_revise_input" placeholder="请输入部门">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">权限</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="permission" id="permission1_revise_input" value="管理员"> 管理员
</label>
<label class="radio-inline">
<input type="radio" name="permission" id="permission2_revise_input" value="普通用户" checked="checked"> 普通用户
</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="user_revise_btn">修改</button>
</div>
</div>
</div>
</div>
</body>
</html>
-
创建UserServce接口及实现类UserServiceImpl
UserService接口中定义查询用户的方法：
public interface UserService {
public List<User> getAllUser();
void saveUser(User user);
Boolean checkUserName(String userName);
void updateUser(User user);
void deleteUser(Integer id);
void deleteBatchUser(List<Integer> useridList);
}
UserServiceImpl实现UserService接口
public class UserServiceImpl implements UserService {
@Autowired
UserMapper userMapper;
/*
查询所有员工
*/
public List<User> getAllUser() {
return userMapper.selectByExample(null);
}
/**
* 保存员工信息
* @param user
*/
public void saveUser(User user) {
userMapper.insertSelective(user);
}
/**
* 校验用户名是否存在
* @param userName
* 数据库没有这条记录，count==0，返回true
*/
public Boolean checkUserName(String userName) {
UserExample example=new UserExample();
UserExample.Criteria criteria=example.createCriteria();
criteria.andUsernameEqualTo(userName);
long count=userMapper.countByExample(example);
return count==0;
}
/**
* 员工更新方法
* @param user
*/
public void updateUser(User user) {
userMapper.updateByPrimaryKeySelective(user);
}
/**
* 员工删除方法（单个）
* @param id
*/
public void deleteUser(Integer id) {
userMapper.deleteByPrimaryKey(id);
}
/**
* 员工批量删除
* @param useridList
*/
public void deleteBatchUser(List<Integer> useridList) {
UserExample example=new UserExample();
UserExample.Criteria criteria=example.createCriteria();
criteria.andUseridIn(useridList);
userMapper.deleteByExample(example);
}
}
- 引入分页插件
在pom.xml中引入分页所需的包
<!--引入分页插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
<!--
报错org.apache.ibatis.binding.BindingException
如果你的项目是maven项目，请你在编译后，到接口所在目录看一看，
很有可能是没有生产对应的xml文件，因为maven默认是不编译的，因此，
你需要在你的pom.xml的<build></build>里面，加这么一段：-->
<build>
<finalName>crud</finalName>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
<filtering>true</filtering>
</resource>
</resources>
</build>
sqlMapConfig中添加分页插件
<!--引入分页插件 -->
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<!--分页合理化 -->
<property name="reasonable" value="true"/>
</plugin>
</plugins>
-
UserController控制器实现
/**
* 处理员工的增删改查
*/
@Controller
public class UserController {
@Autowired
private UserService userService;
/**
* 使用Ajax方式，返回json数据,获得所有数据库用户信息
* @param pn
* @return
* 需要引入jackson包
*/
@RequestMapping(value = "/users",method = RequestMethod.GET)
@ResponseBody
public Msg getUsersWithJson(@RequestParam(value = "pn",defaultValue="1")Integer pn){
//这是一个分页查询
//引入PageHelp分页插件
//在查询之前只需要调用，传入页码，以及每页的大小
PageHelper.startPage(pn,8);
//startPage后面紧跟的查询就是分页查询
List<User> userList= userService.getAllUser();
//使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。
//封装了详细的分页信息,传入连续显示的页数
PageInfo pageInfo=new PageInfo(userList,5);
return Msg.sucess().add("pageInfo",pageInfo);
}
/**
* 用户保存
* @return
*/
@RequestMapping(value = "/users",method = RequestMethod.POST)
@ResponseBody
public Msg saveUser(@Valid User user, BindingResult result){
if(result.hasErrors()){
//校验失败，返回失败，模态框中显示失败
Map<String,Object> map=new HashMap<String,Object>();
List<FieldError> errors=result.getFieldErrors();
for(FieldError fieldError:errors){
System.out.println("错误的字段名"+fieldError.getField());
System.out.println("错误信息"+fieldError.getDefaultMessage());
map.put(fieldError.getField(),fieldError.getDefaultMessage());
}
return Msg.fail().add("errorFields",map);
}else {
userService.saveUser(user);
return Msg.sucess();
}
}
/**
* 校验用户名
*/
@RequestMapping(value = "/checkUser")
@ResponseBody
public Msg checkUserName(@RequestParam("userName") String userName){
boolean b=userService.checkUserName(userName);
if(b){
return Msg.sucess();
}else {
return Msg.fail();
}
}
/**
* 修改员工信息（更新）
*/
@RequestMapping(value = "/users/{userid}",method = RequestMethod.PUT)
@ResponseBody
public Msg updateUser(User user){
System.out.print(user);
userService.updateUser(user);
return Msg.sucess();
}
/**
* 删除员工信息
*
*/
@RequestMapping(value = "/users/{del_idstr}",method = RequestMethod.DELETE)
@ResponseBody
public Msg deleteUser(@PathVariable("del_idstr")String del_idstr){
//批量删除
if(del_idstr.contains("-")){
List<Integer> useridList=new ArrayList<Integer>();
String[] str_ids=del_idstr.split("-");
for(String id_str:str_ids){
useridList.add(Integer.parseInt(id_str));
}
userService.deleteBatchUser(useridList);
}
//单个删除
else {
Integer userid=Integer.parseInt(del_idstr);
userService.deleteUser(userid);
}
return Msg.sucess();
}
}
Msg类：表示返回的json信息
/**
* 返回json格式数据通用类
*/
public class Msg {
//状态码 100-成功 200-失败
private int code;
//提示信息
private String message;
//用户要返回给浏览器的数据
private Map<String,Object> extend=new HashMap<String, Object>();
public static Msg sucess(){
Msg result=new Msg();
result.setCode(100);
result.setMessage("处理成功");
return result;
}
public static Msg fail(){
Msg result=new Msg();
result.setCode(200);
result.setMessage("处理失败");
return result;
}
public Msg add(String key,Object value){
this.getExtend().put(key,value);
return this;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
}
- index.js实现
//1.页面加载完成之后发送Ajax请求，要到分页数据
$(function () {
var totalRecord,currentPage;
//显示第一页
to_page(1);
//添加员工
addUser();
//修改用户
reviseUser();
//单个删除用户
deleteUser();
//批量删除
deleteSomeUser();
/**
* 1.实现用户信息展示
* @param pn
*/
//显示员工信息
function to_page(pn) {
$.ajax({
url: "/users.action",
data: "pn=" + pn,
type: "GET",
success: function (result) {
//1.解析并显示员工数据
build_users_table(result);
//2.解析并显示分页信息
build_page_info(result);
//3.解析并显示分页条数据
build_page_nav(result);
}
})
}
//解析并显示员工数据表
function build_users_table(result) {
//清空table表格
$("#users_table tbody").empty();
var users = result.extend.pageInfo.list;
//遍历元素users
$.each(users, function (index, item) {
var checkBox=$("<td><input type='checkbox' class='check_item'/></td>");
var userId = $("<td></td>").append(item.userid);
var userName = $("<td></td>").append(item.username);
var password = $("<td></td>").append(item.password);
var permission = $("<td></td>").append(item.permission);
var depatment = $("<td></td>").append(item.department);
var worknumber = $("<td></td>").append(item.worknumber);
var sex = $("<td></td>").append(item.sex);
var button1 = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>").addClass("glyphicon glyphicon-pencil").attr("aria-hidden", true)).append("编辑");
var button2 = $("<button></button>").addClass("tn btn-danger btn-sm delete_btn").append($("<span></span>").addClass("glyphicon glyphicon-trash").attr("aria-hidden", true)).append("删除");
var td_btn = $("<td></td>").append(button1).append(" ").append(button2);
$("<tr></tr>").append(checkBox).append(userId).append(userName).append(sex).append(worknumber).append(depatment)
.append(permission).append(password).append(td_btn ).appendTo("#users_table tbody");
})
}
//解析显示分页信息
function build_page_info(result) {
$("#page_info_area").empty();
$("#page_info_area").append("当前" + result.extend.pageInfo.pageNum + "页,总共" + result.extend.pageInfo.pages +
"页，总共" + result.extend.pageInfo.total + "条记录");
totalRecord = result.extend.pageInfo.total;
currentPage=result.extend.pageInfo.pageNum;
}
//解析显示分页导航条
function build_page_nav(result) {
$("#page_nav_area").empty();
var ul = $("<ul></ul>>").addClass("pagination");
var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("«").attr("href", "#"));
var nextPageLi = $("<li></li>").append($("<a></a>").append("»").attr("href", "#"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
//如果没有前一页，前一页和首页就不能点
if (result.extend.pageInfo.hasPreviousPage == false) {
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
} else {
//首页
firstPageLi.click(function () {
to_page(1);
});
prePageLi.click(function () {
to_page(result.extend.pageInfo.pageNum - 1);
});
}
if (result.extend.pageInfo.hasNextPage == false) {
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
} else {
//构建点击事件
nextPageLi.click(function () {
to_page(result.extend.pageInfo.pageNum + 1);
});
lastPageLi.click(function () {
to_page(result.extend.pageInfo.lastPage);
})
}
//添加首页和前一页
ul.append(firstPageLi).append(prePageLi);
//遍历添加页码
$.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#"));
//如果是当前选中页面，添加active标识
if (result.extend.pageInfo.pageNum == item) {
numLi.addClass("active");
}
//给每个页码添加点击就跳转
numLi.click(function () {
to_page(item);
});
ul.append(numLi);
});
//添加下一页和末页
ul.append(nextPageLi).append(lastPageLi);
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
/**
* 2.实现新增功能
* @returns {boolean}
*/
function addUser() {
//为新增按钮添加modal
$("#user_add_modal_btn").click(function () {
//清除表单数据
$("#userAddModal form")[0].reset();
$("#userName_add_input").next("span").text("");
$("#userAddModal").modal({
backdrop: "static"
})
});
//校验该用户是否存在,如果存在就不能添加该用户
$("#userName_add_input").change(function () {
var userName = $("#userName_add_input").val();
//发送Ajax请求校验姓名是否可用
$.ajax({
url: "/checkUser.action",
data: "userName=" + userName,
type: "GET",
success: function (result) {
//表示成功，用户名可用
if (result.code == 100) {
show_validate_msg($("#userName_add_input"), "success", "");
//为保存按钮添加属性
$("#user_save_btn").attr("ajax-va", "success");
} else if (result.code == 200) {
show_validate_msg($("#userName_add_input"), "error", "该员工姓名已存在");
$("#user_save_btn").attr("ajax-va", "error");
}
}
})
});
//保存用户信息
$("#user_save_btn").click(function () {
//先校验表单信息
if (!validate_form( $("#userName_add_input"),$("#userPassword_add_input"),$("#worknumber_add_input"))) {
return false;
}
//1.判断之前的ajax用户名校验是否成功
if ($(this).attr("ajax-va") == "error") {
return false;
}
//2.发送ajax请求保存员工
$.ajax({
url: "/users.action",
type: "POST",
data: $("#userAddModal form").serialize(),
success: function (result) {
//员工保存成功(后端校验)
if (result.code == 100) {
//1.关闭modal框
$("#userAddModal").modal('hide');
//2.来到最后一页，显示刚才保存的数据
to_page(totalRecord);
} else {
//显示失败信息(后端校验)
if (result.extend.errorFields.username != undefined) {
show_validate_msg($("#userName_add_input"), "error", result.extend.errorFields.username);
}
if (result.extend.errorFields.password != undefined) {
show_validate_msg($("#userPassword_add_input"), "error", result.extend.errorFields.password);
}
if (result.extend.errorFields.worknumber != undefined) {
show_validate_msg($("#worknumber_add_input"), "error", result.extend.errorFields.worknumber);
}
}
}
});
});
}
//校验表单信息是否满足正则要求
function validate_form(Name_ele,password_ele,worknumber_ele) {
//1.拿到要校验的数据，使用正则表达式
//校验姓名
var userName = Name_ele.val();
//|(^[\u2E80-\u9FFF]{2,5})
var regName = /^[a-zA-Z0-9\u2E80-\u9FFF]{2,16}$/;
//如果验证失败
if (!regName.test(userName)) {
show_validate_msg(Name_ele, "error", "姓名2-16位中英文、数字");
return false;
} else {
show_validate_msg(Name_ele, "success", "");
}
//检验密码
var password = password_ele.val();
var regPass = /^[a-zA-Z0-9_-]{6,18}$/;
if (!regPass.test(password)) {
show_validate_msg(password_ele, "error", "密码是6-18位英文、数字");
return false;
} else {
show_validate_msg(password_ele, "success", "");
}
//检验工号
var workNumber =worknumber_ele.val();
var regWork = /^[a-zA-Z0-9]{3,18}$/;
if (!regWork.test(workNumber)) {
show_validate_msg(worknumber_ele, "error", "工号是3-18位英文、数字");
return false;
} else {
show_validate_msg(worknumber_ele, "success", "");
}
return true;
}
//显示校验提示信息
function show_validate_msg(ele, status, msg) {
//清除当前元素校验状态
$(ele).parent().removeClass("has-error has-success");
$(ele).next("span").text("");
if (status == "error") {
ele.parent().addClass("has-error");
ele.next("span").text(msg);
} else if (status == "success") {
ele.parent().addClass("has-success");
ele.next("span").text(msg);
}
}
/**
* 3.修改用户
*/
function reviseUser() {
//为编辑按钮绑定弹出modal框事件
//1.因为在按钮创建之前就绑定了click，所以用普通click方法绑定不上
$(document).on("click",".edit_btn",function () {
//清除表单数据
$("#userReviseModal form")[0].reset();
$("#userName_revise_input").next("span").text("");
//修改框中用户信息回显
var id= $(this).parent().parent().children("td").eq(1).text();
//将id的值传递给修改按钮的属性，方便发送Ajax请求
$("#user_revise_btn").attr("edit-id",id);
var name=$(this).parent().parent().children("td").eq(2).text();
var sex=$(this).parent().parent().children("td").eq(3).text();
var worknumber=$(this).parent().parent().children("td").eq(4).text();
var depart=$(this).parent().parent().children("td").eq(5).text();
var permission=$(this).parent().parent().children("td").eq(6).text();
var password=$(this).parent().parent().children("td").eq(7).text();
$("#userName_revise_input").val(name);
$("#worknumber_revise_input").val(worknumber);
$("#department_revise_input").val(depart);
$("#userPassword_revise_input").val(password);
$("#userReviseModal input[name=sex]").val([sex]);
$("#userReviseModal input[name=permission]").val([permission]);
$("#userReviseModal").modal({
backdrop: "static"
})
});
//2.为模态框中的修改按钮绑定事件，更新员工信息
$("#user_revise_btn").click(function () {
//1.更新之前进行表单验证,验证没通过就直接返回
if(!validate_form( $("#userName_revise_input"),$("#userPassword_revise_input"),$("#worknumber_revise_input"))){
return false;
}
//2.验证通过后发送ajax请求保存更新的员工数据
//如果要直接发送PUT之类的请求
//在WEB.xml配置HttpPutFormContentFilter过滤器即可
//这里未使用如上所述方法
$.ajax({
url:"/users/"+$(this).attr("edit-id")+".action",
type:"POST",
data:$("#userReviseModal form").serialize()+"&_method=PUT",
success:function (result) {
//1.关闭modal框
$("#userReviseModal").modal('hide');
//2.来到当前页，显示刚才保存的数据
to_page(currentPage);
}
})
})
}
/**
* 4.删除用户
*/
function deleteUser() {
$(document).on("click",".delete_btn",function () {
//1.弹出确认删除对话框
var username=$(this).parents("tr").find("td:eq(2)").text();
var userid=$(this).parents("tr").find("td:eq(1)").text();
if(confirm("确认删除【"+username+"】吗？")){
//确认，发送ajax请求删除
$.ajax({
url:"/users/"+userid+".action",
type:"DELETE",
success:function (result) {
alert(result.message);
to_page(currentPage);
}
})
}
})
}
/**
* 5.批量删除
*/
function deleteSomeUser() {
//1.实现全选全不选
//attr获取checked是undefined
//对于dom原生的属性要用prop读取和修改
$("#check_all").click(function () {
$(".check_item").prop("checked",$(this).prop("checked"));
})
//check_item
$(document).on("click",".check_item",function () {
//判断当前选中的条目个数
var flag= $(".check_item:checked").length==$(".check_item").length;
$("#check_all").prop("checked",flag);
})
//为批量删除按钮添加点击事件
$("#user_delete_all_btn").click(function () {
var userNames="";
var del_idstr="";
$.each($(".check_item:checked"),function () {
userNames+=$(this).parents("tr").find("td:eq(2)").text()+",";
//组装员工id字符串
del_idstr+=$(this).parents("tr").find("td:eq(1)").text()+"-";
});
userNames=userNames.substring(0,userNames.length-1);
del_idstr=del_idstr.substring(0,del_idstr.length-1);
if(confirm("确认删除【"+userNames+"】吗")){
//发送Ajax请求
$.ajax({
url:"/users/"+del_idstr+".action",
type:"DELETE",
success:function (result) {
alert(result.message);
to_page(currentPage);
}
});
}
})
}
});
