继上次已经搭建了环境之后,现在正是开始业务逻辑代码的实现。但在实现之前,我们需要进行一个网站页面的规划,这里按视频教学走的话,是采用了bootstrap框架,比较简洁。开始了:
一。网站的最终设计样式
图贴出来了,就把大致的路线说一下,需要创建两个jsp文件,static 存放静态资源文件:
直接贴代码:
1.网页代码(index.jsp):
<%--
Created by IntelliJ IDEA.
User: 97506
Date: 2019/6/3
Time: 19:55
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<jsp:forward page="/emps"/>
</body>
</html>
说明:这是项目默认打开的网页,所以这里就直接请求所有员工信息,通过
<jsp:forward page="/emps"/>
在controller包下有一个与之对应的员工控制器,用来接收/emps请求,并将所有的员工信息发给前端浏览器解析。
2.员工信息展示页面也就是上面那张图的网页代码:
<%--
Created by IntelliJ IDEA.
User: 97506
Date: 2019/6/4
Time: 20:56
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<title>员工列表</title>
<script src="${APP_PATH}/static/js/jquery-3.4.1.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<!--搭建显示页面-->
<div class="container">
<!--标题-->
<div class="row">
<div class="col-lg-12">
<h1>员工信息管理系统</h1>
</div>
</div>
<!--按钮-->
<div class="row">
<div class="col-lg-4 col-lg-offset-10">
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
</div>
<!--显示表格数据-->
<div class="row" style="margin-top: 20px">
<div class="col-lg-12">
<table class="table table-hover table-bordered">
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th></th>
</tr>
<c:forEach items="${emps.list}" var="emp">
<tr>
<th>${emp.empId}</th>
<th>${emp.epmName}</th>
<th>${emp.gender=='男'?'男':'女'}</th>
<th>${emp.email}</th>
<th>${emp.department.deptName}</th>
<th>
<button type="button" class="btn btn-warning btn-sm" aria-label="Left Align">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<span> </span>
<button type="button" class="btn btn-danger btn-sm" aria-label="Left Align">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</th>
</tr>
</c:forEach>
</table>
</div>
</div>
<!--分页-->
<div class="row">
<!--分页信息-->
<div class="col-lg-6">
当前为<kbd>${emps.pageNum}</kbd>页,总共<kbd>${emps.pages}</kbd>页,总记录为<kbd>${emps.total}</kbd>项。
</div>
<!--分页条-->
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
<c:if test="${emps.hasPreviousPage}">
<li>
<a href="${APP_PATH}/emps?pn=${emps.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:forEach items="${emps.navigatepageNums}" var="index">
<c:if test="${index == emps.pageNum}">
<li class="active"><a href="${APP_PATH}/emps?pn=${index}">${index}</a></li>
</c:if>
<c:if test="${index != emps.pageNum}">
<li><a href="${APP_PATH}/emps?pn=${index}">${index}</a></li>
</c:if>
</c:forEach>
<c:if test="${emps.hasNextPage}">
<li>
<a href="${APP_PATH}/emps?pn=${emps.pageNum+1}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<li><a href="${APP_PATH}/emps?pn=${emps.pages}">尾页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
说明:
1.
这里可以将context路径添加到app_path中。方便调用
2.
引入bootstrap的js css文件
3.
引入taglib标签,在分页条那里会用到。判断页码的情况。
页面写完之后,我们可以写控制器了(这里顺序有点问题,还是先写控制器吧!)。
二。编写业务代码,以及控制器的实现
直接贴代码:
EmployeeService.java:
package com.zhaowenhao.service;
import com.zhaowenhao.bean.Employee;
import com.zhaowenhao.dao.EmployeeMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* Description:
* User: zwh
* Date: 2019-06-04
* Time: 21:06
*/
@Service
public class EmployeeService {
@Autowired
EmployeeMapper employeeMapper;
/**
* @Description: 获取所有员工信息
* @Param: []
* @return: java.util.List
* @Author: zwh
* @Date: 2019/6/4
*/
public List getAll() {
List<Employee> employees = employeeMapper.selectByExampleWithDept(null);
return employees;
}
}
说明:为什么是参数null,因为这里传入的是匹配条件,但是我们要查询所有 的信息,所以不需要有匹配条件。
EmployeeController.java:
package com.zhaowenhao.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.zhaowenhao.bean.Msg;
import com.zhaowenhao.service.EmployeeService;
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 org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
/**
* Description:处理员工增删改查
* User: zwh
* Date: 2019-06-04
* Time: 21:03
*/
@Controller
public class EmployeeController {
@Autowired
EmployeeService employeeService;
//@RequestMapping("/emps")
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
//引入分页插件pagehelper
//传入页码,以及分页大小
PageHelper.startPage(pn, 5);
//startpage后面紧跟的查询就是一个分页查询
List all = employeeService.getAll();
//使用 pageinfo封装数据信息
PageInfo pageInfo = new PageInfo(all, 5);
return Msg.success().addExtend("emps", pageInfo);
}
/**
* @Description: 展示所有员工信息
* @Param: []
* @return: java.lang.String
* @Author: zwh
* @Date: 2019/6/4
*/
@RequestMapping("/emps")
public String getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
//引入分页插件pagehelper
//传入页码,以及分页大小
PageHelper.startPage(pn, 10);
//startpage后面紧跟的查询就是一个分页查询
List all = employeeService.getAll();
//使用 pageinfo封装数据信息
PageInfo pageInfo = new PageInfo(all, 5);
//将数据加入model
model.addAttribute("emps", pageInfo);
return "list";
}
}
说明:为什么这里有两个方法嘞?
先看第二个方法:
pageHelper是一个分页插件,可以指定分页的大小就是指在一页上可以显示多少条数据。
pageInfo作用就是封装一些查询结果的信息,通过它我们可以很方便的按照我们的要求将查询的结果进行封装,例如查询的页数,总的项目条数,当 前页数是否为第一页或者最后一页,是否具有前一页或者后一页。
最终将结果添加到model中或者map中,request携带该信息跳转到list.jsp页面进行展示。
结合之前的list.jsp页面可以知道大概的流程。
下面解释第一个方法:
第一个方法,我们想通过引入@ResponseBody注解,通过该注解,我们可以将pageinfo转变为json数据发给前端浏览器,前端通过解析json数据,并通过DOM操作,将数据像是在网页上。但是直接将数据返回给前端可能会有一些问题,加入出错了怎么办或者是其他问题。所以可以创建一个消息bean (Msg.java)来把pageinfo进行一个修饰,并在这个bean中,构建状态码,状态消息字段,附加数据字段。
我们可以在控制器中返回一个Msg对象给前端,如果业务成功的话,我们可以把pageinfo数据加到map中,由前端来解析。如果失败,我们就可以返回一个错误的状态码给前端。
这里需要添加两个依赖的pom:
<!--分页组件pagehelper--> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.9</version> </dependency> <!-- 返回json字符串 response --> <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.47</version> <scope>compile</scope> </dependency>
所以上面的解释完之后,决定采取第一个函数的方式,不采用第二种方式。
未完继续。。。。。。。。点击SSM高级整合日记(三)