小型的员工管理系统-SSM-06

最新推荐文章于 2024-05-25 14:02:30 发布

置顶 only_yiyi_han

最新推荐文章于 2024-05-25 14:02:30 发布

阅读量1.7k

点赞数 1

分类专栏： SSM项目

本文链接：https://blog.csdn.net/qq_31080089/article/details/71535023

版权

SSM项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先我们先来看下需求页面吧！

先进入这个页面，在点击这个链接进入到员工管理系统！

首先我们先来实行第一步吧，就是获取员工列表，从这里不难发现展示的列表中包含部门的名称，那么这时我们是不是得在写个有关查询全部列表的方法和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中进行获取即可。详细的学习就看官网的文档吧！

only_yiyi_han

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
8
评论
小型的员工管理系统-SSM-06

首先我们先来看下需求页面吧！先进入这个页面，在点击这个链接进入到员工管理系统！首先我们先来实行第一步吧，就是获取员工列表，从这里不难发现展示的列表中包含部门的名称，那么这时我们是不是得在写个有关查询全部列表的方法和sql呢？这个不难实现，最重要的是分页这个。那么我们就来结合着分页来完成这个页面和功能吧！第一节也介绍了前端我们采用的是Boostrap框架，那么我们就先把b
复制链接

扫一扫

专栏目录