SpringMVC-Boot校园商铺-1-搭建maven-web工程并修改动态web版本

一、搭建maven-web工程

1、maven 建项目的时候选择 webapp。然后对话框选择 groupID:就是公司名。artifactID:就是项目名。

2、添加依赖项,比如build path 中 add library –> server runtime

3、在pom.xml中配置jdk编译版本

<build>
<finalName>o2o</finalName>
<plugins>
	<plugin>
		<!-- 指定maven编译的jdk版本,如果不指定,maven3默认用jdk 1.5 maven2默认用jdk1.3 -->
		<groupId>org.apache.maven.plugins</groupId>
		<artifactId>maven-compiler-plugin</artifactId>
		<version>3.6.1</version>
		<configuration>
		   <!-- 一般而言,target与source是保持一致的,但是,有时候为了让程序能在其他版本的jdk中运行(对于低版本目标jdk,源代码中不能使用低版本jdk中不支持的语法),会存在target不同于source的情况 -->                    
			<souce>1.8</souce> <!-- 源代码使用的JDK版本 --> 
			<target>1.8</target><!-- 需要生成的目标class文件的编译版本 -->  
			<encoding>UTF8</encoding><!-- 字符集编码 -->
		</configuration>
	</plugin>
</plugins>
</build>

4、补全工程文件夹和输出位置。maven工程有四个文件夹:

main/resources main/java 编译输出目录:target/classes
test/resources test/java 编译输出目录:target/test-classes
(新创建的test/resources目录,记得要修改一下输出目录)

5、在maven项目中,选中项目右键属性,有个project facets,里面有一个Dynamic web module,将动态网站版本改成3.1。这里eclipse有一个bug,无法修改。需要修改项目文件夹目录,找到.setting隐藏文件夹,编辑文件org.eclipse.wst.common.project.facet.core.xml

<?xml version="1.0" encoding="UTF-8"?>
 <faceted-project> 
<fixed facet="wst.jsdt.web"/> 
<installed facet="java" version="1.7"/> 
<installed facet="jst.web" version="3.1"/> 
<installed facet="wst.jsdt.web" version="1.0"/>
 </faceted-project>

facet=”jst.web” version=”3.1″ 这个2.3值改成3.1后,还需要将web.xml的2.3版本改一下:

<!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> 
<display-name>Archetype Created Web Application</display-name> 
</web-app>

修改成下面这个3.1动态网站版本:

<?xml version="1.0" encoding="UTF-8"?>
 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
 <display-name>Archetype Created Web Application</display-name> 
</web-app>

SSM小项目-(11)-项目总结与正确的Maven项目架构

编码管理方便统一:

标签中的类名:取-
标签中的id:取_

一、项目总结

 

二、Maven项目打包

Eclipse 中 右键项目 run as ==>  maven install ==>可以打包成 war 项目包。
但是因为之前设置的目录有问题,所以打包时,说找不到 web.xml 配置文件。
正确的maven项目目录是:

三、发布项目到Tomcat

四、WAR包的目录结构

首先:maven的web工程中:src/main下面有三个文件夹

1、项目根地址/src/main/java   里面包含的就是一些类文件

2、项目根地址/src/main/resource  里面包含的就是一些资源文件

3、项目根地址/src/main/webapp 里面包含的就是一些前端代码和资源

其中1和2 最终会整合到webapp/WEB-INF/classes目录下。并且项目依赖的jar包,最终会整合到webapp/WEB-INF/lib目录下。至于webapp下面的META-INF目录,里面更新的文件不是很重要。原本就有一个MANIFEST.MF(清单文件,内容如下)

Manifest-Version: 1.0
Class-Path:

后来maven打包后,又添加了一个maven文件夹,里面是公司名文件夹–>项目名文件夹–>【pom.properties,pom.xml】

pom.properties里面的具体内容如下:

#Generated by Maven
#Wed Jul 5 13:12:07 CST 2018
version=0.0.1-SNAPSHOT
groupId=yyy(也就是公司名)
artifactId=xxx(也就是项目名)

 

SSM小项目-(10)-删除雇员模块及本项目总结

注意在目前了解到的所有的js操作中:
//只有下面的方法,查找有  点+类名 ,比如【.edit-btn】  这个算标签内的自定义属性
//其他地方,查找类名,都不需要添加 . 号 【原因就是  .  代表查找同类名的所有元素 】
$(document).on("click",".edit-btn",function(){      });

一、单个删除

1、前端代码

// delete-btn 这个是在一开始展示表格信息的时候,就已经添加了。
$(document).on("click",".delete-btn",function(){
			
	//弹出是否确认删除对话框
	//alert($(this).parents("tr").find("td:eq(1)").text());
         var empName = $(this).parents("tr").find("td:eq(1)").text()
	 var empId = $(this).attr("delete-id");
         if(confirm("确认删除【"+empName+"】")){
				
		$.ajax({
				url:"${APP_PATH}/emp/"+empId,
				type:"delete",
				success:function(result){
					alert(result.msg);
					to_page(g_currentPage);
				}
			});
	}
		    
		  
});

2、后端代码

EmployeeController.java

@ResponseBody
@RequestMapping(value="/emp/{id}",method=RequestMethod.DELETE)
public Msg deleteByEmpId(@PathVariable("id") int id){
	employeeService.deleteEmp(id);
	return Msg.success();
}

EmployeeService.java

/**
 * 根据id 删除用户
 * @param id
 */
public void deleteEmp(int id) {
	// TODO Auto-generated method stub
	employeeMapper.deleteByPrimaryKey(id);	
}

二、批量删除

1、前端代码

(1)添加checkbox  勾选功能

<!-- 显示表格数据 -->
<div class="row">
	<div class="col-md-12">
		<table class="table table-hover" id="emps_table">
			<thead>
				<tr>
					<th> <input type="checkbox" id="check_all" /></th>
				        <th>#</th>
					<th>empName</th>
					<th>gender</th>
					<th>email</th>
					<th>deptName</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
	</div>
</div>
function build_emps_table(result) {
	//清空table表格,如果不请空,下一次请求时,数据会在原来的基础上,不断添加。
	$("#emps_table tbody").empty();
			
	var emps = result.extend.pageInfo.list;
	$.each(emps, function(index, item) {
		//alert(item.empName);
				
		//构建单元格
		var checkBoxTd = $("<td><input type='checkbox' class='check-item' /></td>");
		var empIdTd = $("<td></td>").append(item.empId);
		var empNameTd = $("<td></td>").append(item.empName);
		var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
		var emailTd = $("<td></td>").append(item.email);
		var deptNameTd = $("<td></td>").append(item.department.deptName);				
		/**
		<button class="btn btn-primary btn-sm">
			<i class="icon-edit icon-large"></i> 编辑
		</button>
		<button class="btn btn-danger btn-sm">
			<i class="icon-trash icon-large"></i> 删除
		</button>
		**/
	var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit-btn")
			.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
        //为编辑按钮添加一个自定义的属性,来表示当前员工id
        editBtn.attr("edit-id",item.empId);
                
        var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete-btn")
				.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
        //为删除按钮添加一个自定义的属性来表示当前删除的员工id
        delBtn.attr("delete-id",item.empId);
        var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

                //append方法执行完成以后还是返回原来的元素
	$("<tr></tr>")
                .append(checkBoxTd)
                .append(empIdTd)
		.append(empNameTd)
		.append(genderTd)
		.append(emailTd)
		.append(deptNameTd)
		//.append(editBtn)
		//.append(delBtn)
		.append(btnTd)
		.appendTo("#emps_table tbody");
				
	});
}

(2)添加勾选逻辑

//完成全选、全不选功能
$("#check_all").click(function(){
			
	/***
	//获取id为p的标签的属性值
        $('#p').attr('class')
        //如果存在就是修改,如果不存在就是添加
        $('#p').attr('class','red')
        // 删除某个属性
        $('#p').removeAttr('name')
        //添加class名称
        $('#p').addClass('blue')
        //删除class名称
        $('#p').removeClass('yellow')
        //有class就删除 没有就添加
        $('#p').toggleClass('asdf')
        //val()获取输入框内容
        var s = $('input[name="user"]').val()
	***/
			
	// attr获取checked是undefined;
	// alert($(this).attr("checked"));  弹出的是 undefined
	// 用prop修改和读取dom原生属性的值;用attr获取自定义属性的值;这样就不容易出错			
	// alert($(this).prop("checked")); 
        // 可以正常弹出结果,也就是说:$(this).prop("checked") 返回是否选中的  true or false
	// 设置 是否 checked  $(this).prop("checked",true/false)
			
	//设置全选和全不选
	$(".check-item").prop("checked",$(this).prop("checked"));
});
		
//check_item 触发回调函数
$(document).on("click",".check-item",function(){
	//判断当前选择中的元素是否5个
	var flag = $(".check-item:checked").length==$(".check-item").length;
	$("#check_all").prop("checked",flag);
});
		
//点击全部删除,就是批量删除
$("#emp_delete_all_btn").click(function(){			
			
	var empNames ="";
	//组织员工id字符串
	var delete_ids_str="";
			
	$.each($(".check-item:checked"),function(){
		empNames = empNames+$(this).parents("tr").find("td:eq(2)").text() +",";
	        delete_ids_str += $(this).parents("tr").find("td:eq(1)").text() +"-";
	});
			
	//去除empNames多余的,
	empNames = empNames.substring(0,empNames.length-1);
	//去除删除的id的多余的-
	delete_ids_str = delete_ids_str.substring(0,delete_ids_str.length-1);
			
	if(confirm("确认删除【"+empNames+"】?")){
	//发送ajax请求
	 $.ajax({
			url:"${APP_PATH}/emp/"+delete_ids_str,
			type:"delete",
			success:function(result){
				alert(result.msg);
				to_page(g_currentPage);
			}
		});
	}
});

(3)后端处理逻辑

EmployeeController.java

 /**
  * 单个、批量 删除二合一,
  * 批量删除 1-2-3
  * 单个删除 1
  * 
  * @param ids
  * @return
  */
@ResponseBody
@RequestMapping(value="/emp/{ids}",method=RequestMethod.DELETE)
public Msg deleteByEmpId(@PathVariable("ids") String ids){
	//批量删除
	if(ids.contains("-")){
	       List<Integer> delete_id = new ArrayList<>() ;
               String[] str_ids = ids.split("-");
               for (String str :str_ids) {
            	   delete_id.add(Integer.parseInt(str));
		}
		employeeService.deleteBatch(delete_id);

	}else{
		int id = Integer.parseInt(ids);
		employeeService.deleteEmp(id);
	}
	return Msg.success();
}

EmployeeService.java

/**
 * 
 * @param ids
 */
public void deleteBatch(List<Integer> ids) {
	
        // TODO Auto-generated method stub
	EmployeeExample example = new EmployeeExample();
	Criteria criteria = example.createCriteria();
        //delete  from  xxx where emp_id in (1,2,3)
	criteria.andEmpIdIn(ids);
        employeeMapper.deleteByExample(example);
		
}

 

springmvc原理-POJO对象是如何赋值的及PUT请求如何赋值

SpringMVC封装POJO对象的时候,会调用request.getParamter(“属性名”) 并赋值给 POJO中每个属性。


