大家好,今天是对 SSM进行整合第三期!。 本文是坐着对bilibili的尚硅谷的SSM整合视频进行使用并记录流程进行发布。
在获取到数据之后,就可以正式的对网页施工了! 首先打开之前建立好的list.jsp,也就是从controller跳转的页面。首先我们在顶部引入jstl,我们需要多次使用<c:if <c:each 等功能。
然后因为这个网页在views文件夹内,从内而外去寻找css文件太过麻烦从这我们改为使用外部引用比如:http://localhost:8088/ssm-crud/static/js/jquery ,这就是案例,所以我们只需要获得/ssm-crud 这个可以用request.getContextPath()获取,并将它放到pageContext中。
然后整改css,js,bootstrap引入 。
具体搭建页面这里就不阐述啦~~ 直接网页代码大家一起参考下,比较核心的点也就是引用bootstrap 和 使用EL表达式和JSTL引用request对象。引用的格式也就 对象.首字母小写。 并通过地址+?pn=1 等这种方式传输get请求参数 ,Controller调用啊 ,相信大家都是会的。(友情提示:后面要删的,如果不想抄的可以先不写跳过。)
<%@ 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>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<!-- 这个request.getContextPath() 获取的是/ssm-crud 以斜线开始不以斜线结束 -->
<% pageContext.setAttribute("APP_PATH",request.getContextPath()); %>
<!-- 引入jquery -->
<!-- 以后使用/开始的相对路径找资源 以服务器的路径为标准
是以http://localhost:3306为标准 所以需要加上
-->
<script src="${APP_PATH}/static/js/jquery-3.4.1.js" type="text/javascript"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 搭建显示页面 -->
<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-primary">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<!-- 显示表格数据 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr> <!-- items:要遍历的内容 var是每个元素-->
<c:forEach items="${pageInfo.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">删除</button>
</th>
</tr>
</c:forEach>
</table>
</div>
</div>
<!-- 显示分页信息 -->
<div class="row">
<!-- 分页文字信息 -->
<div class="col-md-6">
当前${pageInfo.pageNum }页,总共${pageInfo.pages }页,总共${pageInfo.total}记录
</div>
<!-- 分页条信息 -->
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<c:if test="${pageInfo.hasPreviousPage}">
<li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
<li>
<a href="${APP_PATH}/emps?pn=${(pageInfo.pageNum)-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
<c:if test="${page_Num == pageInfo.pageNum }">
<li class="active"><a href="javascript:0">${page_Num}</a></li>
</c:if>
<c:if test="${page_Num != pageInfo.pageNum }">
<li><a href="${APP_PATH}/emps?pn=${page_Num}">${page_Num}</a></li>
</c:if>
</c:forEach>
<c:if test="${pageInfo.hasNextPage}">
<li><a href="${APP_PATH}/emps?pn=${pageInfo.pages}">末页</a></li>
<li>
<a href="${APP_PATH}/emps?pn=${(pageInfo.pageNum)-1}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
做出来大概是这个样子,大家参考下,我们就用这个样子继续接下来的操作。
在list处理好以后大家就可以试试啦 看看能不能成功获得数据。然后大家有没有觉得我们这样子通过request请求到网页这样只是针对网页,不能多平台复用,所以我们又想到一种方式,通过ajax来完成查询 后台发送json字符串发送到前台,由前台解析。 具体步骤: 查询通过Ajax 1.index.jsp页面直接发送ajax请求进行员工分页数据的查询。 2.服务器将查出的数据,以json字符串的形式返回给浏览器。 3.浏览器收到json字符串,可以使用js对json进行解析,使用js通过dom增删改查改变页面。 4.返回json,实现客户端的无关性。 那我们就开始吧~! 首先我们先返回EmployeeController页面,因为我们要使用json字符串返回。 所以需要新建立一个方法,并将之前的requestMapping语句注释掉。
未完待续....
评论