原创

SSM从零开始整合教学(三)

大家好,今天是对 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">&laquo;</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">&raquo;</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语句注释掉。

在这里插入图片描述

未完待续....

java
eclipse
SpringMVC
Spring
Mybatis

  • 作者:LinJy(联系作者)
  • 发表时间:2020-04-30 09:07
  • 版权声明:自由转载-非商用-非衍生-保持署名(null)
  • undefined
  • 评论

    留言