SSM+JSP+Bootstrap+Ajax小实例（员工CRUD系统）（六：增加员工功能前后端）

其他 2019-04-06 16:21:00 阅读次数: 0

        原文再续，书接上回，今天来讲一讲员工增加功能的前后端实现。

        首先是后端，我们先理一下需要实现的方法有哪些。首先在EmployeeService里需要有一个插入方法以及一个查询用户名是否已经存在的方法，在DepartmentService里需要有一个查询所有的部门信息的方法，在Controller里需要有相应的插入用户接口、查询用户是否存在接口以及查询所有的部门名称的接口。老规矩，想说的话都藏到备注里了，完整代码如下（我就不把以前的代码和这次的代码分开了，想看和以前的区别的可以直接去我github上去看）。

        EmployeeService.java:

package com.sunsy.crud.service;

import java.util.List;

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

import com.sunsy.crud.bean.Employee;
import com.sunsy.crud.bean.EmployeeExample;
import com.sunsy.crud.bean.EmployeeExample.Criteria;
import com.sunsy.crud.dao.EmployeeMapper;

@Service
public class EmployeeService {

	@Autowired
	EmployeeMapper employeeMapper;
	
	/**
	 * 员工保存
	 */
	public void saveEmp(Employee employee) {
		employeeMapper.insertSelective(employee);
	}
	
	/**
	 * 查询所有信息
	 * @return
	 */
	public List<Employee> getAll(){
		return employeeMapper.selectByExampleWithDept(null);
	}
	
	/**
	 * 校验用户名是否重复
	 * @param empName
	 * @return true代表不重复
	 */
	public boolean checkUser(String empName) {
		EmployeeExample example = new EmployeeExample();
		Criteria criteria = example.createCriteria();
		criteria.andEmpNameEqualTo(empName);
		long count = employeeMapper.countByExample(example);
		return count==0;
	}
}

DepartmentService.java:

package com.sunsy.crud.service;


import java.util.List;

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

import com.sunsy.crud.bean.Department;
import com.sunsy.crud.dao.DepartmentMapper;

@Service
public class DepartmentService {

	@Autowired
	private DepartmentMapper departmentMapper;
	
	public List<Department> getDepts(){
		List<Department> list = departmentMapper.selectByExample(null);
		return list;
	}
}

EmployeeController.java:

package com.sunsy.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.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.sunsy.crud.bean.Employee;
import com.sunsy.crud.bean.Msg;
import com.sunsy.crud.service.EmployeeService;

@Controller
public class EmployeeController {
	
	@Autowired
	EmployeeService employeeService;
	
	
	@RequestMapping(value="/emp", method=RequestMethod.POST)
	@ResponseBody
	public Msg saveEmp(Employee employee) {
		employeeService.saveEmp(employee);
		return Msg.success();
	}
	
	
	/**
	 * 分页查询所有员工信息，返回json的形式
	 * 使用responsebody需要加入解析json的包（springboot就不需要了）
	 */
	@RequestMapping("/emps")
	@ResponseBody	
	public Msg getEmpsWithJson(@RequestParam(value="pageNum", defaultValue="1")Integer pageNum) {
		//引入分页插件pagehelper
		//在startPage后的第一个查询会变成分页查询
		PageHelper.startPage(pageNum, 5);
		List<Employee> emps = employeeService.getAll();
		
		//把查询结果放到pageInfo里，这个pagehelper提供的类很好用，封装了各种我们需要的信息，那个5代表连续现实的页数
		PageInfo<Employee> page = new PageInfo<Employee>(emps, 5);
		return Msg.success().add("pageInfo", page);
	}
	
	/**
	 * 检查用户名是否可用
	 * @param empName
	 * @return
	 */
	@ResponseBody
	@RequestMapping("checkuser")
	public Msg checkuser(@RequestParam("empName") String empName) {
		boolean b = employeeService.checkUser(empName);
		if(b) {
			return Msg.success();
		}else {
			return Msg.fail();
		}
	}
	
	
//	/**
//	 * 分页查询所有员工信息，返回model的形式
//	 * @return
//	 */
//	@RequestMapping("/emps")
//	public String getEmps(@RequestParam(value="pageNum", defaultValue="1")Integer pageNum, Model model) {
//		
//		//引入分页插件pagehelper
//		//在startPage后的第一个查询会变成分页查询
//		PageHelper.startPage(pageNum, 5);
//		List<Employee> emps = employeeService.getAll();
//		
//		//把查询结果放到pageInfo里，这个pagehelper提供的类很好用，封装了各种我们需要的信息，那个5代表连续现实的页数
//		PageInfo<Employee> page = new PageInfo<Employee>(emps, 5);
//		
//		//把pageinfo放到model里，这样就会传给界面
//		model.addAttribute("pageInfo", page);
//		return "list";
//	}
}