在Tomcat 服务器中:

如果是POST请求:
1、会将请求体中的数据,封装一个map。
2、request.getParameter(“empName”)就会从这个map中取值。
3、SpringMVC封装POJO对象的时候,会调用request.getParamter(“属性名”) 并赋值给 POJO中每个属性。

如果是PUT请求:
Tomcat一看是PUT不会封装请求体中的数据为map,只有POST形式的请求才封装请求体为map
所以请求体中的数据,request.getParameter(“empName”)拿不到。

下面是Tomcat源代码的处理逻辑,只有post请求,才能封装请求体为map对象。

 * org.apache.catalina.connector.Request(类名)--parseParameters(方法名) (3111行);
	 * 
	 * protected String parseBodyMethods = "POST";
	 * if( !getConnector().isParseBodyMethod(getMethod()) ) {
                success = true;
                return;
            }
	 *

 put传递数据解决方案

我们要能支持直接发送PUT之类的请求还要封装请求体中的数据
1、配置上HttpPutFormContentFilter;
2、他的作用;将请求体中的数据解析包装成一个map。
3、request被重新包装,request.getParameter()被重写,就会从自己封装的map中取数据

在web.xml中配置过滤器,

<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>

大致的原理就是:

HttpServletRequest 本来就是 一个接口,在之前的接口实现类中,我们又添加了HttpPutFormContentFilter对象,并重写了 之前接口实现类的getParameter方法,该方法内部调用的是 HttpPutFormContentFilter 里面的方法。

SSM小项目-(9)-修改雇员模块

注意在目前了解到的所有的js操作中:
//只有下面的方法,查找有  点+类名 ,比如【.edit-btn】   这个算标签内的自定义属性。
//其他地方,查找类名,都不需要添加 . 号  【原因就是  .  代表查找同类名的所有元素 】
$(document).on("click",".edit-btn",function(){      });

一、思路概述:

0、新建了一个  全局变量 当前页码信息,当保存提交时,显示的 还是当前页码。

1、get deps方法中   ajax 的异步和同步问题  获取部门请求,会影响更新操作前 获取员工信息,并赋值给 select 的dep 部门。两个都是 异步操作,容易出现提前赋值 select ,后在出现 select 部门选项

2、//2、发送ajax请求保存更新的员工数据   添加 _method
			$.ajax({
				url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
				type:"post",
				data:$("#empUpdateModal form").serialize()+"&_method=put",
				success:function(result){
				
这样做会来到,web.xml 中的过滤器

<!-- 使用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>



3、	@RequestMapping(value="/emp/{id}”,method=RequestMethod.PUT)
        改成
	@RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)

4、如果改成 ajax 的 put 方法,则不需要在data中添加 "&_method=put" ,但是  tomcat 无法封装 请求体,导致 报错。
* 原因:
	 * Tomcat:
	 * 		1、将请求体中的数据,封装一个map。
	 * 		2、request.getParameter("empName")就会从这个map中取值。
	 * 		3、SpringMVC封装POJO对象的时候。
	 * 				会把POJO中每个属性的值,request.getParamter("email");
	 * AJAX发送PUT请求引发的血案:
	 * 		PUT请求,请求体中的数据,request.getParameter("empName")拿不到
	 * 		Tomcat一看是PUT不会封装请求体中的数据为map,只有POST形式的请求才封装请求体为map
         *  查看下面的 tomcat 源码 解析  ,发现只有post 
	 * org.apache.catalina.connector.Request(类名)—parseParameters() (方法名)( 行号 3111);
	 * 
	 * protected String parseBodyMethods = "POST";
	 * if( !getConnector().isParseBodyMethod(getMethod()) ) {
                success = true;
                return;
            }
	 * 
	 * 
	 * 解决方案;
	 * 我们要能支持直接发送PUT之类的请求还要封装请求体中的数据
	 * 1、配置上HttpPutFormContentFilter;
	 * 2、他的作用;将请求体中的数据解析包装成一个map。
	 * 3、request被重新包装,request.getParameter()被重写,就会从自己封装的map中取数据
	 * 员工更新方法

二、添加模态框:

1、直接复制并修改之前的员工添加模态框:

		
<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">员工修改</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">empName</label>    
    <div class="col-sm-9">
      <input type="text" readonly class="form-control-plaintext" id="empName_update_input_disable" name="empName" value="none">
    </div>
    
  </div>
  
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">email</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="email_update_input" name="email" placeholder="[email protected]">
          <div class="invalid-feedback"> 邮箱输入错误。</div>
    </div>

  </div>
  
  <div class="form-group row">
    <label  class="col-sm-3 col-form-label">gender</label>  
    <div class="col-sm-9">
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender1_update_input" checked value="M">
  <label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender2_update_input" value="F">
  <label class="form-check-label" >女</label>
</div>
    </div>  
  </div>
  
    <div class="form-group row">
    <label  class="col-sm-3 col-form-label">departName</label>  
    <div class="col-sm-6">
    <!-- 部门提交部门id即可 -->
    <select class="custom-select my-1 mr-sm-2" name="dId" id="dept_update_select">
    </select>
    </div>
    </div>
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_update_done_btn">更新</button>
      </div>
    </div>
  </div>
</div>
		

2、添加点击出现模态框事件

注意绑定的时间,因为在生成button后,才能完成绑定。所以绑定的方法不是普通方法。[ edit-btn  这个伪类]

/*** 
1、我们是按钮创建之前就绑定了click,所以绑定不上。
$(".edit-btn").click(function(){
	alert("edit");
});
****/
//1)、可以在创建按钮的时候绑定。   
//2)、绑定点击  live() 方法,这个方法就算是后来添加的元素,也能绑定方法
/***
$(".edit-btn").live(function(){
	alert("edit");
});
***/
//但是新版jquery没有live方法,使用on方法进行替代
/*** 下面的写法 不对
$(".edit-btn").on("click",function(){
	alert("edit");
});
***/
// edit-btn 这个是在一开始展示表格信息的时候,就已经添加了。
//注意 这里是 .edit-btn   算标签内的自定义属性,只是这里使用时 有个点号
$(document).on("click",".edit-btn",function(){
			
	//0、清空表单样式和内容
	reset_form("#empUpdateModal form");
			
	//1、查出部门信息,并显示部门列表
	getDepts("#empUpdateModal select");
	//2、查询员工信息,并显示员工信息  // 坑爹 一开始写成了 attr(edit-id) 
	 getEmp($(this).attr("edit-id"));
			
	//3、把员工的id传递给模态框的更新按钮,为了发送ajax时传递id
	$("#emp_update_done_btn").attr("edit-id",$(this).attr("edit-id"));
			
	//alert("edit");
	$("#empUpdateModal").modal({
		backdrop:"static"
	});
			
			
});

3、将添加雇员信息用到的 getDepts() 方法,进行了抽取

async:false,   这里用到了同步请求方法,如果是异步方法,可能会出现第四步设置设置部门信息时,可能部门信息还没有获取到,就已经开始设置哪个部门是员工现在默认的了。

//1、查出部门信息,并显示部门列表
function getDepts(ele){
	$.ajax({
		url:"${APP_PATH}/depts",
		type:"GET",
		async:false, 
		success:function(result){
		     console.log(result);
	            //显示部门信息,在下拉列表中
	            // $("#dept_add_select") 换一种找法
	            //$("#empAddModal select")
	                
	            //清除之前留下的 option 标签
	             $(ele).empty();
	             $.each(result.extend.depts,function(){
	                     var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
	                    optionEle.appendTo(ele);
	             });
		}
	});
}

4、显示员工信息方法

(1)前端请求代码:

function getEmp(id){
			
	$.ajax({
		url:"${APP_PATH}/emp/"+id,
		type:"get",
		success:function(result){
			console.log(result);
			var empData = result.extend.emp;
			$("#empName_update_input_disable").val(empData.empName);
			$("#email_update_input").val(empData.email);
			$("#empUpdateModal input[name=gender]").val([empData.gender]);
			$("#empUpdateModal select").val([empData.dId]);
		}
				
	})
}

(2)后端处理代码:

EmployeeController.java

/**
 * 根据id查询员工
 * @param id
 * @return
 */
@RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
@ResponseBody
public Msg getEmp(@PathVariable("id")Integer id){
		
	Employee employee = employeeService.getEmp(id);
	return Msg.success().add("emp", employee);
}

EmployeeService.java

/**
 * 按照员工Id 查询员工
 * @param id
 * @return
 */
public Employee getEmp(Integer id) {
       // TODO Auto-generated method stub
       Employee employee = employeeMapper.selectByPrimaryKey(id);
       return employee;
}

三、保存员工修改信息

1、添加保存按钮点击事件

之前对前端框架不熟悉,忘记添加这句话了$("#empUpdateModal").modal("hide"); 
导致点击提交事件后,一直没有关闭模态框,我以为会自动关闭模态框,原因找了很久,后来才发现。

//点击更新,更新员工信息
$("#emp_update_done_btn").click(function(){
			
	console.log("提交更新方法---邮箱校验");		

	//验证邮箱是否合法
	if(!validate_form_ele("#email_update_input",g_email_reg,g_email_valid,g_email_invalid_format))
        return false;

			
	//2、发送ajax请求保存更新的员工数据
	$.ajax({
		url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
		type:"post",
		data:$("#empUpdateModal form").serialize()+"&_method=put",
		success:function(result){
			//alert(result);
			//console.log(result);
			if(result.code=100){
				//1、员工修改成功,需要关闭模态框。
				$("#empUpdateModal").modal("hide");
				//2、来到最后一页,显示刚才的数据;发送ajax请求,显示最后一页数据即可(用总记录数请求,保证是请求足够大,mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验,只会返回最后一页数据)
			        to_page(g_currentPage);
			}else{
				//后端校验  显示失败信息
				if(undefined!=result.extend.errorFileds.email){
		                 //显示邮箱错误信息
		    		show_validate_msg("#email_update_input","error",result.extend.errorFileds.email);
		                }
		        }
					
	      }//success 方法结束
							
			  
	});
});

 

特别注意:
1、to_page(g_currentPage); g_currentPage 是一个全局变量,我在显示分页信息时,将其赋了值。

2、保存时,ajax 发送的是post请求,然后用参数 data:$("#empUpdateModal form").serialize()+"&_method=put", 利用 web.xml的

<!-- 4、使用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>

2、后端处理

EmployeeController.java

@ResponseBody
@RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)
public Msg saveEmp(Employee employee){
		
	System.out.println("将要更新的员工数据:"+employee);
	employeeService.updateEmp(employee);
	return Msg.success();
		
}

特别注意:value="/emp/{empId}"   ,不是 value="/emp/{id}"   因为empId要赋值给 employee 中的empId属性,前端的post 请求中,不包括empId。

前端put请求举例如下:
empName=adafaf&email=123123%4013.com&gender=F&dId=1&_method=put

EmployeeService.java

public void saveEmp(Employee employee) {
	// 下面这个方法 是全部插入 ,包括 连自增的id 都是
	// employeeMapper.insert(employee);
	// 下面这个方法是 有选择的插入,自增Id 被忽略 不会插入。
	employeeMapper.insertSelective(employee);
}

四、保存员工修改信息改良方法

1、前端直接用ajax的put请求:

$.ajax({			  
	url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
	type:"PUT",
	data:$("#empUpdateModal form").serialize(),
	success:function(result){
		//alert(result.msg);
		//1、关闭对话框
		$("#empUpdateModal").modal("hide");
		//2、回到本页面
		to_page(currentPage);
	}
});

2、后端解决方法

/**
 * 如果直接发送ajax=PUT形式的请求
 * 封装的数据
 * Employee 
 * [empId=1014, empName=null, gender=null, email=null, dId=null]
 * 
 * 问题:
 * 请求体中有数据;
 * 但是Employee对象封装不上;
 * update tbl_emp  where emp_id = 1014;
 * 
 * 原因:
 * Tomcat:
 * 		1、将请求体中的数据,封装一个map。
 * 		2、request.getParameter("empName")就会从这个map中取值。
 * 		3、SpringMVC封装POJO对象的时候。
 * 				会把POJO中每个属性的值,request.getParamter("email");
 * AJAX发送PUT请求引发的血案:
 * 		PUT请求,请求体中的数据,request.getParameter("empName")拿不到
 * 		Tomcat一看是PUT不会封装请求体中的数据为map,只有POST形式的请求才封装请求体为map
 * Tomcat 源码,查看 put 的处理逻辑
 * org.apache.catalina.connector.Request【类名】--parseParameters()【方法名】 (行号:3111);
 * 
 * protected String parseBodyMethods = "POST";
 * if( !getConnector().isParseBodyMethod(getMethod()) ) {
           success = true;
           return;
      }
 * 
 * 
 * 解决方案;
 * 我们要能支持直接发送PUT之类的请求还要封装请求体中的数据
 * 1、配置上HttpPutFormContentFilter;
 * 2、他的作用;将请求体中的数据解析包装成一个map。
 * 3、request被重新包装,request.getParameter()被重写,就会从自己封装的map中取数据
 * 员工更新方法
 * @param employee
 * @return
 */
	
@ResponseBody
@RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)
public Msg saveEmp(Employee employee,HttpServletRequest request){
	System.out.println("请求体中的值:"+request.getParameter("gender"));
	System.out.println("将要更新的员工数据:"+employee);
	employeeService.updateEmp(employee);
	return Msg.success()	;
}

注意一下:需要在 web.xml中添加

<!-- 5、直接支持put请求的拦截器,即在put请求时将请求体数据封装成map,并让springmvc能够通过request.getParameter(属性名) 来获取数据 -->
<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>

 

 

 

 

 

SSM小项目-(8)-添加雇员模块之前端校验和后端校验

之前已经能实现添加雇员的功能了。但是我们还需要进行表单校验。
校验过程概述:

校验流程:
1、首先是前端校验,用户名和 邮箱  正则表达式规则
2、发送 ajax ,校验是否存在 用户名。
====
一、这个时候,出现一种情况:用户名 前端校验成功 满足大于6位,
但是数据库有重复。表单样式,显示错误了,但是还是能够保存。
提交保存按钮,提交前,必须要知道 当前 用户名是否 重名这个标记,
所以,就在每次检测用户名是否重名时,将结果作为保存按钮的属性。

二、如果第一次保存成功,第二次再打开时,信息没有变化,ajax没有去调用是否重复用户名,导致保存的按钮仍是激活的,这样仍能保存。所以,解决办法就是,每次打开清空表单内容。当然,第二次打开表单的时候,也残留了之前的样式,所以也需要清空表单样式。
====
三、 情况是,输入 aaa 发送ajax查询,数据库没有重复,就显示用户名可用。但是一提交,显示 用户名要大于6位 ,用户名提示信息由绿色变成了红色,导致用户无法保存。所以 ajax  请求不仅要查用户名重复,也要查名字 大于6位。 于是在ajax请求查用户名重复的服务器方法中,又添加了校验 用户名格式 的方法。 


四、上面这样做还会出现问题,如果输入aaabbb,告诉用户,用户名已存在,但用户仍点击提交按钮,还是会将表单红色提示的信息,替换成了绿色信息,虽然无法提交,因为保存按钮被冻结了。这种现象是因为,表单提交时,先前端进行了格式化校验,然后查看保存按钮的激活状态,最后发送保存请求。

其中,前端格式化校验,会发现用户名满足大于等于6位的要求,然后将表单信息由原来的用户名已存在红色信息改为了绿色,而格式化校验后,发现保存按钮被禁用,因为用户名重复。原因就在于,前端格式化校验不能同时进行用户名重复,导致红色错误提示被替换成了绿色信息。

解决办法心得:提交表单的时候,先校验 用户名是否是重复 的那个标记值,如果是false就直接返回不提交,这样就跳过了后面在对表单格式进行校验,这样做省的将错误信息:用户名已存在 ,通过表单格式校验 改成 用户名可用的状态。


五、 如果输入用户名张三,发现用户名不可用,就算现在保存按钮被冻结,但也可以禁用或修改js代码,或者修改表单属性,重新激活保存按钮,成功的将表单发送给服务器, 显然这样只能 防君子不防小人。

所以在错误信息发送到服务器时,我们仍要对错误信息进行校验,这就做后端校验。这样做用于校验表单格式和用户名重复两个功能。校验完后,用户要么保存要么不保存,总之都会发送信息给浏览器,告知用户是否保存成功。

校验心得总结:
在关键数据上,前端校验后,还需要后端校验,
jquery前端校验,ajax用户名重复校验,重要数据(后端校验(JSR303),唯一约束);前端校验 + 后端校验+ 数据库约束

jsr303校验规则,就是
1、添加jar包
2、变量中 添加定义注解,配置返回值
3、方法中形参 设置 注解和返回值

js表单重置学习:

//如果不请空,下一次请求时,数据会在原来的基础上,不断添加。

function reset_form(ele){
//重置表单内容
$(ele)[0].reset();
//清空表单样式
$(ele).find(“*”).removeClass(“hass-erroe has-success”);
$(eye).find(“.help-block”).text(“”);
}

一、前端校验[前端发起的校验]

大白话:

Bootstrap框架中, 表单对象的校验,首先只要给form对象 添加 wasvalidated 属性就行。此时表单会根据inputtype属性,自动校验,比如是否为空,又比如type=email,那么会检查 输入信息是否是email类型。这些是bootstrap,自己添加的。
一般我们不用,我们自己用代码校验并判断 input 是否合法,并给input标签 添加 is-invalidis-valid 属性,来表示是否合法。
表单中的:validfeedbackinvalidfeedback 是用来 展示校验结果信息的。

1、js校验表单格式:

遇到前端错误时,可以用 chrome 调试,记得打开开发者模式!

下面是插入 保存时添加校验 方法 ,
但是调用时 validate_add_form 方法忘记加括号了!要修改啊,坑爹。

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
	if(!validate_add_form){
		//校验有误,失败
		return false;
	}
		
	//1.将模态框框中的数据提交给服务器进行保存
	//2.方式ajax请求,保存员工
	//alert($("#empAddModal form").serialize());
			
	 $.ajax({
		url:"${APP_PATH}/emp",
		type:"POST",
		data:$("#empAddModal form").serialize(), 
		success:function(result){
			//经过测试,服务器返回的是 json形式的 Msg对象, 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
			console.log(result);
			//alert(result.msg);
			//1、员工保存成功,需要关闭模态框。
			$("#empAddModal").modal("hide");
			//2、来到最后一页,显示刚才的数据;发送ajax请求,显示最后一页数据即可(用总记录数请求,保证是请求足够大,mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验,只会返回最后一页数据)
			to_page(totalRecords);
					
		}
	}); 
			
});

