[置顶] 小型的员工管理系统-SSM-06
2017-05-10 16:35
288 查看
首先我们先来看下需求页面吧!
先进入这个页面,在点击这个链接进入到员工管理系统!
![](http://img.blog.csdn.net/20170510153033794?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzEwODAwODk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20170510153151624?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
首先我们先来实行第一步吧,就是获取员工列表,从这里不难发现展示的列表中包含部门的名称,那么这时我们是不是得在写个有关查询全部列表的方法和sql呢?这个不难实现,最重要的是分页这个。那么我们就来结合着分页来完成这个页面和功能吧!
第一节也介绍了前端我们采用的是Boostrap框架,那么我们就先把boostrap导入进来吧。
将官网中的boostrap放到static文件下,然后加入jquery,如下图所示:
![](http://img.blog.csdn.net/20170510153539611?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzEwODAwODk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
先来分析下上面的需求吧,首先我们可以定义一个页面index.jsp然后走方法进入到员工管理系统。
index.jsp:
其中:
这些是Boostrap中必须加的,所以学习的时候注意下,可以看下官网的学习文档啊。
看到index.jsp可以直接明显的知道需要什么方法。
请求的方法是:getEmplist()方法。
这时我们来写员工的Controller:
EmployeeController.java:
问题一:为什么传入 pageNum参数并设置为1.
因为每个展示的列表中用到了分页,必须传入一个参数为页数,默认的页数是从第一页开始。
我们可以使用pageHelper的PageInfo封装好的方法来操作。供学习:点击打开链接
在进行查询这个方法这前先进行进行分页:
然后把获取的员工列表用pageInfo进行封装。
这时可以在empList页面中获取一些数据。
empList.jsp:
首页,末页,上一页,下一页都可以在PageInfo中进行获取即可。详细的学习就看官网的文档吧!
先进入这个页面,在点击这个链接进入到员工管理系统!
首先我们先来实行第一步吧,就是获取员工列表,从这里不难发现展示的列表中包含部门的名称,那么这时我们是不是得在写个有关查询全部列表的方法和sql呢?这个不难实现,最重要的是分页这个。那么我们就来结合着分页来完成这个页面和功能吧!
第一节也介绍了前端我们采用的是Boostrap框架,那么我们就先把boostrap导入进来吧。
将官网中的boostrap放到static文件下,然后加入jquery,如下图所示:
先来分析下上面的需求吧,首先我们可以定义一个页面index.jsp然后走方法进入到员工管理系统。
index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!--跳转到getEmplist的Controller --> <%-- <jsp:forward page="/getEmplist"></jsp:forward> --%> <!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> <link href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"> <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> <script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script> </head> <body> <h1 align="center"> <a href="${pageContext.request.contextPath }/getEmplist" class="btn btn-default btn-lg disabled" role="button">进入到员工管理系统</a> </h1> </body> </html>
其中:
link href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"> <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> <script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
这些是Boostrap中必须加的,所以学习的时候注意下,可以看下官网的学习文档啊。
看到index.jsp可以直接明显的知道需要什么方法。
请求的方法是:getEmplist()方法。
这时我们来写员工的Controller:
EmployeeController.java:
package com.yiyi.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.yiyi.crud.bean.Employee; import com.yiyi.crud.service.EmployeeService; /** * * @Title: EmployeeController.java * @Package com.yiyi.crud.controller * @Description: 员工列表的CRUD操作类 * @author zww * @date 2017年5月7日 下午9:26:17 * @version V1.0 */ @Controller public class EmployeeController { @Autowired private EmployeeService employeeService; /** * 获取员工列表的方法 * @param model * @param pageSize * @return */ @RequestMapping("/getEmplist") public String getEmplist(Model model,@RequestParam(value="pageNum",defaultValue="1") Integer pageNum) { //在查询之前先设置传入的页数和设置每页显示的大小 PageHelper.startPage(pageNum, 5); // 获取员工列表 List<Employee> employeeList = employeeService.getEmpList(); //用PageInfo对结果进行包装 PageInfo page = new PageInfo<Employee>(employeeList, 5); // 将PageInfo放入到域对象中 model.addAttribute("page", page); return "empList"; } }
问题一:为什么传入 pageNum参数并设置为1.
因为每个展示的列表中用到了分页,必须传入一个参数为页数,默认的页数是从第一页开始。
我们可以使用pageHelper的PageInfo封装好的方法来操作。供学习:点击打开链接
在进行查询这个方法这前先进行进行分页:
//在查询之前先设置传入的页数和设置每页显示的大小 PageHelper.startPage(pageNum, 5);
然后把获取的员工列表用pageInfo进行封装。
这时可以在empList页面中获取一些数据。
empList.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>员工列表</title> <% pageContext.setAttribute("CRM", request.getContextPath()); %> <!-- web路径: 不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。 以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:3306);需要加上项目名 http://localhost:3306/crud --> <script type="text/javascript" src="${CRM }/static/js/jquery-1.12.4.min.js"></script> <link href="${CRM }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="${CRM }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <!-- 搭建显示页面 --> <div class="container"> <!-- 标题 --> <div class="row"> <div class="col-md-12"> <h1 style="color:red;">小型的员工管理系统</h1> </div> </div> <!-- 按钮 --> <div class="row"> <div class="col-md-4 col-md-offset-8"> <button class="btn btn-primary">新增</button> <button class="btn btn-danger">删除</button> </div> </div> <!-- 显示表格数据 --> <div class="row"> <div class="col-md-12"> <table class="table table-bordered"> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>邮件</th> <th>部门名称</th> <th>操作</th> </tr> <c:forEach items="${page.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"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑 </button> <button class="btn btn-danger btn-sm"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除 </button> </th> </tr> </c:forEach> </table> </div> </div> <!-- 显示分页信息 --> <div class="row"> <!--分页文字信息 --> <div class="col-md-6">当前 ${page.pageNum }页,总${page.pages } 页,总 ${page.total } 条记录</div> <!-- 分页条信息 --> <div class="col-md-6"> <nav aria-label="Page navigation"> <ul class="pagination"> <li><a href="${CRM }/getEmplist?pageNum=1">首页</a></li> <c:if test="${page.hasPreviousPage }"> <li><a href="${CRM }/getEmplist?pn=${page.pageNum-1}" aria-label="Previous"> <span aria-hidden="true">«</span> </a></li> </c:if> <c:forEach items="${page.navigatepageNums }" var="page_Num"> <c:if test="${page_Num == page.pageNum }"> <li class="active"><a href="#">${page_Num }</a></li> </c:if> <c:if test="${page_Num != page.pageNum }"> <li><a href="${CRM }/getEmplist?pageNum=${page_Num }">${page_Num }</a></li> </c:if> </c:forEach> <c:if test="${page.hasNextPage }"> <li><a href="${CRM }/getEmplist?pn=${page.pageNum+1 }" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </c:if> <li><a href="${CRM }/getEmplist?pageNum=${page.pages}">末页</a></li> </ul> </nav> </div> </div> </div> </body> </html>
首页,末页,上一页,下一页都可以在PageInfo中进行获取即可。详细的学习就看官网的文档吧!
相关文章推荐
- [置顶] 小型的员工管理系统-SSM-03
- [置顶] 小型的员工管理系统-SSM-05
- [置顶] 小型的员工管理系统-SSM-01
- [置顶] 小型的员工管理系统-SSM-04
- [置顶] 小型的员工管理系统-SSM-02
- [置顶] 基于SSM的健身管理系统
- 基于SSM实现的简易员工管理系统
- 【员工管理系统的搭建】【SSM框架】
- 基于SSM实现的简易员工管理系统(基于阿里云的网站上线篇)
- [置顶] ssh员工管理系统(2)
- ssm项目---人事管理系统:员工与部门、职位实现一对一
- 基于SSM实现的简易员工管理系统(基于阿里云的网站上线篇)
- 基于SSM实现的简易员工管理系统(基于阿里云的网站上线篇)
- 基于SSM实现的简易员工管理系统(基于阿里云的网站上线篇)
- [置顶] SSH 员工管理系统(1)
- 使用 XForms 和 Ruby on Rails 开发小型门诊管理系统,第 4 部分
- 小型GIS在电力系统中的管理应用
- 使用 XForms 和 Ruby on Rails 开发小型门诊管理系统,第 3 部分:实现护士和医生 XForm
- c语言实现的简单的员工工资管理系统
- 小型超市管理系统