基于SSM框架的人力资源管理后台系统+源代码+文档说明+数据库

# Java SSM练手小项目-手把手带你搭建一个基于SSM框架的人力资源管理后台系统 ## 前言 相信很多小伙伴在学习完SSM三大架构以后，不知道该如何找到一个简单容易上手的项目进行实战训练，经常在博客上看到一个不错的项目下载下来以后全部都是代码，无处下手。因此本文力求以最简单易懂的项目结构和代码搭建一个还较为完整（即从登录到退出的整个流程）的后台系统。 （高手勿喷） 整个项目的操作流程动态图如下： 用到的技术点有： * 框架：SSM * 数据库：MySQL * 前端框架：Bootstrap快速搭 搭建JSP页面 * 项目管理：MAVEN * 开发工具：IntellijIDEA * 开发环境：Windows 从这个项目中你可以完整独立地体验从前端到后台的搭建过程，以及使用SSM框架完成后台的CRUD整个流程。 ## 一、准备 准备部分主要包括数据库建表、SSM框架的搭建启动。 **1 数据库建表** tbl_emp表： ``` DROP TABLE IF EXISTS `tbl_emp`; CREATE TABLE `tbl_emp`( `emp_id` int(11) UNSIGNED NOT NULL auto_increment, `emp_name` VARCHAR(22) NOT NULL DEFAULT '', `emp_email` VARCHAR(256) NOT NULL DEFAULT '', `gender` CHAR(2) NOT NULL DEFAULT '', `department_id` int(11) NOT NULL DEFAULT 0, PRIMARY KEY(`emp_id`) ) ENGINE=INNODB DEFAULT CHARSET=UTF8; ``` tbl_dept表： ``` DROP TABLE IF EXISTS `tbl_dept`; CREATE TABLE `tbl_dept`( `dept_id` int(11) NOT NULL DEFAULT 0, `dept_name` VARCHAR(255) NOT NULL DEFAULT '', `dept_leader` VARCHAR(255) NOT NULL DEFAULT '' ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ``` 对应的实体类见bean/Employee.java和bean/Department.java。 **2 SSM项目搭建与启动** （1）首先导入项目中可能用到的依赖包： 见pom.xml. （2）web.xml： 见WEB-INF/web.xml. （3）Spring容器配置文件：applicationContext.xml： 见resources/applicationContext.xml. （4）SpringMVC配置文件：springmvc.xml： 见resources/springmvc.xml. **3 测试** 写好上述配置文件后，可以在controller目录下新建TestController.java文件和WEB-INF/jsp/test.jsp，启动容器测试是否成功。 ## 二、DAO层代码完成与测试 这一章主要完成数据库底层的CRUD代码实现与测试工作. **1. MyBasits配置文件** 见resources/MyBatis.xml. **2. DAO层代码** 首先编写实体类Employee 与 表tbl_emp相关操作代码。 EmployeeMapper.java主要接口有： ``` int deleteOneById(@Param("empId") Integer empId); int updateOneById(@Param("empId") Integer empId, @Param("employee") Employee employee); int insertOne(Employee employee); Employee selectOneById(@Param("empId") Integer empId); Employee selectOneByName(@Param("empName") String empName); // 查询带有部门信息的Employee Employee selectWithDeptById(@Param("empId") Integer empId); // 分页查询 List<Employee> selectByLimitAndOffset(@Param("limit") Integer limit,@Param("offset") Integer offset); int countEmps(); ``` 具体实现参考EmployeeMapper.java与EmployeeMapper.xml中代码。 写完后需要对实现的代码进行测试，以验证代码的正确性。 测试用例代码见EmployeeMapperTest.java。 类似地， 实体类Department与 表tbl_dept相关操作代码实现也如上类似，具体实现见DepartmentMapper.java 与 DepartmentMapper.xml，测试用例代码见DepartmentMapperTest.java。 ## 三、前端页面的搭建 前端页面实现的最终效果如下。 主页面：  员工操作页面（部门操作页面类似）：  最后加上一个登陆页面（比较简单的页面加上最简单的登录判断）：  主要就是采用Bootstrap3去搭建这个前端页面，然后再利用SSM框架+JSP完成从前端到后端的整个流程。 下面首先Bootstrap3去搭建前端页面。 #### **1 主页面的静态搭建** 主页面的HTML代码实现放在webapp/static/html/hrms_main.html，（此处仅仅为了方便查看和参考）。 整个主页面完成后，分别将其中公共部分的代码提取出来，如导航栏，左侧栏，尾部这3个部分都属于公共部分， 分别见hrms_head.html、hrms_foot.html、hrms_leftsidebar.html三个部分。 #### **2 公共页面的JSP实现及分层** 下面将上述公共部分的HTML代码用JSP实现，详细见WEB-INF/jsp/commom目录下的head.jsp、foot.jsp、leftsidebar.jsp。 然后实现主页面的内容，主要包括三个公共部分（导航栏+左侧栏+尾部+轮播部分），实现效果如下：  新建main.jsp，将上述三个公共部分的代码用 `<<%@ include file="./commom/xx.jsp"%>>`引入，再实现轮播图部分即可。 #### **3 员工操作/部门操作的静态页面实现** 员工操作页面与主页面3个公共部分相同，不同之处在于中间部分展示的是员工信息的表格显示，而主页面是一个轮播图。  下面就将实现employeePage的页面，详细代码见employeePage.jsp（即将main.jsp中的轮播部分换成员工表单显示部分即可）。 （为了方便对比与查看，将实现的HTML部分代码留在了项目目录中，实现的HTML代码见WEB-INF/static/html/hrms_employee.html。 相应的部门显示的页面类似，实现的HTML代码见WEB-INF/static/html/hrms_department.html。 然后将上述代码分别用JSP页面实现，即对应的employeePage.jsp和departmentPage.jsp。） ## 四、员工CRUD操作前后端实现 #### **1 员工信息查询的数据显示** 页面搭建完成以后，就要将从后台获取到的数据展示在对应的页面中。页面数据展示部分主要实现是利用JSP的JSTL表达式和AJAX+jQuery，将从后台获取到的数据显示在页面对应的位置。 由于部门操作与员工操作类似，下面主要讲解员工显示页面的实现。 整个流程是从数据库中查询到数据后，放在SpringMVC的ModelAndView中，然后前端通过JSTL就可以解析获取到的结果集。 （1）首先写一个JSON相关的操作类：JsonMsg.java。 （2）业务操作：EmployeeService.java； （3）Controller类：EmployeeController.java； EmployeeController.java中接口""emp/getEmpList?pageNo=WYY""是根据输入的页码返回对应页数的数据，然后用JSTL表达式进行解析显示。 ``` @RequestMapping(value = "/getEmpList", method = RequestMethod.GET) public ModelAndView getEmp(@RequestParam(value = "pageNo", defaultValue = "1") Integer pageNo){ ModelAndView mv = new ModelAndView(""); int limit = 5; // 记录的偏移量(即从第offset行记录开始查询)， // 如第1页是从第1行(offset=(21-1)*5=0,offset+1=0+1=1)开始查询； // 第2页从第6行(offset=(2-1)*5=5,offset+1=5+1=6)记录开始查询 int offset = (pageNo-1)*limit; //获取指定页数包含的员工信息 List<Employee> employees = employeeService.getEmpList(offset, limit); //获取总的记录数 int totalItems = employeeService.getEmpCount(); //获取总的页数 int temp = totalItems / limit; int totalPages = (totalItems % limit == 0) ? temp : temp+1; //当前页数 int curPage = pageNo; //将上述查询结果放到Model中，在JSP页面中可以进行展示 mv.addObject("employees", employees) .addObject("totalItems", totalItems) .addObject("totalPages", totalPages) .addObject("curPage", curPage); return mv; } ``` 然后在employeePage.jsp页面上将后端的Modal中数据取出来进行显示。 主要代码有： ``` <tbody> <c:forEach items="${employees}" var="emp"> <tr> <td>${emp.empId}</td> <td>${emp.empName}</td> <td>${emp.empEmail}</td> <td>${emp.gender ==