validate_add_form()方法实现:其中下面代码有错误:

var regemail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; if(!regEmail.test(emial)){...}
纠正:【regEmail 不是 regemailemail 不是 emial

//2、校验邮箱信息 var email = $("email_add_input").val(); 忘记添加#号了
正确的做法是:$("#email_add_input") 坑爹  !!!

邮箱的正则表达式也写错了,纠正一下:
      var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

//校验 添加员工信息 表单 合法性
function validate_add_form(){
	//拿到要校验的数据,使用正则表达式
			
	//1、校验用户信息
	//获取表单值
	var empName = $("#empName_add_input").val();  
	//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
	var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
	//校验正则表达式
	if(!regName.test(empName) ){
		// 弹窗校验 太丑 
		//alert("用户名可以是2-5位中文或者是6-16位英文或数字的组合");
		// $("#empName_add_input").addClass("is-invalid");
				
	        show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
		return false;
	}else{
		show_validate_msg("#empName_add_input","success","");
	}
		
	//2、校验邮箱信息
	var email = $("email_add_input").val();
	var regemail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(emial)){
		// 弹窗校验 太丑 
		//alert("邮箱格式不正确");
		//$("#email_add_input").addClass("is-invalid");
				
		show_validate_msg("#email_add_input","error","邮箱格式不正确");
		return false;
        }else{
		show_validate_msg("#email_add_input","success","");
	}
		
	return true;
}
		
		
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
	//清除当前元素的校验状态
	$(ele).removeClass("is-invalid is-valid");
	$(ele).next("div").removeClass("valid-feedback  invalid-feedback").text("");
	if("success"==status){
		$(ele).addClass("is-valid");
		$(ele).next("div").addClass("valid-feedback").text(msg);
	}else if("error" == status){
		$(ele).addClass("is-invalid");
		$(ele).next("div").addClass("invalid-feedback").text(msg);
	}
}

2、js校验用户名是否重复

(1)添加表单变化监听事件:

index.jsp

//校验添加的用户名 是否可用。需要在 保存按钮提交前进行 判断,自定义属性留个记号,让保存按钮可用来判断 后端校验情况。
$("#empName_add_input").change(function(){
	//发送 ajax 请求,校验 用户名 是否可用。
	var empName = this.value;
	$.ajax({
		url:"${APP_PATH}/checkUser",
		type:"POST",
		data:"empName="+empName,
		success:function(result){
			if(result.code==100){
				show_validate_msg("#empName_add_input","success","用户名可用");
				$("#emp_add_save_btn").attr("ajax-check-user","success");
			}else{
				show_validate_msg("#empName_add_input","error",result.extend.user_msg)
				$("#emp_add_save_btn").attr("ajax-check-user","error");	
			}
		}
				
	});
});

EmployeeController.java

/**
 * 检查用户名是否可用
 * 
 * @param empName
 * @return
 */
@ResponseBody
@RequestMapping("/checkUser")
public Msg checkUser(String empName) {
	
	boolean b = employeeService.checkUser(empName);
	if (b)
		return Msg.success().add("user_msg","用户名可用");
	else
		return Msg.fail().add("user_msg", "用户名不可用");
}

EmployeeService.java

/**
 * 检验用户名是否可用
 * 
 * @param empName
 * @return true:代表当前姓名可用 false:代表不可用
 */
public boolean checkUser(String empName) {

	EmployeeExample example = new EmployeeExample();
	Criteria criteria = example.createCriteria();
	criteria.andEmpNameEqualTo(empName);
	// 按照条件,统计符号条件的记录数
	long count = employeeMapper.countByExample(example);
	return count==0;
}