DepartmentController.java:

package com.sunsy.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.sunsy.crud.bean.Department;
import com.sunsy.crud.bean.Msg;
import com.sunsy.crud.service.DepartmentService;

@Controller
public class DepartmentController {

	@Autowired
	private DepartmentService departmentService;
	
	@RequestMapping("/depts")
	@ResponseBody
	public Msg getDepts() {
		List<Department> list = departmentService.getDepts();
		return Msg.success().add("depts", list);
		
	}
}

        接下来是前端代码，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">
<title>员工列表</title>

<!-- 找到web项目的webapp路径 -->
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>

	
	<!-- 员工添加模态框 -->
	<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">添加员工</h4>
	      </div>
	      <div class="modal-body">
	        <form class="form-horizontal">
				  <div class="form-group">
				    <label class="col-sm-2 control-label">empName</label>
				    <div class="col-sm-10">
				      <input type="text" name="empName" class="form-control" id="empName_input" placeholder="empName">
				      
				      <span class="help-block"></span>
				      
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <label class="col-sm-2 control-label">email</label>
				    <div class="col-sm-10">
				      <input type="text" name="email" class="form-control" id="email_input" placeholder="[email protected]">
				    
				      <span class="help-block"></span>
				    
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <label class="col-sm-2 control-label">email</label>
				    <div class="col-sm-10">
				        <label class="radio-inline">
						    <input type="radio" name="gender" id="gender1_add_input" value="M" checked="ckecked"> 男
						</label>
						<label class="radio-inline">
							<input type="radio" name="gender" id="gender2_add_input" value="F"> 女
						</label>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <label class="col-sm-2 control-label">deptName</label>
				    <div class="col-sm-10">
				        <select class="form-control" name="dId" id="dept_select">

				        </select>
				    </div>
				  </div>
				  
				</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="add_emp_btn">保存</button>
	      </div>
	    </div>
	  </div>
	</div>
	

	<!-- 搭建显示页面 -->
	<div class="container">
	
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		
		<!-- 删除和新增两个按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-success" id="emp_add_modal_btn">新增</button>
				<button class="btn btn-danger">删除</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>departName</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 totalRecord;
	
		//页面加载完成后，直接发ajax请求，把结果展示出来
		$(function(){
			to_page(1);
		});
		
		//跳转到指定页码
		function to_page(pn){
			$.ajax({
				url:"${APP_PATH}/emps",
				data:"pageNum="+pn,
				type:"get",
				success:function(result){
					build_emps_table(result);
					buile_page_info(result);
					build_page_nav(result);
				}
			});
		}
		
		//解析员工数据
		function build_emps_table(result){
			
			//先清空
			$("#emps_table tbody").empty();
			
			var emps = result.extend.pageInfo.list;
			$.each(emps, function(index, item){
				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);
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm")
								.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
				var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
								.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
				var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn)
				$("<tr></tr>").append(empIdTd)
					.append(empNameTd)
					.append(genderTd)
					.append(emailTd)
					.append(deptNameTd)
					.append(btnTd)
					.appendTo("#emps_table tbody");
			});
		}
		
		//解析分页信息
		function buile_page_info(result){
			$("#page_info_area").empty();
			$("#page_info_area").append("当前" + result.extend.pageInfo.pageNum + 
					"页，总" + result.extend.pageInfo.pages +
					"页，总" + result.extend.pageInfo.total + "条记录");
			totalRecord = result.extend.pageInfo.total;
		}
		
		//解析分页数据
		function build_page_nav(result){
			$("#page_nav_area").empty();
			var ul = $("<ul></ul>").addClass("pagination");
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
			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);
				});
			}
			
			
			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
			if(result.extend.pageInfo.hasNextPage==false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				lastPageLi.click(function(){
					to_page(result.extend.pageInfo.pages);
				});
				nextPageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum + 1);
				});
			}
			
			
			ul.append(firstPageLi).append(prePageLi);
			
			$.each(result.extend.pageInfo.navigatepageNums, function(index, item){
				var numLi = $("<li></li>").append($("<a></a>").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);
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		//点击新增将弹出模态框
		$("#emp_add_modal_btn").click(function(){
			
			//先清除表单数据
			$("#empAddModal form")[0].reset();
			
			//发送ajax请求，查询所有部门的信息，显示在下拉选择列表中
			getDepts();
			
			//弹出模态框
			$("#empAddModal").modal({
				backdrop:"static"
			});
		});
		
		//获取所有部门名称
		function getDepts(){
			$.ajax({
				url:"${APP_PATH}/depts",
				type:"GET",
				success:function(result){
					//把部门信息显示在下拉选择中
					$.each(result.extend.depts, function(){
						var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
						optionEle.appendTo("#empAddModal select");
					});
				}
			});
		}
		
		//校验表格中的数据
		function validate_add_form(){
			//拿到数据，使用正则表达式校验
			var empName = $("#empName_input").val();
			//校验用户名
			var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u\2E80-\u9FFF]{2,5})/;
			if(!regName.test(empName)){
				//先清除样式，然后校验如果有错误，会友好的在输入姓名的列表中显示出校验不合格的原因
				show_validate_msg("#empName_input", "error", "用户名必须是2-5位中文或6-16位英文和数字的组合");
				return false;
			}else{
				show_validate_msg("#empName_input", "success", "");
			}
			//校验邮箱
			var email = $("#email_input").val();
			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			if(!regEmail.test(email)){
				//先清除样式，如果有错误，会友好的在输入email的列表中显示出校验不合格的原因
				show_validate_msg("#email_input", "error", "邮箱格式不正确");
				return false;
			}else{
				show_validate_msg("#email_input", "success", "");
			}
			
			return true;
		}
		
		//清除校验错误时加的样式
		function show_validate_msg(ele, status, msg){
			
			$(ele).parent().removeClass("has-success has-error");
			$(ele).next("span").text("");
			if("success"==status){
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text(msg);
			}else if("error"==status){
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}
		
		//校验用户名是否可用（即是否重复）
		$("#empName_input").change(function(){
			var empName = this.value;
			$.ajax({
				url:"${APP_PATH}/checkuser",
				data:"empName=" + empName,
				type:"GET",
				success:function(result){
					if(result.code==0){
						show_validate_msg("#empName_input", "success", "用户名可用");
						$("#add_emp_btn").attr("ajax-va", "success");
					}else{
						show_validate_msg("#empName_input", "error", "用户名已存在");
						$("#add_emp_btn").attr("ajax-va", "error");
					}
				}
			});
			
		});
		
		//新增模态框里的保存按钮
		$("#add_emp_btn").click(function(){
			
			//对数据进行校验
			if(!validate_add_form()){
				return false
			};
			
			//判断检测用户名重复时放入的属性信息，来确定下一步干啥
			if($(this).attr("ajax-va")=="error"){
				return false;
			}
			
			$.ajax({
				url:"${APP_PATH}/emp",
				type:"POST",
				//可以直接把empAddModal form里的值构成json格式
				data:$("#empAddModal form").serialize(),
				success:function(result){
					//应去往最后一页，显示刚刚保存的数据
					to_page(totalRecord);
					//关闭模态框
					$("#empAddModal").modal("hide");
				}
			});
		});
		
	</script>
	
</body>
</html>

        好了，这个系列就到此结束了，剩下的修改和删除功能我感觉没有啥继续写的必要了，毕竟只是一个简单的小栗子，没有啥复杂的逻辑，想说的知识点看前几章完全够了。

        最后还是附上该项目的github地址吧，想要源码的朋友们可以自行下载：https://github.com/ssystc/ssm-crud.git

        然后是csdn的项目下载路径，我也附上了（球球各位有积分的老爷们用这个下吧，只要1分，1分也是情，1分也是爱啊）：

        https://download.csdn.net/download/u014627099/10854482

猜你喜欢

转载自blog.csdn.net/u014627099/article/details/85168340
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022