本文共 7118 字，大约阅读时间需要 23 分钟。

Spring+SpringMVC+Mybatis实现增删改查--（四）SSM新增员工页面搭建

新增员工：

1.在index.jsp页面点击“新增”弹出新增对话框

2.去数据库查询部门列表，显示在新增对话框中

3.用户输入数据并进行校验（校验这里分成了三种）

  jQuery前端校验、ajax用户名的重复校验、重要数据（后端校验（JR303），唯一约束）

4完成保存。

REST风格的URI

规定URI：

/emp/{id}  GET  查询

/emp       POST保存员工

/emp/{id}  PUT  修改员工

/emp/{id}  DELETE删除员工

新增员工的具体步骤：

1.新增弹出对话框

（1）在bootstrap中JavaScript插件找到模态对话框，参考官网的代码

（2）弹出模态对话框的方式（官网给出了两种方式）

（3）具体的代码实现方式

   	
   
	  
    
	    
     
	      
      
	        
       ×	        
       
员工添加
	      
      
	      
      
	        
       	        
       
			  
        
 
         empName 
         
 
           
           
         
 
        
			  
        
 
         email 
         
 
           
           
         
 
        
			  
        			  
        
 
         gender 
         
 
            男  
            女  
         
 
        
			  
        			  
        
 
         deptName 
         
 
           
            
         
 
        
			
       
			
       	      
      
	      
      
	        
       关闭	        
       保存	      
      
	    
     
	  
    
	
   

2.获取部门的信息，显示在下拉列表中

（1）index.jsp发出ajax请求查出所有部门信息并显示在下拉列表中

//查出所有的部门信息并显示在下拉列表中		function getDepts(ele){			$(ele).empty();			$.ajax({				url:"${APP_PATH}/depts",				type:"GET",				success:function(result){					//{"code":0,"msg":"处理成功","					//data":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}					//显示部门信息在下拉列表中										$.each(result.data.depts,function(){						var optionEle=$("").append(this.deptName).attr("value",this.deptId);						optionEle.appendTo("#dept_add_select");					});				}			});		}

（2）DepartmentService.java的代码

package com.lcz.crud.service;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import com.lcz.crud.bean.Department;import com.lcz.crud.dao.DepartmentMapper;@Servicepublic class DepartmentService {	@Autowired	private DepartmentMapper departmentMapper;	public List
   
     getDepts() {		List
    
      list = departmentMapper.selectByExample(null);		return list;	}}
    
   

（3）DepartmentController.java用来获取部门的信息

package com.lcz.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.lcz.crud.bean.Department;import com.lcz.crud.bean.Msg;import com.lcz.crud.service.DepartmentService;/** * 处理和部门有关的请求 * @author LvChaoZhang * */@Controllerpublic class DepartmentController {	@Autowired	private DepartmentService departmentService;	/**	 * 返回所有的部门信息	 */	@RequestMapping("/depts")	@ResponseBody	public Msg getDepts() {		//查出所有的部门信息		List
   
     list=departmentService.getDepts();		return Msg.success().add("depts", list);	}}
   

3.数据校验

（1）jQuery前端校验新建对话框的用户名、密码

/校验表单数据的方法		function validate_add_form() {			//1.先拿到要校验的数据，使用正则表达式			var empName=$("#empName_add_input").val();			var regName=/(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;			if(!regName.test(empName)){				//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");				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(email)) {				//alert("邮箱格式不正确");				//清空这个元素之前的样式				show_validate_msg("#email_add_input","error","邮箱格式不正确");				return false;			}else{				show_validate_msg("#email_add_input","success","");			}			return true;		}

（2）ajax请求用户名是否重复

a.index.jsp发出ajax请求

//校验用户名是否可用		$("#empName_add_input").change(function(){			//发送ajax请求校验用户名是否可用			var empName=this.value;			$.ajax({				url:"${APP_PATH}/checkuser",				data:"empName="+empName,				type:"POST",				success:function(result){					if(result.code==0){						show_validate_msg("#empName_add_input","success","用户名可用");						$("#emp_save_btn").attr("ajax-va","success");					}else{						show_validate_msg("#empName_add_input","error",result.data.va_msg);						$("#emp_save_btn").attr("ajax-va","error");					}				}			});		});

b.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;	}

c.EmployeeController.java中调用检查用户名

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

（3）后端数据JR303校验

a.pom.xml中导入hibernate-validator包

   	
   	
   	    
    
     org.hibernate.validator
    	    
    
     hibernate-validator
    	    
    
     6.0.7.Final
    	
   

b.Employee.java写入@Pattern

@Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})",message="用户名必须是2-5位中文或者6-16位英文和数字的组合")    private String empName;    private String gender;    //@Email    @Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",message="邮箱格式不正确")    private String email;

c.保存按钮的事件

    EmployeeService的保存方法

/**	 * 员工保存	 * 1.支持JSR303校验	 * 导入hibernate validator	 * @param employee	 */	public void saveEmp(Employee employee) {		employeeMapper.insertSelective(employee);	}

    EmployeeController的保存方法外加校验

/**	 * 员工保存	 * @return	 */	@RequestMapping(value="/emp",method=RequestMethod.POST)	@ResponseBody	public Msg saveEmp(@Valid Employee employee,BindingResult result) {//因为表单中name中的值跟employee对象的值一样，所以自动封装		if(result.hasErrors()) {			//校验失败，返回失败,在模态框中显示校验失败的错误信息			Map
   
    map=new HashMap
    
     ();			List
     
       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 {			employeeService.saveEmp(employee);			return Msg.success();		}	}
     
    
   

4.保存按钮事件

  正常保存之后会跳转到最后一页

给出这一节完整的index.jsp，功能是通过JavaScript的封装库jquery来实现功能的，功能上都有代码解释，可以参考

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
   <%	pageContext.setAttribute("APP_PATH", request.getContextPath());%>
   
   	
   	
   
	  
    
	    
     
	      
      
	        
       ×	        
       
员工添加
	      
      
	      
      
	        
       	        
       
			  
        
 
         empName 
         
 
           
           
         
 
        
			  
        
 
         email 
         
 
           
           
         
 
        
			  
        			  
        
 
         gender 
         
 
            男  
            女  
         
 
        
			  
        			  
        
 
         deptName 
         
 
           
            
         
 
        
			
       
			
       	      
      
	      
      
	        
       关闭	        
       保存	      
      
	    
     
	  
    
	
   
	
   	
   
				
    		
    
			
     
				
      
SSM-CRUD
			
     
		
    
				
    		
    
			
     
				
      新增				
      删除			
     
		
    
				
    
				
    		
    
			
     
				
      
					       
					        
          
#
          
empName
          
gender
          
email
          
deptName
          
操作
         
					       
					       
											       
				      
			
     
		
    
				
    		
    
			
     			
     
				
      			
     
						
     			
     
							
     
					
    
	
   
	

转载地址：https://codingchaozhang.blog.csdn.net/article/details/80672179 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！