(2)添加模态框的重复性标记

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
	//alert("校验测试");
			
	//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
	if($(this).attr("ajax-check-user")=="error"){
		return false;
	}
.....

}

3、重新打开模态框bug

需要:

function reset_form(ele){
//重置表单内容
$(ele)[0].reset();
//清空表单样式
$(ele).find(“*”).removeClass(“hass-erroe has-success”);
$(eye).find(“.help-block”).text(“”);
}

4、在校验用户名重复中添加用户名格式校验

在EmployeeController.java中:

/**
 * 检查用户名是否可用
 * 
 * @param empName
 * @return
 */
@ResponseBody
@RequestMapping("/checkUser")
public Msg checkUser(String empName) {
	// 先判断用户名是否是合法的表达式;
	String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})";
	if (!empName.matches(regx)) {
		return Msg.fail().add("user_msg", "用户名必须是6-16位数字和字母的组合或者2-5位中文");
	}

	boolean b = employeeService.checkUser(empName);
	if (b)
                return Msg.success().add("user_msg","用户名可用");
	else
		return Msg.fail().add("user_msg", "用户名不可用");
}

5、前端校验顺序调整

避免表单样式由红色错误信息变成绿色

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
	//alert("校验测试");
			
	//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
	if($(this).attr("ajax-check-user")=="error"){
		return false;
	}
			
	//2、前端校验表单格式
	if(!validate_add_form()){
		//校验有误,失败
		return false;
	}
			
		
	//发送ajax请求,如果前端校验被修改了,比如禁用js,修改js代码等
        //这时候需要后端校验,并将结果返回给浏览器	
	.....
			
});

二、对浏览器表单数据进行后端校验

1、导入jsr303校验规则的jar包,即在pom.xml中添加

<!--JSR303数据校验支持;tomcat7及以上的服务器, tomcat7以下的服务器:用的是旧的el.jar包,el表达式是旧标准的 ,需要额外给服务器的lib包中替换新的标准的el.jar包 -->
<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
<dependency>
	<groupId>org.hibernate</groupId>
	<artifactId>hibernate-validator</artifactId>
	<version>5.4.1.Final</version>
</dependency>

2、对校验对象,添加注解

在Employee.java中:

package com.ssm.crud.bean;

import javax.validation.constraints.Pattern;

import org.hibernate.validator.constraints.Email;

public class Employee {
    private Integer empId;
    /***
    //jsr303校验规则
    //@Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})",message="")  
     * 这里的 \u3333 [3333是为了不报错才添加的]
     * java表达式是认识的 但是严格点还是要 \\u
    ***/
    @Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})",message="用户名必须是6-16位数字和字母的组合或者2-5位中文")
    private String empName;

    private String gender;

    //jsr303校验规则
    //@Email 直接用这个注解也够了
    //@Pattern(regexp="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$",message="")
    //在正则表达式中 \ 就是转义的,然后再java中 \ 也是转义的,所以需要java中的 \\ 来表示正则表达式中的一个 \
    @Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",message="邮箱格式不正确")
    private String email;

    private Integer dId;

    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;
    }
    
    //添加 Department 属性,用于关联查询
    private Department department;

	public Department getDepartment() {
		return department;
	}

	public void setDepartment(Department department) {
		this.department = department;
	}


	//生成自定义构造器 ,顺便 附带 无参构造器
	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 Employee() {
		super();
	}

	@Override
	public String toString() {
		return "Employee [empId=" + empId + ", empName=" + empName + ", gender=" + gender + ", email=" + email
				+ ", dId=" + dId + ", department=" + department + "]";
	}
	
	
	
}

(3)方法形参中启用

在EmployeeController.java中:

/**
 * 员工保存
 * 1、支持JSR303校验
 * 2、导入Hibernate-Validator
 * 3、在bean的属性中 添加校验注解
 * 4、在调用方法参数中,写上 @Valid 启用校验功能,BindingResult 设置校验结果返回
 * @return
 */
@ResponseBody
@RequestMapping(value = "/emp", method = RequestMethod.POST)
public Msg saveEmpWithJson(@Valid Employee employee ,BindingResult result) {
	if(result.hasErrors())
	{
		//校验失败,应该返回失败,在模态框中显示校验失败的错误信息
		Map<String, Object> map = new HashMap<>();
		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 {
		System.out.println(employee);
		employeeService.saveEmp(employee);
		return Msg.success();

	}
		
}

三、前端页面代码

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径:
不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。
以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:8080);需要加上项目名
		http://localhost:8080/crud
 -->
<script type="text/javascript"
	src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>

<link
	href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet">

</head>

<body>
	<div class="container">
		<!-- 标题 -->
		<div class="col-md-12">
			<h1>SSM-CRUD</h1>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<div class="ml-auto mr-5">
				<button class="btn btn-primary btn-sm" id="emp_add_modal_btn">
					<i class="icon-file-alt icon-large"></i>  新增
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
			</div>
		</div>
		
		<div class="text-center">
		<h5>测试列表</h5>
		</div>
		
		<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">员工添加</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">empName</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="empName_add_input"  name="empName"  placeholder="empName">
      <div class="invalid-feedback"> 用户名错误,请输入6-16个英文或2-5汉字。  </div>
    </div>
  </div>
  
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">email</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="email_add_input" name="email" placeholder="[email protected]">
          <div class="invalid-feedback"> 邮箱输入错误。</div>
    </div>

  </div>
  
  <div class="form-group row">
    <label  class="col-sm-3 col-form-label">gender</label>  
    <div class="col-sm-9">
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender1_add_input" checked value="M">
  <label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender2_add_input" value="F">
  <label class="form-check-label" >女</label>
</div>
    </div>  
  </div>
  
    <div class="form-group row">
    <label  class="col-sm-3 col-form-label">departName</label>  
    <div class="col-sm-6">
    <!-- 部门提交部门id即可 -->
    <select class="custom-select my-1 mr-sm-2" name="dId" id="dept_add_select">
    </select>
    </div>
    </div>
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_add_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>
		
		
		
		

		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
					<thead>
						<tr>
							<th>#</th>
							<th>empName</th>
							<th>gender</th>
							<th>email</th>
							<th>deptName</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					
					</tbody>
				</table>
			</div>
		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<div class="col-md-6" id="page_info_area"></div>
			
			<div class="col-md-6" id="page_nav_area"></div>
		</div>
	</div>

	<script type="text/javascript">
		//定义 全局变量,总记录数
		var totalRecords ;
	
		//1、页面加载完成以后,直接去发送ajax请求,要到分页数据
		$(function(){
			//去首页
			to_page(1);
		});
		
		function to_page(pn){
			$.ajax({
				url:"${APP_PATH}/emps",
				data:"pn="+pn,
				type:"GET",
				success:function(result){
					//console.log(result);
					//1、解析并显示员工数据
					build_emps_table(result);
					//2、解析并显示分页信息
					build_page_info(result);
					//3、解析显示分页条数据
					build_page_nav(result);
				}
			});
		}
		
/* 		$(function() {
			$.ajax({
				url : "${APP_PATH}/emps",
				data : "pn=1",
				type : "GET",
				success : function(result) {
					//console.log(result) 
					//1、解析并显示员工信息
					build_emps_table(result);
					//2、解析并显示分页信息
					build_page_info(result);
					//3、解析显示分页条
					build_page_nav(result);

				}
			});
		}); */

		function build_emps_table(result) {
			//清空table表格,如果不请空,下一次请求时,数据会在原来的基础上,不断添加。
			$("#emps_table tbody").empty();
			
			var emps = result.extend.pageInfo.list;
			$.each(emps, function(index, item) {
				//alert(item.empName);
				
				//构建单元格
				var empIdTd = $("<td></td>").append(item.empId);
				var empNameTd = $("<td></td>").append(item.empName);
				var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
				var emailTd = $("<td></td>").append(item.email);
				var deptNameTd = $("<td></td>").append(item.department.deptName);				
				/**
				<button class="btn btn-primary btn-sm">
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
				**/
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit-btn")
				.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
                //为编辑按钮添加一个自定义的属性,来表示当前员工id
                editBtn.attr("edit-id",item.empId);
                var deleteBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete-btn")
				.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
                //为删除按钮添加一个自定义的属性来表示当前删除的员工id
                deleteBtn.attr("delete-id",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(deleteBtn);

                //append方法执行完成以后还是返回原来的元素
				$("<tr></tr>")
                .append(empIdTd)
				.append(empNameTd)
				.append(genderTd)
				.append(emailTd)
				.append(deptNameTd)
				//.append(editBtn)
				//.append(deleteBtn)
				.append(btnTd)
				.appendTo("#emps_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+"记录")
		     
					totalRecords = result.extend.pageInfo.total;
		}
		
		//解析显示分页条
		function build_page_nav(result) {
			//page_nav_area
			//请空之前的分页条,如果不请空,下一次请求时,数据会在原来的基础上,不断添加。
			$("#page_nav_area").empty();
			
			var ul = $("<ul></ul>").addClass("pagination");
			
			//构建元素
			var firstPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("首页")  );
			var prePageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&laquo;")  );
		
			var lastPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("末页")   );
			var nextPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&raquo;")   );

			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			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);
				});
			}
			
			//遍历页码号1,2,3等,给ul中添加页码提示
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append(item)  );
				if(result.extend.pageInfo.pageNum == item){
					numLi.addClass("active");
				}
				
				numLi.click(function(){
					to_page(item);
				});
				
				ul.append(numLi);
			})
			
			//添加下一页和末页 的提示
			ul.append(nextPageLi).append(lastPageLi);
			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.pages);
				});
			}
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		
		//情况表单信息 方法
		function reset_form(ele){
			
			//重置表单内容
			$(ele)[0].reset();
			
			//清空表单样式
			$(ele).find("*").removeClass("is-invalid is-valid");
			$(ele).find(".valid-feedback .invalid-feedback").text("");
			}
		
		//添加模态框的事件,一开始忘记添加#号了,emp_add_modal_btn
		$("#emp_add_modal_btn").click(function(){
			
			//清除表单数据(表单完整重置(表单的数据,表单的样式))
			reset_form("#empAddModal form");
			
			//发送ajax请求,弹出部门信息,显示在下拉列表中
			getDepts();
			
			//弹出模态框
			$("#empAddModal").modal({
				backdrop:"static"
			});
		});
		
		function getDepts(){
			$.ajax({
				url:"${APP_PATH}/depts",
				type:"GET",
				success:function(result){
					console.log(result);
	                //显示部门信息,在下拉列表中
	                // $("#dept_add_select") 换一种找法
	                //$("#empAddModal select")
	                
	                //清除之前留下的 option 标签
	                $("#empAddModal select").empty();
	                $.each(result.extend.depts,function(){
	                	var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
	                    optionEle.appendTo("#empAddModal select");
	                });
				}
			});
		}
		
	
		
		//添加模态框 保存事件
		$("#emp_add_save_btn").click(function(){
			
			//alert("校验测试");
			
			//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
			if($(this).attr("ajax-check-user")=="error"){
				return false;
			}
			
			//2、前端校验表单格式
			if(!validate_add_form()){
				//校验有误,失败
				return false;
			}
			
		
			
			//1.将模态框框中的数据提交给服务器进行保存
			//2.方式ajax请求,保存员工
			//alert($("#empAddModal form").serialize());
			
		  $.ajax({
				url:"${APP_PATH}/emp",
				type:"POST",
				data:$("#empAddModal form").serialize(), 
				success:function(result){
					//经过测试,服务器返回的是 json形式的 Msg对象, 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
					console.log(result);
					//alert(result.msg);
					if(result.code==100)
					{
						//1、员工保存成功,需要关闭模态框。
						$("#empAddModal").modal("hide");
						//2、来到最后一页,显示刚才的数据;发送ajax请求,显示最后一页数据即可(用总记录数请求,保证是请求足够大,mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验,只会返回最后一页数据)
						to_page(totalRecords);
					}else{
						//显示失败信息
						//console.log(result);
						//有哪个字段的错误信息,就显示哪个字段
						//alert(result.extend.errorFileds.email);
						//alert(result.extend.errorFileds.empName);
		                if(undefined!=result.extend.errorFileds.email){
		                	//显示邮箱错误信息
		    				show_validate_msg("#email_add_input","error",result.extend.errorFileds.email);
		                }
		                if(undefined!=result.extend.errorFileds.empName){
		                	//显示员工名字错误信息
		    				show_validate_msg("#emPName_add_input","error",result.extend.errorFileds.empName);
		                }
						
					}
					
					
				}
			}); 
			
		});
		
		
		//校验 添加员工信息 表单 合法性
		function validate_add_form(){
			//拿到要校验的数据,使用正则表达式
			
			//1、校验用户信息
			//获取表单值
			var empName = $("#empName_add_input").val();  
			//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
			//一开始正则表达式写错了,导致两个中文的名字无法保存 ,关键就是大括号的位置啊
			//var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]){2,5}/;
			var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;

		    //校验正则表达式
			if(!regName.test(empName) ){
				// 弹窗校验 太丑 
				//alert("用户名可以是2-5位中文或者是6-16位英文或数字的组合");
			   // $("#empName_add_input").addClass("is-invalid");
				
			   show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
			   return false;
			}else{
			   show_validate_msg("#empName_add_input","success","");
			}
		
			//2、校验邮箱信息
			var email = $("#email_add_input").val();
			// 正则表达式 看花眼了啊 少了 一个 [
			//var regEmail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		      var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

			if(!regEmail.test(email)){
				// 弹窗校验 太丑 
		    	//alert("邮箱格式不正确");
				//$("#email_add_input").addClass("is-invalid");
				
				show_validate_msg("#email_add_input","error","邮箱格式不正确");
		    	return false;
		    }else{
				show_validate_msg("#email_add_input","success","");
		    }
		
			return true;
		}
		
		
		//显示校验结果的提示信息
		function show_validate_msg(ele,status,msg){
			//清除当前元素的校验状态
			$(ele).removeClass("is-invalid is-valid");
			$(ele).next("div").removeClass("valid-feedback  invalid-feedback").text("");
			if("success"==status){
				$(ele).addClass("is-valid");
				$(ele).next("div").addClass("valid-feedback").text(msg);
			}else if("error" == status){
				$(ele).addClass("is-invalid");
				$(ele).next("div").addClass("invalid-feedback").text(msg);
			}
		}
		
		
		//校验添加的用户名 是否可用。需要在 保存按钮提交前进行 判断,自定义属性留个记号,让保存按钮可用来判断 后端校验情况。
		$("#empName_add_input").change(function(){
			//发送 ajax 请求,校验 用户名 是否可用。
			var empName = this.value;
			$.ajax({
				url:"${APP_PATH}/checkUser",
				type:"POST",
				data:"empName="+empName,
				success:function(result){
					if(result.code==100){
						show_validate_msg("#empName_add_input","success","用户名可用");
					    $("#emp_add_save_btn").attr("ajax-check-user","success");
					}else{
						show_validate_msg("#empName_add_input","error",result.extend.user_msg)
					    $("#emp_add_save_btn").attr("ajax-check-user","error");	
					}
				}
				
			});
		});
		
	</script>

