Crud ssm 小型项目搭建
- 遇到问题
- 创建maven项目时pom文件中<packaging>war</packing>报错
原因:缺少相对应的web.xml文件
解决办法:右击创建的maven项目,选择properties下的Project Facets,先去掉Dynamic web Module,然后再重新添加,添加时注意选择路径.
- index页面打开之后是页面源码,或运行代码无法进入到Controller中
原因:web.xml文件中springmvc.xml文件的作用路径配置错误.
解决办法:修改相应路径.
- @ContextConfiguration无法使用
原因:编写的测试类不在/src/test/java文件下
解决办法:右击项目-选择build path-source-将Contains test source 设置为yes.
Crud 流程
- 创建maven项目
创建成功后,如图所示,pom.xml文件会报错,原因是缺少web.xml文件:
解决办法,如图所示添加web.xml文件:
- 导入相关依赖:
<!-- spring MVC-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.20.RELEASE</version>
</dependency>
<!--spring JDBC 事务控制 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>4.3.20.RELEASE</version>
</dependency>
<!-- spring 面向切面 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>4.3.20.RELEASE</version>
</dependency>
<!-- Mybatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.4</version>
</dependency>
<!-- spring-mybatis 适配 -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.2</version>
</dependency>
<!--数据库,连接池包 -->
<dependency>
<groupId>c3p0</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.1.2</version>
</dependency>
<!--驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<!--jstl servlet-api junit -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.7</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>4.3.17.RELEASE</version>
<scope>test</scope>
</dependency>
<!-- pagehelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.7</version>
</dependency>
<!-- jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.6</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.6</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.6</version>
</dependency>
<!-- JSR303数据校验 -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.0.10.Final</version>
</dependency>
<!-- log4j相关依赖-->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
</dependencies>
- 编写相关配置文件,包括web.xml,spring.xml,springmvc.xml,spring-mybatis.xml等
- web.xml
<!-- spring -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- Bootstraps the root web application context before servlet initialization -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!--spring-mvc 前端控制器 -->
<!-- The front controller of this Spring Web application, responsible for handling all application requests -->
<servlet>
<servlet-name>springDispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Map all requests to the DispatcherServlet for handling -->
<servlet-mapping>
<servlet-name>springDispatcherServlet</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>
- dbconfig.properties
jdbc.jdbcUrl=jdbc:mysql://localhost:3306/ssm_crud?useSSL=true
jdbc.driverClass=com.mysql.jdbc.Driver
jdbc.user=root
jdbc.password=root
- spring.xml
<context:component-scan base-package="com.ssm.maven"></context:component-scan>
<!--spring的配置文件,主要配置和业务逻辑有关的 -->
<!--数据源 事务控制 -->
<context:property-placeholder location="classpath:dbconfig.properties"/>
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="jdbcUrl" value="${jdbc.jdbcUrl}"/>
<property name="driverClass" value="${jdbc.driverClass}"/>
<property name="user" value="${jdbc.user}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<!--mybatis和spring -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:spring-mybatis.xml" />
<property name="mapperLocations"value="classpath:/com/ssm/maven/mapper/*.xml" />
</bean>
<!--配置扫描器:将mybatis接口加入到IOC容器中-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.ssm.maven.mapper" />
</bean>
<!-- 配置批量插入sqlSession -->
<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory" />
<constructor-arg name="executorType" value="BATCH"/>
</bean>
<!-- 配置事务管理器 -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<!--开始基于注解的配置,使用xml配置形式的事务(主要的都是使用配置式) -->
<aop:config>
<aop:pointcut expression="execution(public * com.ssm.maven.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="*"/>
<!-- 切入的所有以get开始的方法都是事务方法 -->
<tx:method name="get" read-only="true"/>
</tx:attributes>
</tx:advice>
- springmvc.xml
<mvc:annotation-driven></mvc:annotation-driven>
<mvc:default-servlet-handler/>
<context:component-scan base-package="com.ssm.maven">
</context:component-scan>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/views/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
- spring-mybatis.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>
<settings>
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
<typeAliases>
<package name="com.ssm.maven.pojo"/>
</typeAliases>
<!-- 分页插件 -->
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<!--使分页信息合理化参数 -->
<property name="reasonable" value="true"/>
</plugin>
</plugins>
</configuration>
- log4j.properties:打印日志
### \u8BBE\u7F6E###
log4j.rootLogger = debug,stdout,D,E
### \u8F93\u51FA\u4FE1\u606F\u5230\u63A7\u5236\u62AC ###
log4j.appender.stdout = org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target = System.out
log4j.appender.stdout.layout = org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern = [%-5p] %d{yyyy-MM-dd HH:mm:ss,SSS} method:%l%n%m%n
- 用mybaties generator生成数据mapper,mapper.xml,pojo文件
参考:
http://www.mybatis.org/generator/running/runningWithJava.html
- 引入bootstrap前端框架
- 查询员工信息编写
- Index页面直接发送ajax请求进行员工分页数据的查询.
- 服务器将查出的数据以json字符串的形式返回给浏览器.
- 浏览器收到json字符串,可以使用js对json进行解析,使用js通过dom增删改,改变页面.
- 返回json实现客户端的无关性.
过程:
首页-发送ajax请求-ajax请求员工json数据-解析json数据-在页面进行展示.
页面展示:
- 增加员工信息
- 在index.jsp页面点击”新增”按钮.
- 去数据库查询部门列表.
- 弹出新增模态框.(参考bootstrap中文文档组件)
<!-- Modal:增加员工模态框 -->
<div class="modal fade" id="myAddModal" 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="myModalLabel">增加员工</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="add_form">
<div class="form-group" >
<label for="empName_input" class="col-sm-2 control-label">empName</label>
<div class="col-sm-10" id="add_empName_div">
<input type="text" name="empName" class="form-control" id="empName_input" placeholder="empName">
</div>
</div>
<div class="form-group">
<label for="email_add" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="email_add" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="gender_input_1" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender_input_2" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="add_select" class="col-sm-2 control-label">deptName</label>
<div class="col-sm-10">
<select class="form-control" name="dId" id="add_select">
</select>
</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="add_save">保存</button>
</div>
</div>
</div>
</div>
- 用户输入数据.
- 点击”保存”按钮,jquery前端校验(用户名是否合法等)或JSR303后端校验(用户名是否合法等),还有后端校验用户名是否重复等.
- 发送ajax请求,完成保存.
页面展示:
注意:
用户名是否重复与用户名合法校验信息统一
模态框关闭之后,再次弹出,信息重置
- 修改员工信息
- 点击”编辑”按钮.
- 在数据库中查询部门信息,填充下拉列表.然后查询员工信息,选择下拉列表内容.
- 弹出更新模态框.
- 修改用户信息,点击”保存”按钮.
- 进行信息校验,发送ajax请求,完成保存.
- 关闭模态框.
- 跳到当前页
页面展示:
注意:
Ajax同步:async:false:ajax发送请求并得到返回结果,再进行下一步
Ajax异步:async:true:ajax发送请求,进行下一步
更新按钮点击事件,发送ajax请求,使用put请求时,需要配置HttpPutFormContentFilter过滤器.
- 删除员工信息
删除单个员工:
- 点击单个删除按钮.
- 弹出是否确认删除.
- 发送ajax请求.
- 删除数据.
- 成功,跳转到最后一页.
页面展示:
删除多个员工:
- 创建复选框,用于多选.
- 点击总删除按钮,弹出是否确认删除.
- 确认,发送ajax请求,删除数据.
- 成功,跳转到最后一页.
页面展示:
注意:
- 对于dom原生的属性,用prop获取属性的值;attr获取自定义属性的值.eg.”checked”属性值的读取和设置,用prop.
- :checked 选择器.匹配所有被选中的复选框.
- 代码
Index.jsp
<%@ 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>Insert title here</title>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.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>
<!-- Modal:增加员工模态框 -->
<div class="modal fade" id="myAddModal" 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="myModalLabel">增加员工</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="add_form">
<div class="form-group" >
<label for="empName_input" class="col-sm-2 control-label">empName</label>
<div class="col-sm-10" id="add_empName_div">
<input type="text" name="empName" class="form-control" id="empName_input" placeholder="empName">
</div>
</div>
<div class="form-group">
<label for="email_add" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="email_add" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="gender_input_1" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender_input_2" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="add_select" class="col-sm-2 control-label">deptName</label>
<div class="col-sm-10">
<select class="form-control" name="dId" id="add_select">
</select>
</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="add_save">保存</button>
</div>
</div>
</div>
</div>
<!-- 员工更新模态框 -->
<div class="modal fade" id="myUpdateModal" 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="myModalLabel">更新员工</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="update_form">
<div class="form-group" >
<label for="empName_input" class="col-sm-2 control-label">empName</label>
<div class="col-sm-10" id="add_empName_div">
<p class="form-control-static" id="update_empName_static"></p>
</div>
</div>
<div class="form-group">
<label for="email_update" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="email_update" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="gender_update_1" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender_update_2" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="update_select" class="col-sm-2 control-label">deptName</label>
<div class="col-sm-10">
<select class="form-control" name="dId" id="update_select">
</select>
</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="update_save">保存</button>
</div>
</div>
</div>
</div>
<!-- 查询列表 -->
<div class=".container">
<div class="row">
<div class="col-md-12" align="center"><h1>员工管理</h1></div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-info" id="add_buttun">增加</button>
<button class="btn btn-danger" id="delete_buttun">删除</button>
</div>
</div>
<div class="row" >
<div class="col-md-12">
<table class="table table-hover" id="emp_table">
<thead>
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>EmpId</th>
<th>EmpName</th>
<th>Gender</th>
<th>Email</th>
<th>Department</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 分页 -->
<div class="row">
<div class="col-md-6" id="page_info"></div>
<div class="col-md-6" id="page_nav"></div>
</div>
</div>
<script type="text/javascript">
//首先进入第一页
var pages;
var currentNum;
$(function(){
to_page(1);
});
//去到第几页
function to_page(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(result){
//alert(1);
emp_table_info(result);
emp_page_info(result);
emp_page_nav(result);
}
});
}
//显示员工列表信息
function emp_table_info(result){
$("#emp_table tbody").empty();
$.each(result.extend.pageInfo.list,function(index,item){
var checked=$("<td></td>").append("<input type='checkbox' class='check_item'>");
var empIdTd=$("<td></td>").append(item.empId);
var empNameTd=$("<td></td>").append(item.empName);
var genderTd=$("<td></td>").append(item.gender==1?'男':'女');
var emailTd=$("<td></td>").append(item.email);
var deptTd=$("<td></td>").append(item.dept.deptName);
var editButtun=$("<buttun></buttun>").addClass("btn btn-info btn-sm edit-bu").append("编辑");
editButtun.attr("edit_id",item.empId);
var delButtun=$("<buttun></buttun>").addClass("btn btn-danger btn-sm del-bu").append("删除");
delButtun.attr("del_id",item.empId);
var operateTd=$("<td></td>").append(editButtun).append(" ").append(delButtun);
$("<tr></tr>").append(checked).append(empIdTd).append(empNameTd).append(genderTd).append(emailTd).append(deptTd).append(operateTd).appendTo($("#emp_table tbody"));
});
}
//页码信息显示
function emp_page_info(result){
$("#page_info").empty();
$("#page_info").append("当前第"+result.extend.pageInfo.pageNum+"页;总共"+result.extend.pageInfo.pages+"页;总共"+result.extend.pageInfo.total+"条记录");
currentNum = result.extend.pageInfo.pageNum;
}
//分页信息显示
function emp_page_nav(result){
$("#page_nav").empty();
var ul = $("<ul></ul>").addClass("pagination");
var firstPage = $("<li></li>").append($("<a></a>").attr("href","#").append("首页"));
var prePage =$("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("«")));
var lastPage = $("<li></li>").append($("<a></a>").attr("href","#").append("末页"));
var nextPage =$("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("»")));
if(result.extend.pageInfo.hasPreviousPage==false){
firstPage.addClass("disabled");
prePage.addClass("disabled");
}else{
firstPage.click(function(){
to_page(1);
});
prePage.click(function(){
to_page(result.extend.pageInfo.pageNum-1);
});
}
ul.append(firstPage).append(prePage);
$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
numli=$("<li></li>").append($("<a></a>").attr("href","#").append(item));
if(item==result.extend.pageInfo.pageNum){
numli.addClass("active");
}else{
numli.click(function(){
to_page(item);
});
}
ul.append(numli);
});
if(result.extend.pageInfo.hasNextPage==false){
nextPage.addClass("disabled");
lastPage.addClass("disabled");
}else{
lastPage.click(function(){
to_page(result.extend.pageInfo.pages);
});
nextPage.click(function(){
to_page(result.extend.pageInfo.pageNum+1);
});
}
ul.append(nextPage).append(lastPage);
ul.appendTo("#page_nav");
}
//获得部门列表
function get_depts(ele){
//清空下拉列表的内容
$(ele).empty();
//发送ajax请求得到部门信息
//{"code":100,"msg":"处理成功!","extend":{"depts":[{"deptId":1,"deptName":"KF"},{"deptId":2,"deptName":"XS"}]}}
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
async : false,
success:function(result){
$.each(result.extend.depts,function(index,item){
$("<option></option>").append(item.deptName).attr("value",item.deptId).appendTo($(ele));
});
}
});
}
//增加用户信息模态框
$("#add_buttun").click(function(){
//重置模态框表单
form_reset("#add_form");
//获得部门列表
get_depts("#add_select");
//弹出模态框
$("#myAddModal").modal({
backdrop:"static"
});
});
//重置模态框表单
function form_reset(ele){
//清空表单内容
$(ele)[0].reset();
//清空错误提示框
$(ele).find("*").removeClass("has-success has-error");
//清空错误提示信息
$(ele).find(".help-block").text("");
}
$("#add_save").click(function(){
//验证表单数据是否输入正确
if(!validate_add_form_empName()){
return false;
}
if(!validate_add_form_email()){
return false;
}
if($("#empName_input").attr("ajax-validate")=="error"){
return false;
}
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#add_form").serialize(),
success:function(result){
//判断状态码
if(result.code==200){
if(result.extend.user_msg.empName != undefined){
add_validate_info("#empName_input","error",result.extend.user_msg.empName);
}
if(result.extend.user_msg.email != undefined){
add_validate_info("#email_add","error",result.extend.user_msg.email);
}
}else if(result.code==100){
//关闭模态框
$("#myAddModal").modal("hide");
//跳到最后一页
to_page(result.extend.pageInfo.pages);
}
}
});
});
//验证表单数据
function validate_add_form_empName(){
eN = /^[a-zA-Z0-9_-]{3,6}$/;
empName = $("#empName_input").val();
if(!eN.test(empName)){
add_validate_info("#empName_input","error","用户名不可用,用户名由3-6位数字和字母组成!");
return false;
}else{
add_validate_info("#empName_input","success","用户名输入正确!");
return true;
}
}
function validate_add_form_email(){
eM = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
email = $("#email_add").val();
if(!eM.test(email)){
add_validate_info("#email_add","error","邮箱格式不正确!");
return false;
}else{
add_validate_info("#email_add","success","邮箱格式正确!");
return true;
}
}
function validate_update_form_email(){
eM = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
email = $("#email_update").val();
if(!eM.test(email)){
add_validate_info("#email_update","error","邮箱格式不正确!");
return false;
}else{
add_validate_info("#email_update","success","邮箱格式正确!");
return true;
}
}
//校验信息
function add_validate_info(ele,status,msg){
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").remove();
if(status=="success"){
$(ele).parent().addClass("has-success");
message = $("<span></span>").addClass("help-block").text(msg);
$(ele).parent().append(message);
}else{
$(ele).parent().addClass("has-error");
message = $("<span></span>").addClass("help-block").text(msg);
$(ele).parent().append(message);
}
}
//验证用户名是否重用
$("#empName_input").change(function(){
//发送ajax请求,判断用户名是否重复
var empName=$("#empName_input").val();
$.ajax({
url:"${APP_PATH}/userCkeck",
type:"GET",
data:"empName="+empName,
success:function(result){
if(result.code==100){
if(validate_add_form_empName()){
$("#empName_input").attr("ajax-validate","success");
}else{
$("#empName_input").attr("ajax-validate","error");
}
}else{
add_validate_info($("#empName_input"),"error","用户名重复,不可用!");
$("#empName_input").attr("ajax-validate","error");
}
}
});
});
$(document).on("click",".edit-bu",function(){
form_reset("#update_form");
//得到部门信息
get_depts($("#update_select"));
//获取当前按钮的id值
var id = $(this).attr("edit_id");
$("#update_save").attr("id",$(this).attr("edit_id"));
//得到要更新的员工信息
get_emp(id);
//弹出模态框
$("#myUpdateModal").modal({
backdrop: "static"
});
/* //发送ajax请求
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"put",
data:$("#update_form").serialize(),
success:function(result){
//弹出模态框
$('#myModal').modal({
backdrop: "static"
});
}
}); */
});
function get_emp(ele){
$.ajax({
url:"${APP_PATH}/emp/"+ele,
type:"GET",
success:function(result){
$("#update_empName_static").append(result.extend.employee.empName);
$("#email_update").val(result.extend.employee.email);
$("#myUpdateModal input[name=gender]").val([result.extend.employee.gender]);
$("#update_select").val(result.extend.employee.dId);
}
});
}
$("#update_save").click(function(){
//判断输入邮箱是否合法
if(!validate_update_form_email()){
return false;
}
console.log($("#update_form").serialize());
//发送ajax请求
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("id"),
type:"PUT",
data:$("#update_form").serialize(),
success:function(result){
//关闭模态框
$("#myUpdateModal").modal('hide');
//跳到当前页
to_page(currentNum);
}
});
});
//点击删除,跳出确认框,确认是否删除?
$(document).on("click",".del-bu",function(){
var del_id = $(this).attr("del_id");
var empName = $(this).parents("tr").find("td:eq(2)").text();
if(confirm("确认删除["+empName+"]吗?")){
$.ajax({
url:"${APP_PATH}/emp/"+del_id,
type:"DELETE",
success:function(result){
to_page(result.extend.pageInfo.pages);
}
});
}
});
//dom原有属性,用prop来返回或设定属性值
$(document).on("click",".check_item",function(){
if($(".check_item:checked").length==$(".check_item").length){
$("#check_all").prop("checked",true);
}else{
$("#check_all").prop("checked",false);
}
});
//点击check_all按钮,页面所有复选框都被选中
$("#check_all").click(function(){
$(".check_item").prop("checked",$(this).prop("checked"));
})
//点击总删除按钮.删除选中的所有数据
$("#delete_buttun").click(function(){
empNames="";
empId="";
$.each($(".check_item:checked"),function(index,item){
empName=$(item).parents("tr").find("td:eq(2)").text();
empNames = empNames+empName+",";
empId = empId + $(item).parents("tr").find("td:eq(1)").text()+",";
});
empNames=empNames.substring(0,empNames.length-1);
empId=empId.substring(0,empId.length-1);
console.log(empId);
if(confirm("确认删除["+empNames+"]吗?")){
$.ajax({
url:"${APP_PATH}/emp/"+empId,
type:"DELETE",
success:function(result){
to_page(result.extend.pageInfo.pages);
}
});
}
});
</script>
</body>
</html>
Msg.java
package com.ssm.maven.pojo;
import java.util.HashMap;
import java.util.Map;
public class Msg {
private Integer code;
private String msg;
private Map<String,Object> extend = new HashMap<String,Object>();
public static Msg success(){
Msg ms=new Msg();
ms.setCode(100);
ms.setMsg("处理成功!");
return ms;
}
public static Msg fail(){
Msg ms=new Msg();
ms.setCode(200);
ms.setMsg("处理失败!");
return ms;
}
public Msg add(String key,Object value) {
this.getExtend().put(key,value);
return this;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
}
MyController.java
package com.ssm.maven.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
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.validation.ObjectError;
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.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.ssm.maven.pojo.Department;
import com.ssm.maven.pojo.Employee;
import com.ssm.maven.pojo.Msg;
import com.ssm.maven.service.MyService;
@Controller
public class MyController {
@Autowired
MyService myService;
@RequestMapping("/testController")
public String testController() {
return "list";
}
/*@RequestMapping("/emps")
public String getEmps(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model) {
System.out.println("dsdsfsdfsdf");
PageHelper.startPage(pn, 5);
List<Employee> emps = myService.getAllEmps();
PageInfo<Employee> page = new PageInfo<Employee>(emps,5);
model.addAttribute("pageInfo",page);
//System.out.println(page.getNavigatepageNums());
return "list";
}*/
/**
* 检查用户名是否重用
* @param empName
* @return
*/
@ResponseBody
@RequestMapping("/userCkeck")
public Msg userCkeck(String empName) {
boolean flag = myService.userCkeck(empName);
if(flag) {
return Msg.success();
}else {
return Msg.fail();
}
}
@ResponseBody
@RequestMapping(value="/emps")
public Msg getEmps(@RequestParam(value="pn",defaultValue="1")Integer pn) {
PageHelper.startPage(pn,5);
List<Employee> emps = myService.getAllEmps();
PageInfo<Employee> list = new PageInfo<Employee>(emps,5);
return Msg.success().add("pageInfo", list);
}
@ResponseBody
@RequestMapping(value="/emp",method=RequestMethod.POST)
public Msg addEmp(@Valid Employee employee,BindingResult result) {
Map<String,Object> map = new HashMap<String,Object>();
if(result.getFieldErrorCount()>0) {
List<FieldError> errors = result.getFieldErrors();
for (FieldError error : errors) {
map.put(error.getField(), error.getDefaultMessage());
}
return Msg.fail().add("user_msg", map);
}else {
myService.addEmp(employee);
PageHelper.startPage(1,5);
List<Employee> emps = myService.getAllEmps();
PageInfo<Employee> page = new PageInfo<Employee>(emps,5);
return Msg.success().add("pageInfo", page);
}
}
@ResponseBody
@RequestMapping(value="/depts",method=RequestMethod.GET)
public Msg getAllDepts() {
List<Department> depts=myService.getAllDepts();
return Msg.success().add("depts", depts);
}
/*@ResponseBody
@RequestMapping(value="/emp/{id}",method=RequestMethod.PUT)
public Msg updateEmpById(@PathVariable("id")Integer id,Employee employee) {
employee.setEmpId(id);
System.out.println(employee.getEmpId());
myService.updateEmp(employee);
System.out.println("3333333333333");
return Msg.success();
}
*/
/**
* 更新员工信息
* 注意从更新模态框的表单中获取的信息中没有empId
* 解决办法:1.将映射地址中携带的参数改为{empId}
* 2.将emoloyee的empId的值设置为映射地址中携带的参数值
* @param employee
* @return
*/
@ResponseBody
@RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)
public Msg updateEmpById(Employee employee) {
myService.updateEmp(employee);
System.out.println("3333333333333");
return Msg.success();
}
@ResponseBody
@RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
public Msg getEmpById(@PathVariable("id")Integer id) {
System.out.println("1111111111");
Employee employee = myService.getEmpById(id);
System.out.println(employee);
return Msg.success().add("employee", employee);
}
/**
* 删除员工信息
* @param id
* @return
*/
@ResponseBody
@RequestMapping(value="/emp/{ids}",method=RequestMethod.DELETE)
public Msg deleteEmpById(@PathVariable("ids") String ids) {
if(ids.contains(",")) {
String[] idl = ids.split(",");
for (String string : idl) {
int id = Integer.parseInt(string);
myService.deleteEmpById(id);
}
}else {
int id = Integer.parseInt(ids);
myService.deleteEmpById(id);
}
PageHelper.startPage(1,5);
List<Employee> emps = myService.getAllEmps();
PageInfo<Employee> page = new PageInfo<Employee>(emps,5);
return Msg.success().add("pageInfo", page);
}
}
MyService.java
package com.ssm.maven.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ssm.maven.mapper.DepartmentMapper;
import com.ssm.maven.mapper.EmployeeMapper;
import com.ssm.maven.pojo.Department;
import com.ssm.maven.pojo.Employee;
import com.ssm.maven.pojo.EmployeeExample;
import com.ssm.maven.pojo.EmployeeExample.Criteria;
@Service
public class MyService {
@Autowired
EmployeeMapper employeeMapper;
@Autowired
DepartmentMapper departmentMapper;
public List<Employee> getAllEmps(){
List<Employee> emps = employeeMapper.selectByExampleWithDept(null);
return emps;
}
public void addEmp(Employee employee) {
// TODO Auto-generated method stub
employeeMapper.insertSelective(employee);
}
public List<Department> getAllDepts() {
// TODO Auto-generated method stub
List<Department> depts = departmentMapper.selectByExample(null);
return depts;
}
/**
* 检查用户名是否可用
* @param empName
* @return
*/
public boolean userCkeck(String empName) {
EmployeeExample example=new EmployeeExample();
Criteria criteria = example.createCriteria();
criteria.andEmpNameEqualTo(empName);
// TODO Auto-generated method stub
long count = employeeMapper.countByExample(example);
if(count==0) {
return true;
}else {
return false;
}
}
/**
* 更新员工信息
* @param employee
*/
public void updateEmp(Employee employee) {
// TODO Auto-generated method stub
employeeMapper.updateByPrimaryKeySelective(employee);
}
public Employee getEmpById(Integer id) {
// TODO Auto-generated method stub
return employeeMapper.selectByPrimaryKeyWithDept(id);
}
public void deleteEmpById(Integer id) {
// TODO Auto-generated method stub
employeeMapper.deleteByPrimaryKey(id);
}
}
EmployeeMapper.java
package com.ssm.maven.mapper;
import com.ssm.maven.pojo.Employee;
import com.ssm.maven.pojo.EmployeeExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;
public interface EmployeeMapper {
long countByExample(EmployeeExample example);
int deleteByExample(EmployeeExample example);
int deleteByPrimaryKey(Integer empId);
int insert(Employee record);
int insertSelective(Employee record);
List<Employee> selectByExample(EmployeeExample example);
Employee selectByPrimaryKey(Integer empId);
List<Employee> selectByExampleWithDept(EmployeeExample example);
Employee selectByPrimaryKeyWithDept(Integer empId);
int updateByExampleSelective(@Param("record") Employee record, @Param("example") EmployeeExample example);
int updateByExample(@Param("record") Employee record, @Param("example") EmployeeExample example);
int updateByPrimaryKeySelective(Employee record);
int updateByPrimaryKey(Employee record);
}
EmployeeMapper.java
package com.ssm.maven.mapper;
import com.ssm.maven.pojo.Employee;
import com.ssm.maven.pojo.EmployeeExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;
public interface EmployeeMapper {
long countByExample(EmployeeExample example);
int deleteByExample(EmployeeExample example);
int deleteByPrimaryKey(Integer empId);
int insert(Employee record);
int insertSelective(Employee record);
List<Employee> selectByExample(EmployeeExample example);
Employee selectByPrimaryKey(Integer empId);
List<Employee> selectByExampleWithDept(EmployeeExample example);
Employee selectByPrimaryKeyWithDept(Integer empId);
int updateByExampleSelective(@Param("record") Employee record, @Param("example") EmployeeExample example);
int updateByExample(@Param("record") Employee record, @Param("example") EmployeeExample example);
int updateByPrimaryKeySelective(Employee record);
int updateByPrimaryKey(Employee record);
}
Department.java
package com.ssm.maven.pojo;
public class Department {
private Integer deptId;
private String deptName;
public Department() {
super();
}
public Department(Integer deptId, String deptName) {
super();
this.deptId = deptId;
this.deptName = deptName;
}
@Override
public String toString() {
return "Department [deptId=" + deptId + ", deptName=" + deptName + "]";
}
public Integer getDeptId() {
return deptId;
}
public void setDeptId(Integer deptId) {
this.deptId = deptId;
}
public String getDeptName() {
return deptName;
}
public void setDeptName(String deptName) {
this.deptName = deptName == null ? null : deptName.trim();
}
}
Employee.java
package com.ssm.maven.pojo;
import javax.validation.constraints.Pattern;
public class Employee {
private Integer empId;
@Pattern(regexp="^[a-zA-Z0-9_-]{3,6}$",message="用户名不可用!!!")
private String empName;
private String gender;
@Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",message="邮箱格式不正确!!!")
private String email;
private Integer dId;
private Department dept;
public Employee() {
super();
}
public Employee(Integer empId, String empName, String gender, String email, Integer dId) {
super();
this.empId = empId;
this.empName = empName;
this.gender = gender;
this.email = email;
this.dId = dId;
}
public Department getDept() {
return dept;
}
public void setDept(Department dept) {
this.dept = dept;
}
public Integer getEmpId() {
return empId;
}
public void setEmpId(Integer empId) {
this.empId = empId;
}
public String getEmpName() {
return empName;
}
public void setEmpName(String empName) {
this.empName = empName == null ? null : empName.trim();
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender == null ? null : gender.trim();
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email == null ? null : email.trim();
}
public Integer getdId() {
return dId;
}
public void setdId(Integer dId) {
this.dId = dId;
}
}