</body>
</html>

三、校验模块改进

(1)基本想法:

1、先前端校验-再后端校验

2、每个校验模块中都有校验优先顺序。
【根据具体情况判断,比如校验单个表单元素时,先本地后服务器,减少服务器压力,提交表单时,先判断之前服务器传回来的校验结果,然后再进行前端验证。】

2、表单变化时,应该用前端校验,表单提交时用后端校验。

(2)具体方法:

1、抽取了单个表单对象的校验方法,定义了全局变量【校验正则表达式,校验展示信息】

2、对每个表单对象,一旦变化就进行单独校验。

3、提交表单时,先判断之前服务器传回来的校验结果,然后再进行前端校验。

4、表单提交后,在进行服务端校验。

(3)修改后的网页代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径:
不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。
以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:8080);需要加上项目名
		http://localhost:8080/crud
 -->
<script type="text/javascript"
	src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>

<link
	href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet">

</head>

<body>
	<div class="container">
		<!-- 标题 -->
		<div class="col-md-12">
			<h1>SSM-CRUD</h1>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<div class="ml-auto mr-5">
				<button class="btn btn-primary btn-sm" id="emp_add_modal_btn">
					<i class="icon-file-alt icon-large"></i>  新增
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
			</div>
		</div>
		
		<div class="text-center">
		<h5>测试列表</h5>
		</div>
		
		<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">员工添加</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">empName</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="empName_add_input"  name="empName"  placeholder="empName">
      <div class="invalid-feedback"> 用户名错误,请输入6-16个英文或2-5汉字。  </div>
    </div>
  </div>
  
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">email</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="email_add_input" name="email" placeholder="[email protected]">
          <div class="invalid-feedback"> 邮箱输入错误。</div>
    </div>

  </div>
  
  <div class="form-group row">
    <label  class="col-sm-3 col-form-label">gender</label>  
    <div class="col-sm-9">
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender1_add_input" checked value="M">
  <label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender2_add_input" value="F">
  <label class="form-check-label" >女</label>
</div>
    </div>  
  </div>
  
    <div class="form-group row">
    <label  class="col-sm-3 col-form-label">departName</label>  
    <div class="col-sm-6">
    <!-- 部门提交部门id即可 -->
    <select class="custom-select my-1 mr-sm-2" name="dId" id="dept_add_select">
    </select>
    </div>
    </div>
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_add_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>
		
		
		
		

		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
					<thead>
						<tr>
							<th>#</th>
							<th>empName</th>
							<th>gender</th>
							<th>email</th>
							<th>deptName</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					
					</tbody>
				</table>
			</div>
		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<div class="col-md-6" id="page_info_area"></div>
			
			<div class="col-md-6" id="page_nav_area"></div>
		</div>
	</div>

	<script type="text/javascript">
		//定义 全局变量,总记录数
		var g_totalRecords ;
		var g_empName_reg =  /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
	    var g_empName_valid ="用户名可用";
	    var g_empName_invalid_format = "用户名可以是2-5位中文或者6-16位英文和数字的组合";
	    var g_empName_invalid_exist = "用户名已存在";
	    
		var g_email_reg =  /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
	    var g_email_valid = "";
	    var g_email_invalid_format="邮箱格式不正确";
	    
	    
	    //获取表单值
		//var empName = $("#empName_add_input").val();  
		//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
		       //一开始正则表达式写错了,导致两个中文的名字无法保存 ,关键就是大括号的位置啊
		       //var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]){2,5}/;
		//var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
	    //show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");

		
		//校验邮箱信息
		//var email = $("#email_add_input").val();
		      // 正则表达式 看花眼了啊 少了 一个 [
		      //var regEmail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
	    //  var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;  
	    // show_validate_msg("#email_add_input","error","邮箱格式不正确");
	    
		
		//表单内容和样式重置方法
		function reset_form(ele){
			//重置表单内容
			$(ele)[0].reset();
			
			//清空表单样式
			$(ele).find("*").removeClass("is-invalid is-valid");
			$(ele).find(".valid-feedback .invalid-feedback").text("");
			}
		
		
		//校验表单元素  参数:元素 和 正则表达式 ,提示信息
		function validate_form_ele(ele,reg,tip_success,tip_error){
			//拿到要校验的数据,使用正则表达式
			var ele_value = $(ele).val();
	       if( reg.test(ele_value)){
	    	   show_validate_msg(ele,"success",tip_success);
	    	   return true;
	       }else{
	    	   show_validate_msg(ele,"error",tip_error);
	    	   return false;
	       }
		}
		
		//显示校验结果的提示信息
		function show_validate_msg(ele,status,msg){
			//清除当前元素的校验状态
			$(ele).removeClass("is-invalid is-valid");
			$(ele).next("div").removeClass("valid-feedback  invalid-feedback").text("");
			if("success"==status){
				$(ele).addClass("is-valid");
				$(ele).next("div").addClass("valid-feedback").text(msg);
			}else if("error" == status){
				$(ele).addClass("is-invalid");
				$(ele).next("div").addClass("invalid-feedback").text(msg);
			}
		}
		
		
		//1、页面加载完成以后,直接去发送ajax请求,要到分页数据
		$(function(){
			//去首页
			to_page(1);
		});
		
		
		
		/********************公共方法上面*********************/
		
		function to_page(pn){
			$.ajax({
				url:"${APP_PATH}/emps",
				data:"pn="+pn,
				type:"GET",
				success:function(result){
					//console.log(result);
					//1、解析并显示员工数据
					build_emps_table(result);
					//2、解析并显示分页信息
					build_page_info(result);
					//3、解析显示分页条数据
					build_page_nav(result);
				}
			});
		}
		

		function build_emps_table(result) {
			//清空table表格,如果不请空,下一次请求时,数据会在原来的基础上,不断添加。
			$("#emps_table tbody").empty();
			
			var emps = result.extend.pageInfo.list;
			$.each(emps, function(index, item) {
				//alert(item.empName);
				
				//构建单元格
				var empIdTd = $("<td></td>").append(item.empId);
				var empNameTd = $("<td></td>").append(item.empName);
				var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
				var emailTd = $("<td></td>").append(item.email);
				var deptNameTd = $("<td></td>").append(item.department.deptName);				
				/**
				<button class="btn btn-primary btn-sm">
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
				**/
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
				.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
                //为编辑按钮添加一个自定义的属性,来表示当前员工id
                editBtn.attr("edit-id",item.empId);
                var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
				.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
                //为删除按钮添加一个自定义的属性来表示当前删除的员工id
                delBtn.attr("del-id",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

                //append方法执行完成以后还是返回原来的元素
				$("<tr></tr>")
                .append(empIdTd)
				.append(empNameTd)
				.append(genderTd)
				.append(emailTd)
				.append(deptNameTd)
				//.append(editBtn)
				//.append(delBtn)
				.append(btnTd)
				.appendTo("#emps_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+"记录")
		     
					g_totalRecords = result.extend.pageInfo.total;
		}
		
		//解析显示分页条
		function build_page_nav(result) {
			//page_nav_area
			//请空之前的分页条,如果不请空,下一次请求时,数据会在原来的基础上,不断添加。
			$("#page_nav_area").empty();
			
			var ul = $("<ul></ul>").addClass("pagination");
			
			//构建元素
			var firstPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("首页")  );
			var prePageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&laquo;")  );
		
			var lastPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("末页")   );
			var nextPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&raquo;")   );

			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			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);
				});
			}
			
			//遍历页码号1,2,3等,给ul中添加页码提示
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append(item)  );
				if(result.extend.pageInfo.pageNum == item){
					numLi.addClass("active");
				}
				
				numLi.click(function(){
					to_page(item);
				});
				
				ul.append(numLi);
			})
			
			//添加下一页和末页 的提示
			ul.append(nextPageLi).append(lastPageLi);
			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.pages);
				});
			}
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		/********************加载网页模块结束*********************/

		
		
        /********************添加用户信息模块*********************/
        
		//添加模态框的事件,一开始忘记添加#号了,emp_add_modal_btn
		$("#emp_add_modal_btn").click(function(){
			
			//清除表单数据(表单完整重置(表单的数据,表单的样式))
			reset_form("#empAddModal form");
			
			//发送ajax请求,弹出部门信息,显示在下拉列表中
			getDepts();
			
			//弹出模态框
			$("#empAddModal").modal({
				backdrop:"static"
			});
		});
		
		function getDepts(){
			$.ajax({
				url:"${APP_PATH}/depts",
				type:"GET",
				success:function(result){
					console.log(result);
	                //显示部门信息,在下拉列表中
	                // $("#dept_add_select") 换一种找法
	                //$("#empAddModal select")
	                
	                //清除之前留下的 option 标签
	                $("#empAddModal select").empty();
	                $.each(result.extend.depts,function(){
	                	var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
	                    optionEle.appendTo("#empAddModal select");
	                });
				}
			});
		}
		
	
		
		//添加模态框 保存事件
		$("#emp_add_save_btn").click(function(){
			
			//alert("校验测试");
			
			//1、判断之前的ajax用户名重复性校验是否成功。如果成功。
			if($(this).attr("ajax-check-user")=="error"){
				return false;
			}
			
	
			if(! validate_form_ele("#empName_add_input",g_empName_reg,
					g_empName_valid,g_empName_invalid_format))	
				return false;
		
			if(! validate_form_ele("#email_add_input",g_email_reg,
					g_email_valid,g_email_invalid_format))	
				return false;
			
			//1.将模态框框中的数据提交给服务器进行保存
			//2.方式ajax请求,保存员工
			//alert($("#empAddModal form").serialize());
			
		  $.ajax({
				url:"${APP_PATH}/emp",
				type:"POST",
				data:$("#empAddModal form").serialize(), 
				success:function(result){
					//经过测试,服务器返回的是 json形式的 Msg对象, 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
					console.log(result);
					//alert(result.msg);
					if(result.code==100)
					{
						//1、员工保存成功,需要关闭模态框。
						$("#empAddModal").modal("hide");
						//2、来到最后一页,显示刚才的数据;发送ajax请求,显示最后一页数据即可(用总记录数请求,保证是请求足够大,mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验,只会返回最后一页数据)
						to_page(g_totalRecords);
					}else{
						//显示失败信息
						//console.log(result);
						//有哪个字段的错误信息,就显示哪个字段
						//alert(result.extend.errorFileds.email);
						//alert(result.extend.errorFileds.empName);
		                if(undefined!=result.extend.errorFileds.email){
		                	//显示邮箱错误信息
		    				show_validate_msg("#email_add_input","error",result.extend.errorFileds.email);
		                }
		                if(undefined!=result.extend.errorFileds.empName){
		                	//显示员工名字错误信息
		    				show_validate_msg("#emPName_add_input","error",result.extend.errorFileds.empName);
		                }
						
					}
					
					
				}
			}); 
			
		});
		
		
		//校验添加的用户名 是否可用。需要在 保存按钮提交前进行 判断,自定义属性留个记号,让保存按钮可用来判断 后端校验情况。
		$("#empName_add_input").change(function(){
			
			if(! validate_form_ele("#empName_add_input",g_empName_reg,
					g_empName_valid,g_empName_invalid_format))	
				return false;
		
			
			//发送 ajax 请求,校验 用户名 是否可用。
			var empName = this.value;
			$.ajax({
				url:"${APP_PATH}/checkUser",
				type:"POST",
				data:"empName="+empName,
				success:function(result){
					if(result.code==100){
						show_validate_msg("#empName_add_input","success",g_empName_valid);
					    $("#emp_add_save_btn").attr("ajax-check-user","success");
					}else{
						show_validate_msg("#empName_add_input","error",result.extend.user_msg)
					    $("#emp_add_save_btn").attr("ajax-check-user","error");	
					}
				}
				
			});
		});
		
		//校验 email框
		$("#email_add_input").change(function(){
			//校验表单
			validate_form_ele("#email_add_input",g_email_reg,g_email_valid,g_email_invalid_format)
					
			});
		
		
	</script>

</body>
</html>

 

 

 

 

 

 

SSM小项目-(7)-添加雇员模块功能实现

一、明确需求

保存 Employee对象 :
需要 empName email gender dId   Id(因为是自增的所以不需要)

明确使用 rest 风格的操作方式 :
/depts  请求url
post 请求方式
数据存放在表单中,然后给springmvc  pojo 赋值到bean中。

二、实现添加用户模态框

1、在原来的添加用户按钮上绑定事件

原来的按钮:

<!-- 按钮 -->
<div class="row">
	<div class="ml-auto mr-5">
		<button class="btn btn-primary btn-sm" id="emp_add_modal_btn">
			<i class="icon-file-alt icon-large"></i>  新增
		</button>
		<button class="btn btn-danger btn-sm">
			<i class="icon-trash icon-large"></i> 删除
		</button>
	</div>
</div>

js绑定事件:

//添加模态框的事件,一开始忘记添加#号了,emp_add_modal_btn
$("#emp_add_modal_btn").click(function(){
	//发送ajax请求,弹出部门信息,显示在下拉列表中
	getDepts();
			
	//弹出模态框,static 代表 点击模态框 外面也不能关闭 模态框
	$("#empAddModal").modal({
		backdrop:"static"
	});
});

getDepts()方法是为了从服务器端获取,部门以便在下拉框中填充。

function getDepts(){
	$.ajax({
		url:"${APP_PATH}/depts",
		type:"GET",
		success:function(result){
			console.log(result);
	        //显示部门信息,在下拉列表中
	        // $("#dept_add_select") 换一种找法
	        //$("#empAddModal select")
                
                 //清除之前留下的 option 标签
                  $("#empAddModal select").empty();

	          $.each(result.extend.depts,function(){
	               var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
	               optionEle.appendTo("#empAddModal select");
	           });
	       }
	});
}

2、服务器返回部门信息

新建 DepartmentController.java

package com.ssm.crud.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ssm.crud.bean.Department;
import com.ssm.crud.service.DepartmentService;
import com.ssm.crud.util.Msg;

@Controller
public class DepartmentController {

	@Autowired
    DepartmentService departmentService;
	
	@ResponseBody
	@RequestMapping("/depts")
	public Msg getDepts(){
	    return Msg.success().add("depts", departmentService.getAll()) ;
	}
	
}

新建DepartmentService.java

package com.ssm.crud.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.ssm.crud.bean.Department;
import com.ssm.crud.mapper.DepartmentMapper;

@Service
public class DepartmentService {

	@Autowired
	DepartmentMapper departmentMapper;
	
	public List<Department> getAll(){
		
		return departmentMapper.selectByExample(null);
	}
	
}

Msg.java 之前已经提到过了

package com.ssm.crud.util;

import java.util.HashMap;
import java.util.Map;

/**
 * 通用的返回的类
 * 
 * @author lfy
 * 
 */
public class Msg {
	//状态码   100-成功    200-失败
	private int code;
	//提示信息
	private String msg;
	
	//返回给浏览器的数据
	private Map<String, Object> extend = new HashMap<String, Object>();

	public static Msg success(){
		Msg result = new Msg();
		result.setCode(100);
		result.setMsg("处理成功!");
		return result;
	}
	
	public static Msg fail(){
		Msg result = new Msg();
		result.setCode(200);
		result.setMsg("处理失败!");
		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 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;
	}
	
	
}

3、新建模态框并整合部门信息

<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">员工添加</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

<form>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">empName</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="empName_add_input"  name="empName"  value="empName">
    </div>
  </div>
  
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">email</label>
    <div class="col-sm-9">
      <input type="text"  class="form-control" id="email_add_input" name="email" value="[email protected]">
    </div>
  </div>
  
  <div class="form-group row">
    <label  class="col-sm-3 col-form-label">gender</label>  
    <div class="col-sm-9">
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender1_add_input" checked value="M">
  <label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="gender2_add_input" value="F">
  <label class="form-check-label" >女</label>
</div>
    </div>  
  </div>
  
    <div class="form-group row">
    <label  class="col-sm-3 col-form-label">departName</label>  
    <div class="col-sm-6">
    <!-- 部门提交部门id即可 -->
    <select class="custom-select my-1 mr-sm-2" name="dId" id="dept_add_select">
    </select>
    </div>
    </div>
</form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_add_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>

前面已经在js中 ,将ajax返回的结果填入到了select标签中了:如下

$.each(result.extend.depts,function(){
	var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
	 optionEle.appendTo("#empAddModal select");
  });

三、实现保存员工功能

1、前端部分:用js给保存按钮添加ajax事件:

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
	
			
	//1.将模态框框中的数据提交给服务器进行保存
	//方式ajax请求,保存员工
	//alert($("#empAddModal form").serialize());
			
	$.ajax({
		url:"${APP_PATH}/emp",
		type:"POST",
		data:$("#empAddModal form").serialize(), 
		success:function(result){
			//经过测试,服务器返回的是 json形式的 Msg对象, 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
			console.log(result);
			//alert(result.msg);
			//1、员工保存成功,需要关闭模态框。
			$("#empAddModal").modal("hide");
			//2、来到最后一页,显示刚才的数据;发送ajax请求,显示最后一页数据即可(用总记录数请求,保证是请求足够大,mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验,只会返回最后一页数据)
			to_page(totalRecords);
					
		}
	}); 
			
});

特别提醒:js中  totalRecords 变量,是在 js代码一开始就有的

<script type="text/javascript">
	//定义 全局变量,总记录数
	var totalRecords ;
	
	//1、页面加载完成以后,直接去发送ajax请求,要到分页数据
	$(function(){
		//去首页
		to_page(1);
	});
  。。。

然后在 显示页面信息时,被赋值:

$("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+
					"页,总共"+result.extend.pageInfo.pages+"页,总"+result.extend.pageInfo.total+"记录")
		     
					totalRecords = result.extend.pageInfo.total;

最后,在因为保存员工信息,跳转时,跳转到 最大记录数页:PageHelp 自动过滤最大页数

//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
			
			
	//1.将模态框框中的数据提交给服务器进行保存
	//方式ajax请求,保存员工
	//alert($("#empAddModal form").serialize());
			
	$.ajax({
		url:"${APP_PATH}/emp",
		type:"POST",
		data:$("#empAddModal form").serialize(), 
		success:function(result){
			//经过测试,服务器返回的是 json形式的 Msg对象, 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
			console.log(result);
			//alert(result.msg);
			//1、员工保存成功,需要关闭模态框。
			$("#empAddModal").modal("hide");
			//2、来到最后一页,显示刚才的数据;发送ajax请求,显示最后一页数据即可(用总记录数请求,保证是请求足够大,mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验,只会返回最后一页数据)
			to_page(totalRecords);
					
		}
	}); 
			
});

2、后端部分:

EmployeeController.java  【核心代码】

@Autowired
EmployeeService employeeService;

/**
 * 员工保存
 * 
 * @return
 */
@ResponseBody
@RequestMapping(value="/emp",method=RequestMethod.POST)
public  Msg saveEmpWithJson(Employee employee){
	System.out.println(employee);
	employeeService.saveEmp(employee);
	return Msg.success();
}

EmployeeService.java【核心代码】

@Autowired
EmployeeMapper employeeMapper;

public void saveEmp(Employee employee) {
        //下面这个方法 是全部插入 ,包括 连自增的id 都是
	//employeeMapper.insert(employee);
	//下面这个方法是 有选择的插入,自增Id 被忽略 不会插入。
	employeeMapper.insertSelective(employee);
}

 

SSM小项目-(6)-前端交互基于ajax请求方案

一、数据交互用的是json

所以springmvc 需要导入Jackson.jar 包,这样才能返回json数据。
Maven构建的项目,操作如下:在pom.xml中添加:

<!-- 返回json字符串的支持 -->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.8.8</version>
</dependency>

实际加载的jar包如下:
jackson-annotations.jar
jackson-core.jar
jackson-databind.jar

二、编辑后端

消息对象:Msg.java

package com.ssm.crud.util;

import java.util.HashMap;
import java.util.Map;

/**
 * 通用的返回的类
 * 
 * @author lfy
 * 
 */
public class Msg {
	//状态码   100-成功    200-失败
	private int code;
	//提示信息
	private String msg;
	
	//返回给浏览器的数据
	private Map<String, Object> extend = new HashMap<String, Object>();

	public static Msg success(){
		Msg result = new Msg();
		result.setCode(100);
		result.setMsg("处理成功!");
		return result;
	}
	
	public static Msg fail(){
		Msg result = new Msg();
		result.setCode(200);
		result.setMsg("处理失败!");
		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 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;
	}
	
	
}

EmployeeController.java

package com.ssm.crud.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
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.crud.bean.Employee;
import com.ssm.crud.mapper.EmployeeMapper;
import com.ssm.crud.service.employeeService;
import com.ssm.crud.util.Msg;

@Controller
public class EmployeeController {

	@Autowired
	employeeService employeeService;

	@Autowired
	EmployeeMapper employeeMapper;

	@RequestMapping("/emps")
	@ResponseBody
	public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
		
		// 引入PageHelper分页插件
		//设置返回查询结果的排序规律(字段名 排序规律)
		PageHelper.orderBy("emp_id asc");
		// 在查询之前只需要调用,传入页码,以及每页的大小
		PageHelper.startPage(pn, 5);
		// startPage后面紧跟着的这个查询操作就是一个分页查询操作
		List<Employee> emps = employeeService.getAll();

		// 使用pageInfo包装查询后的结果,只需要将pageInfo交给页面就行了。
		// 封装了详细的分页信息,包括有我们查询出来的数据,传入连续显示的页数
		PageInfo<Employee> page = new PageInfo<Employee>(emps, 5);
		
        return Msg.success().add( "pageInfo" , page);		
	}
}

三、编辑前端

index.jsp

前端首先是 加载html 标签,然后加载 JavaScript 语句
js执行过程分三步:1、加载 table 数据 2、加载分页信息  3、加载分页栏。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径:
不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。
以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:3306);需要加上项目名
		http://localhost:3306/crud
 -->
<script type="text/javascript"
	src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>

<link
	href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet">

</head>

<body>
	<div class="container">
		<!-- 标题 -->
		<div class="col-md-12">
			<h1>SSM-CRUD</h1>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 offset-md-8">
				<button class="btn btn-primary btn-sm">
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
			</div>
		</div>

		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
					<thead>
						<tr>
							<th>#</th>
							<th>empName</th>
							<th>gender</th>
							<th>email</th>
							<th>deptName</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					
					</tbody>
				</table>
			</div>
		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<div class="col-md-6" id="page_info_area"></div>
			
			<div class="col-md-6" id="page_nav_area"></div>
		</div>
	</div>

	<script type="text/javascript">
		//页面加载完成以后,直接发送ajax请求,拿到分页数据
	
		//1、页面加载完成以后,直接去发送ajax请求,要到分页数据
		$(function(){
			//去首页
			to_page(1);
		});
		
		function to_page(pn){
			$.ajax({
				url:"${APP_PATH}/emps",
				data:"pn="+pn,
				type:"GET",
				success:function(result){
					//console.log(result);
					//1、解析并显示员工数据
					build_emps_table(result);
					//2、解析并显示分页信息
					build_page_info(result);
					//3、解析显示分页条数据
					build_page_nav(result);
				}
			});
		}
		
/* 		$(function() {
			$.ajax({
				url : "${APP_PATH}/emps",
				data : "pn=1",
				type : "GET",
				success : function(result) {
					//console.log(result) 
					//1、解析并显示员工信息
					build_emps_table(result);
					//2、解析并显示分页信息
					build_page_info(result);
					//3、解析显示分页条
					build_page_nav(result);

				}
			});
		}); */

		function build_emps_table(result) {
			//清空table表格,如果不请空,下一次请求时,数据会在原来的基础上,不断添加。
			$("#emps_table tbody").empty();
			
			var emps = result.extend.pageInfo.list;
			$.each(emps, function(index, item) {
				//alert(item.empName);
				
				//构建单元格
				var empIdTd = $("<td></td>").append(item.empId);
				var empNameTd = $("<td></td>").append(item.empName);
				var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
				var emailTd = $("<td></td>").append(item.email);
				var deptNameTd = $("<td></td>").append(item.department.deptName);				
				/**
				<button class="btn btn-primary btn-sm">
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
				**/
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit-btn")
				.append($("<i></i>").addClass("icon-edit icon-large")).append(" 编辑");
                //为编辑按钮添加一个自定义的属性,来表示当前员工id
                editBtn.attr("edit-id",item.empId);
                var deleteBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete-btn")
				.append($("<i></i>").addClass("icon-trash icon-large")).append(" 删除");
                //为删除按钮添加一个自定义的属性来表示当前删除的员工id
                deleteBtn.attr("delete-id",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(deleteBtn);

                //append方法执行完成以后还是返回原来的元素
				$("<tr></tr>")
                .append(empIdTd)
				.append(empNameTd)
				.append(genderTd)
				.append(emailTd)
				.append(deptNameTd)
				//.append(editBtn)
				//.append(deleteBtn)
				.append(btnTd)
				.appendTo("#emps_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+"记录")
		}
		
		//解析显示分页条
		function build_page_nav(result) {
			//page_nav_area
			//请空之前的分页条,如果不请空,下一次请求时,数据会在原来的基础上,不断添加。
			$("#page_nav_area").empty();
			
			var ul = $("<ul></ul>").addClass("pagination");
			
			//构建元素
			var firstPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("首页")  );
			var prePageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&laquo;")  );
		
			var lastPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").attr("href","#").append("末页")   );
			var nextPageLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append("&raquo;")   );

			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			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);
				});
			}
			
			//遍历页码号1,2,3等,给ul中添加页码提示
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi = $("<li></li>").addClass("page-item").append(  $("<a></a>").addClass("page-link").append(item)  );
				if(result.extend.pageInfo.pageNum == item){
					numLi.addClass("active");
				}
				
				numLi.click(function(){
					to_page(item);
				});
				
				ul.append(numLi);
			})
			
			//添加下一页和末页 的提示
			ul.append(nextPageLi).append(lastPageLi);
			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.pages);
				});
			}
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
	</script>

</body>
</html>

 

 

SSM小项目-(5)-前端交互基于http请求方案

一、后端数据接口

EmployeeController.java

package com.ssm.crud.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.ssm.crud.bean.Employee;
import com.ssm.crud.mapper.EmployeeMapper;
import com.ssm.crud.service.employeeService;

@Controller
public class EmployeeController {

	@Autowired 
	employeeService employeeService;
	
	@Autowired
	EmployeeMapper employeeMapper;
	
	/**
	 * 查询员工数据(分页查询)
	 * 
	 * @return
	 */
	@RequestMapping("/emps")
	public String getEmps( @RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
		
                // 引入PageHelper分页插件
		//设置返回查询结果的排序规律(字段名 排序规律)
		PageHelper.orderBy("emp_id asc");
		// 在查询之前只需要调用,传入页码,以及每页的大小
		PageHelper.startPage(pn, 5);
		// startPage后面紧跟着的这个查询操作就是一个分页查询操作
		List<Employee> emps = employeeService.getAll();
		
		
		// 使用pageInfo包装查询后的结果,只需要将pageInfo交给页面就行了。
		// 封装了详细的分页信息,包括有我们查询出来的数据,传入连续显示的页数
		PageInfo page = new PageInfo(emps, 5);
                //设置返回查询结果的排序规律(字段名 排序规律)
		PageHelper.orderBy("emp_id asc");

		model.addAttribute("pageInfo", page);

		/*****  一开始 EmployeeService 方法中 居然 返回的 null,忘记修改了 坑爹的教训啊 
		System.out.println("当前页码:"+page.getPageNum());
		System.out.println("总记录数:"+page.getTotal());
		System.out.println("每页的记录数:"+page.getPageSize());
		System.out.println("总页码:"+page.getPages());
		System.out.println("是否第一页:"+page.isIsFirstPage());
		System.out.println("连续显示的页码:");
		int[] nums = page.getNavigatepageNums();
		for (int i = 0; i < nums.length; i++) {
			System.out.println(nums[i]);
		}	
		******/
		return "list";
	}
	
}

从上面的数据接口我们可以看出,当http请求比如   /emp?pn=2    就能返回需要的信息了。  

二、编写结果返回页

请求地址:http://localhost:8080/ssm.crud/emps

结果返回:list.jsp  【因为是转发,不会显示结果页的url路径】

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径:
不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。
以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:8080);需要加上项目名
		http://localhost:8080/ssm.crud
 -->
<script type="text/javascript"
	src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>

<link
	href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet">

</head>

<body>
	<div class="container">
		<!-- 标题 -->
		<div class="col-md-12">
			<h1>SSM-CRUD</h1>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 offset-md-8">
				<button class="btn btn-primary btn-sm">
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm">
					<i class="icon-trash icon-large"></i> 删除
				</button>
			</div>
		</div>

		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover">
					<tr>
						<th>#</th>
						<th>empName</th>
						<th>gender</th>
						<th>email</th>
						<th>deptName</th>
						<th>操作</th>
					</tr>
					<c:forEach items="${pageInfo.list}" var="emp">
						<tr>
							<th>${emp.empId}</th>
							<th>${emp.empName }</th>
							<th>${emp.gender == "M" ? "男" : "女"}</th>
							<th>${emp.email}</th>
							<th>${emp.department.deptName}</th>
							<th>
								<button class="btn btn-primary btn-sm">
									<i class="icon-edit icon-large"></i> 编辑
								</button>
								<button class="btn btn-danger btn-sm">
									<i class="icon-trash icon-large"></i> 删除
								</button>
							</th>
						</tr>
					</c:forEach>
				</table>
			</div>
		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<div class="col-md-6">
				当前第${pageInfo.pageNum}页,总共有${pageInfo.pages}页,总共有${pageInfo.total}记录。
			</div>


			<div class="col-md-6">
				<nav aria-label="Page navigation example">
				<ul class="pagination">
					<li class="page-item"><a class="page-link"
						href="${APP_PATH}/emps?pn=1">首页</a></li>

					<c:if test="${pageInfo.hasPreviousPage}">
						<li class="page-item"><a class="page-link"
							href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}"
							aria-label="Previous"> <span aria-hidden="true">&laquo;</span><span
								class="sr-only">Previous</span></a></li>
					</c:if>
					<!-- jstl 标签 获取的都是用 .属性  不能用 get属性方法,否则会报错-->
					<c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
						<c:choose>
							<c:when test="${pageInfo.pageNum == page_Num }">
								<li class="page-item active"><a class="page-link" href="#">${page_Num}</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link"
									href="${APP_PATH}/emps?pn=${page_Num}">${page_Num}</a></li>
							</c:otherwise>
						</c:choose>
					</c:forEach>

					<c:if test="${pageInfo.hasNextPage}">
						<li class="page-item"><a class="page-link"
							href="${APP_PATH}/emps?pn=${pageInfo.pageNum+1}"
							aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span
								class="sr-only">Next</span>
						</a></li>
					</c:if>
					<li class="page-item"><a class="page-link"
						href="${APP_PATH}/emps?pn=${pageInfo.pages }">末页</a></li>
				</ul>
				</nav>
			</div>
		</div>
	</div>


</body>
</html>

 

SSM小项目-(4)-搭建Bootstrap前端框架

前端框架搭建

一、下载bootsrap框架

本项目采用的是V4版本,V4版本和V3有点不同,V4版本移除了图库。所以我们需要自己导入其他图库。

Bootstrap框架需要 jQuery.js,同时V4版本还需要 Popper.js。Our bootstrap.bundle.js and bootstrap.bundle.min.js include Popper, but not jQuery.

下载 Bootstrap 后,我们可以看到只有两个文件夹,一个是 js文件夹,一个是css文件夹。使用时只需要引入:JQuery.js , bootstrap.bundle.min.js,bootstrap.min.css就可以了。

二、下载图标

Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.

Preferred

We’ve tested and used these icon sets ourselves.

More options

While we haven’t tried these out, they do look promising and provide multiple formats—including SVG.

这里以  Font Awesome 举例,此处代码下载 ,此处使用说明 。
Font Awesome 总结来说:就是将下载好的 font 文件夹 拿出来,并从 css 文件夹中拿出 font-awesome.min.css 将这两个拿到 web项目中,并且在  font-awesome.min.css中编辑 font文件夹 所在路径。使用时,只需要引入 font-awesome.min.css 就行了。

我用的是 3.0版本的 Font Awesome,此处下载代码 ,框架引用方式和最新版的相同。只是在代码使用上有所不同:
3.0版本  <i class="icon-camera-retro"></i> 调用照相机图标。
5.4版本 <i class="fas fa-ghost"></i> 调用幽灵图标。

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fabstyle for brands.

三、前端框架整合概览

四、编写测试网页

index.jsp

[请求地址:http://localhost:8080/ssm.crud/index.jsp]

<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!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>Bootstrap 概述</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径:
不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。
以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:8080);需要加上项目名
		http://localhost:8080/crud
 -->
<script type="text/javascript"
	src="${APP_PATH }/static/jquery-1.12.4/jquery.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-4.1.3-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>

<link
	href="${APP_PATH }/static/font-awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet">

</head>
<body>
	<%
		/***  一开始,不写注释,想靠 <!-- -->将jsp跳转标签注释掉,发现没有效果啊,坑爹
		<!-- 
		<jsp:forward page="/emps"></jsp:forward>   
		--> ***/
	%>

	<div class="container">

		<!-- 标题 -->
		<div class="col-md-12">
			<h1>Bootstrap 是行列式布局 ,一行有12列。</h1>
		</div>

		<!-- 按钮 -->
		<div class="row">
			<!-- 布局占了4列,偏移8列 -->
			<div class="col-md-4 offset-md-8 ">
				<div class="bg-info">
					<h5>测试偏移</h5>
				</div>
			</div>
		</div>

		<hr />

		<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a
			class="navbar-brand" href="#">Navbar</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent" aria-expanded="false"
			aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item active"><a class="nav-link" href="#">Home
						<span class="sr-only">(current)</span>
				</a></li>
				<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
				<li class="nav-item dropdown"><a
					class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
					role="button" data-toggle="dropdown" aria-haspopup="true"
					aria-expanded="false"> Dropdown </a>
					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
						<a class="dropdown-item" href="#">Action</a> <a
							class="dropdown-item" href="#">Another action</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Something else here</a>
					</div></li>
				<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
				</li>
			</ul>
			<form class="form-inline my-2 my-lg-0">
				<input class="form-control mr-sm-2" type="search"
					placeholder="Search" aria-label="Search">
				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
			</form>
		</div>
		</nav>

		<hr />

		<div>
			<h6>右对齐的关键属性是==> margin-left:auto 这样子浏览器会尽可能增加右边距离</h6>
		</div>

		<hr />

		<div class="row">
			<!-- 右对齐的方式,利用了 ml-auto ==> margin-left:auto ,
		     这样子浏览器解析的时候,会尽可能的让布局多占空间的,所以变成右对齐了
		     mr-3 ==> margin-right:3*bootstrap的基本单位。
		     mx-auto ==>代表这个单位对左右两边的距离都是自动的,这个单位在父类看来是居中的。
		      -->
			<div class="ml-auto mr-3">
				<!-- 按钮样式,直接加类就行 -->
				<button class="btn btn-primary btn-sm ">
					<!-- 图标是加载了 font-awesome 的 -->
					<i class="icon-edit icon-large"></i> 编辑
				</button>
				<button class="btn btn-danger btn-sm ">
					<i class="icon-trash icon-large"></i> 删除
				</button>
			</div>


		</div>
		<hr />

		<div class="row">
            <!-- text-center 代表在本对象看来, 自己内部对象是居中的 -->
			<div class="col-md-12  text-center">
				<h5>
					所有的布局组件:如按钮,表单,表格,分页等组件,都有demo,可以直接复制粘贴拿来 <span
						class="badge badge-secondary">修改使用</span>
				</h5>
			</div>

		</div>


		<table class="table table-striped  table-hover">
			<thead>
				<tr>
					<th scope="col">#</th>
					<th scope="col">First</th>
					<th scope="col">Last</th>
					<th scope="col">Handle</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">1</th>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
				</tr>
				<tr>
					<th scope="row">2</th>
					<td>Jacob</td>
					<td>Thornton</td>
					<td>@fat</td>
				</tr>
				<tr>
					<th scope="row">3</th>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
				</tr>
			</tbody>
		</table>


		<nav aria-label="Page navigation example">
		<ul class="pagination justify-content-end">
			<li class="page-item disabled"><a class="page-link" href="#"
				tabindex="-1">Previous</a></li>
			<li class="page-item"><a class="page-link" href="#">1</a></li>
			<li class="page-item"><a class="page-link" href="#">2</a></li>
			<li class="page-item"><a class="page-link" href="#">3</a></li>
			<li class="page-item"><a class="page-link" href="#">Next</a></li>
		</ul>
	</div>

	<hr />


	<div class="row">

		<div class="col-md-8 mx-auto">
			<div class="bg-info text-center">
				<p >表单对象的校验,首先只要给form对象 添加 was-validated 属性就行,
				此时表单会根据 input的type属性,自动校验,比如是否为空,比如type=email,那么会检查是否是email。
				这些是bootstrap,自己添加的。一般我们不用,我们自己校验,判断 input 合法吧,
				并给input标签 添加 is-invalid 或 is-valid 属性,来表示是否合法。
				表单中的:valid-feedback 和 invalid-feedback 是用来 展示校验结果信息的
				</p>
			</div>
			
			
			<div>
			<form class="needs-validation" novalidate>
			<div class="form-row">
				<div class="col-md-4 mb-3">
					<label for="validationCustom01">First name</label> <input
						type="text" class="form-control" id="validationCustom01"
						placeholder="First name" value="Mark" required>
					<div class="valid-feedback">Looks good!</div>
				</div>
				<div class="col-md-4 mb-3">
					<label for="validationCustom02">Last name</label> <input
						type="text" class="form-control" id="validationCustom02"
						placeholder="Last name" value="Otto" required>
					<div class="valid-feedback">Looks good!</div>
				</div>
				<div class="col-md-4 mb-3">
					<label for="validationCustomUsername">Username</label>
					<div class="input-group">
						<div class="input-group-prepend">
							<span class="input-group-text" id="inputGroupPrepend">@</span>
						</div>
						<input type="text" class="form-control"
							id="validationCustomUsername" placeholder="Username"
							aria-describedby="inputGroupPrepend" required>
						<div class="invalid-feedback">Please choose a username.</div>
					</div>
				</div>
			</div>
			<div class="form-row">
				<div class="col-md-6 mb-3">
					<label for="validationCustom03">City</label> <input type="text"
						class="form-control" id="validationCustom03" placeholder="City"
						required>
					<div class="invalid-feedback">Please provide a valid city.</div>
				</div>
				<div class="col-md-3 mb-3">
					<label for="validationCustom04">State</label> <input type="text"
						class="form-control" id="validationCustom04" placeholder="State"
						required>
					<div class="invalid-feedback">Please provide a valid state.</div>
				</div>
				<div class="col-md-3 mb-3">
					<label for="validationCustom05">Zip</label> <input type="text"
						class="form-control" id="validationCustom05" placeholder="Zip"
						required>
					<div class="invalid-feedback">Please provide a valid zip.</div>
				</div>
			</div>
			<div class="form-group">
				<div class="form-check">
					<input class="form-check-input" type="checkbox" value=""
						id="invalidCheck" required> <label
						class="form-check-label" for="invalidCheck"> Agree to
						terms and conditions </label>
					<div class="invalid-feedback">You must agree before
						submitting.</div>
				</div>
			</div>
			<button class="btn btn-primary" type="submit">Submit form</button>
		</form>
			
			</div>
		</div>
	
	</div>
	
	
	<script>
		// Example starter JavaScript for disabling form submissions if there are invalid fields
		(function() {
			'use strict';
			window.addEventListener('load',
					function() {
						// Fetch all the forms we want to apply custom Bootstrap validation styles to
						var forms = document
								.getElementsByClassName('needs-validation');
						// Loop over them and prevent submission
						var validation = Array.prototype.filter.call(forms,
								function(form) {
									form.addEventListener('submit', function(
											event) {
										if (form.checkValidity() === false) {
											event.preventDefault();
											event.stopPropagation();
										}
										form.classList.add('was-validated');
									}, false);
								});
					}, false);
		})();
	</script>

</body>
</html>