目录
2.引入的外部文件的management.htm和list.html结构分析：
（1）management.html框架页内容分析：重在整体页面布局，然后再具体细节具体分析！！！
（2）list.html分析：重在整体结构，然后再具体细节具体分析！！！
3.这部分的Model（视图层），复用的是开发前台系统的时候的Model层；
5.View（视图层）的开发：在引入的外部文件：management.htm和list.html的基础上开发
至此，后台系统的主体内容的功能展示区的油画数据的列表展示和分页功能的开发就OK了；
0.本片博客开发内容说明：
1.引入前端的外部文件：
启动应用后，访问俩HTML：
2.引入的外部文件的management.htm和list.html结构分析：
查看html的结构可以发现：
（1）management.html框架页内容分析：重在整体页面布局，然后再具体细节具体分析！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>门户数据管理平台</title>
<style>
body{
margin: 0 auto;
}
a{
text-decoration: none;
}
.left{
float: left;
}
.right{
float: right;
}
.pg_header{
position: fixed;
top: 0;
width: 100%;
height: 48px;
background-color: lightseagreen;
color: white;
z-index: 10;
}
.pg_header .logo{
height: 48px;
width: 200px;
text-align: center;
color: white;
}
.pg_header .logo a img{
height: 48px;
width: 200px;
cursor: pointer;
}
.pg_header .person_info{
position: relative;
height: 48px;
width: 160px;
/*text-align: center;*/
}
.pg_header .person_info img{
border: 0;
height: 48px;
width: 50px;
/*使用border-radius可以定义边框的圆角程度*/
border-radius: 50%;
}
.pg_header .person_info .info{
position: absolute;
width: 150px;
background-color: lightseagreen;
top: 50px;
z-index: 20;
display: none;
}
.pg_header .person_info .info a{
display: block;
color: white;
padding: 5px;
}
.pg_header .person_info:hover .info{
display: block;
}
.pg_header .icons{
line-height: 48px;
padding: 0 20px 0 5px;
}
.pg_header .icons:hover{
background-color: lightseagreen;
}
.pg_header .icons span{
padding: 1px 5px;
line-height: 1px;
border-radius: 50%;
background-color: red;
font-size: 12px;
}
.pg_content .menu{
position: absolute;
top: 50px;
left: 0;
bottom: 0;
width: 300px;
border:0px;
border-right: 1px solid #ccc;
}
.pg_content .content{
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 302px;
overflow: auto;
min-width: 980px;
z-index: 8;
border:0px;
overflow: hidden;
}
.menu_item{
display: block;
padding: 10px 20px;
border-bottom: 1px solid #ccc;
font-size: 20px;
color: #666666;
}
.menu_item:hover{
color: white;
background: lightseagreen;
}
</style>
</head>
<body>
<!-- 顶端导航栏 -->
<div class="pg_header">
<!-- Logo与名称 -->
<div class="logo left">
<a href="javascript:void(0)" target="_blank">
<img src="image/logo_1.png">
</a>
</div>
<!-- 用户头像与菜单 -->
<div class="person_info right" style="vertical-align: top;" >
<img src="image/head.png">
<span style="line-height: 50px;vertical-align: top;">小企鹅</span>
<div class="info">
<a href="javascript:void(0)">我的信息</a>
<a href="javascript:void(0)">修改密码</a>
<a href="javascript:void(0)">注销</a>
</div>
</div>
<div class="icons right">
<i class="far fa-bell"></i>
</div>
</div>
<div class="pg_content">
<!-- 左侧功能区菜单 -->
<div class="menu">
<a href = "#" class="menu_item" target="ifcontent">油画列表</a>
<a href = "#" class="menu_item" target="ifcontent">新增作品</a>
</div>
<!-- 主体框架 -->
<div class="content">
<iframe name="ifcontent" style="width:100%;height:100%;overflow-y: hidden;border:0px;min-width: 800px;" src=""></iframe>
</div>
</div>
</body>
</html>（1）management.html文件中，上面的<style></style>中的CSS不用关心；
（2）页面顶部导航区的结构：
（3）下部的【左侧功能区】，【右侧主题区】
（4）【右侧主题区】是通过<iframe>引入其他页面的形式来做的，这样可以使程序更加模块化哎，挺好；
……………………………………………………
（2）list.html分析：重在整体结构，然后再具体细节具体分析！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>油画列表</title>
<link rel="stylesheet" type="text/css" href="css\list.css">
</head>
<body>
<div class="container">
<fieldset>
<legend>油画列表</legend>
<div style="height: 40px">
<a href="#" class="btn-button">新增</a>
</div>
<!-- 油画列表 -->
<table cellspacing="0px">
<thead>
<tr style="width: 150px;">
<th style="width: 100px">分类</th>
<th style="width: 150px;">名称</th>
<th style="width: 100px;">价格</th>
<th style="width: 400px">描述</th>
<th style="width: 100px">操作</th>
</tr>
</thead>
<tr>
<td>现实主义</td>
<td>古典油画鉴赏1</td>
<td>¥3800.00</td>
<td>古典油画鉴赏1的描述文本</td>
<td>
<a class="oplink" href="#">预览</a>
<a class="oplink" href="#">修改</a>
<a class="oplink" href="#">删除</a>
</td>
</tr>
</table>
<!-- 分页组件 -->
<ul class="page">
<li><a href="#">首页</a></li>
<li><a href="#">上页</a></li>
<li class='active'><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li><a href="#">下页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</fieldset>
</div>
</body>
</html>
（1）首先引入了主体样式表
（2）list.html结构分析
（3）发现，list.html中也有分页操作；其实这儿的分页逻辑，和【前台系统】的分页逻辑是一样的，只是在前端页面的渲染展示形式上不同而已；所以，【后台系统】的这儿的分页实现，我完全可以利用在编写【前台系统】的时候的Model（模型部分，包括Service和Dao）部分的代码；
3.这部分的Model（视图层），复用的是开发前台系统的时候的Model层；
后台系统的分页展示部分，完全可以复用开发前台系统的时候，Model(视图)层中分页有关的代码；由此，更可以发现，Model（视图）层，或者说是Dao层，是提供基本的、纯粹的数据功能，不涉及具体的业务逻辑！！！
因为这些分页数据是一样的，只是前端渲染显示的方式不同而已；
4.Controller（控制层）开发；
创建ManagementController类（一个Servlet），以实现本篇博客的功能：【后台系统的优化数据列表展示和分页】
具体实现：创建一个新的Servlet，ManagementController类，作为后台系统的Controller
package com.imooc.mgallery.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.imooc.mgallery.service.PaintingService;
import com.imooc.mgallery.utils.PageModel;
/**
* 后台管理功能Controller；
* 后台系统，所需要的增，删，改，查的操作，都在这一个Controller类中完成；
* Servlet implementation class ManagementController
*/
@WebServlet("/management")
public class ManagementController extends HttpServlet {
private static final long serialVersionUID = 1L;
// 创建PaintingService对象；；
// 即无论是前台系统的PaintingController，还是后台系统的ManagementController都调用PaintingService中提供的方法；
private PaintingService paintingService = new PaintingService();
/**
* @see HttpServlet#HttpServlet()
*/
public ManagementController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置请求体中的字符集编码方式；；；
// get请求没有请求体，所以，这个语句是为doPost()方法中执行doGet(request,response)后，跳转过来的post请求来设置的；
// 即这条代码是为doPost()来进行服务的；
request.setCharacterEncoding("UTF-8");
// 设置响应的字符集编码方式
response.setContentType("text/html;charset=utf-8");
String method = request.getParameter("method");
if(method.equals("list")) { // 当前台传入的method参数值为“list”的时候，代表是分页请求，调用定义的list方法；
this.list(request,response); // 然后，将分页处理的代码写在list方法中就可以了；
}else if(method.equals("delete")) { // 当method参数值为“delete”时，表示是删除请求，调用定义的delete方法；
this.delete(request, response);
}else if(method.equals("change")) {
this.change(request, response);
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response); // doPost调用了doGet()方法，所以，把逻辑代码都写在doGet方法中就可以了；
}
/**
*
* @param request
* @param response
* @throws IOException
* @throws ServletException
*/
private void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String p = request.getParameter("p");
String r = request.getParameter("r");
if(p==null) {
p = "1";
}
if(r==null) {
r = "6";
}
PageModel pageModel = paintingService.pagination(Integer.parseInt(p), Integer.parseInt(r));
request.setAttribute("pageModel", pageModel);
request.getRequestDispatcher("/WEB-INF/jsp/list.jsp").forward(request, response);
}
private void delete(HttpServletRequest request, HttpServletResponse response) {
}
private void change(HttpServletRequest request, HttpServletResponse response) {
}
}
ManagementController类的几点说明：
（1）这个Servlet既保留了doGet()方法，也保留了doPost()方法；但注意doPost()方法中调用了doGet(request, response);，又跳转到了doGet()方法，即说明前台的doPost()请求过来后，会被doPost()方法接收，然后doPost()方法把这个请求交给doGet()方法，让doGet()方法中的逻辑代码来处理这个请求；
（2）ManagementController类需要完成，【增】，【删】，【改】，【查】的操作；其采取的策略是，根据前端请求参数中的“method”参数值的不同，做不同的操作；为了让代码更具模块化特性，其定义了不同的方法来分别实现【增】，【删】，【改】，【查】；；然后，doGet()方法中，根据“method”参数值的不同，来调用不同的方法，完成不同的功能；
（3）本篇博客主要内容是【查】，所以，本篇博客中只有list()方法，来实现【查】的功能；
（4）后台系统的分页展示部分，完全可以复用开发前台系统的时候，Model(视图)层中分页有关的代码；由此，更可以发现，Model（视图）层，或者说是Dao层，是提供基本的、纯粹的数据功能，不涉及具体的业务逻辑！！！
（5）在Controller处理完成后，将数据添加到请求中；然后请求重定向到需要展示这些数据的前端资源上；（这儿的前端资源是jsp文件）；
5.View（视图层）的开发：在引入的外部文件：management.htm和list.html的基础上开发
（1）list.html开发：
<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>油画列表</title>
<link rel="stylesheet" type="text/css" href="css\list.css">
</head>
<body>
<div class="container">
<fieldset>
<legend>油画列表</legend>
<div style="height: 40px">
<a href="#" class="btn-button">新增</a>
</div>
<!-- 油画列表 -->
<table cellspacing="0px">
<thead>
<tr style="width: 150px;">
<th style="width: 100px">分类</th>
<th style="width: 150px;">名称</th>
<th style="width: 100px;">价格</th>
<th style="width: 400px">描述</th>
<th style="width: 100px">操作</th>
</tr>
</thead>
<c:forEach items="${pageModel.pageData}" var="painting">
<tr>
<c:choose>
<c:when test="${painting.category == 1}">
<td>现实主义</td>
</c:when>
<c:when test="${painting.category == 2}">
<td>抽象主义</td>
</c:when>
<c:otherwise>
<td>未分类别</td>
</c:otherwise>
</c:choose>
<td>${painting.pname}</td>
<td><fmt:formatNumber pattern="￥0.00" value="${painting.price}"></fmt:formatNumber></td>
<td>${painting.description }</td>
<td>
<a class="oplink" href="#">预览</a>
<a class="oplink" href="#">修改</a>
<a class="oplink" href="#">删除</a>
</td>
</tr>
</c:forEach>
</table>
<!-- 分页组件 -->
<ul class="page">
<li><a href="/management?method=list&p=1">首页</a></li>
<li><a href="/management?method=list&p=${pageModel.hasPreviousPage?pageModel.page-1:1 }">上页</a></li>
<c:forEach begin="1" end="${pageModel.totalPages}" var="pno" step="1">
<li ${pno==pageModel.page?"class='active'":""}><span>
<a href="/management?method=list&p=${pno}">
${pno}
</a>
</span></li>
<!-- <li class='active'><a href="#">1</a></li>
<li ><a href="#">2</a></li> -->
</c:forEach>
<li><a href="/management?method=list&p=${pageModel.hasNextPage?pageModel.page+1:pageModel.totalPages}">下页</a></li>
<li><a href="/management?method=list&p=${pageModel.totalPages}">尾页</a></li>
</ul>
</fieldset>
</div>
</body>
</html>
list.jsp几点说明：
（1）需要获取、展示数据，自然需要首先引入jstl的核心标签库和格式化输出标签库；
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>（2）根据条件选择，这个标签是否应用某个class；
（3）后台系统的ManagementController类需要完成，【增】，【删】，【改】，【查】的操作，具体执行那个需要根据请求中的method参数的值；；；所以，list.jsp中的超链接的请求需要附带method参数；
……………………………………………………
（2）management.html开发：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>门户数据管理平台</title>
<style>
body{
margin: 0 auto;
}
a{
text-decoration: none;
}
.left{
float: left;
}
.right{
float: right;
}
.pg_header{
position: fixed;
top: 0;
width: 100%;
height: 48px;
background-color: lightseagreen;
color: white;
z-index: 10;
}
.pg_header .logo{
height: 48px;
width: 200px;
text-align: center;
color: white;
}
.pg_header .logo a img{
height: 48px;
width: 200px;
cursor: pointer;
}
.pg_header .person_info{
position: relative;
height: 48px;
width: 160px;
/*text-align: center;*/
}
.pg_header .person_info img{
border: 0;
height: 48px;
width: 50px;
/*使用border-radius可以定义边框的圆角程度*/
border-radius: 50%;
}
.pg_header .person_info .info{
position: absolute;
width: 150px;
background-color: lightseagreen;
top: 50px;
z-index: 20;
display: none;
}
.pg_header .person_info .info a{
display: block;
color: white;
padding: 5px;
}
.pg_header .person_info:hover .info{
display: block;
}
.pg_header .icons{
line-height: 48px;
padding: 0 20px 0 5px;
}
.pg_header .icons:hover{
background-color: lightseagreen;
}
.pg_header .icons span{
padding: 1px 5px;
line-height: 1px;
border-radius: 50%;
background-color: red;
font-size: 12px;
}
.pg_content .menu{
position: absolute;
top: 50px;
left: 0;
bottom: 0;
width: 300px;
border:0px;
border-right: 1px solid #ccc;
}
.pg_content .content{
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 302px;
overflow: auto;
min-width: 980px;
z-index: 8;
border:0px;
overflow: hidden;
}
.menu_item{
display: block;
padding: 10px 20px;
border-bottom: 1px solid #ccc;
font-size: 20px;
color: #666666;
}
.menu_item:hover{
color: white;
background: lightseagreen;
}
</style>
</head>
<body>
<!-- 顶端导航栏 -->
<div class="pg_header">
<!-- Logo与名称 -->
<div class="logo left">
<a href="javascript:void(0)" target="_blank">
<img src="image/logo_1.png">
</a>
</div>
<!-- 用户头像与菜单 -->
<div class="person_info right" style="vertical-align: top;" >
<img src="image/head.png">
<span style="line-height: 50px;vertical-align: top;">小企鹅</span>
<div class="info">
<a href="javascript:void(0)">我的信息</a>
<a href="javascript:void(0)">修改密码</a>
<a href="javascript:void(0)">注销</a>
</div>
</div>
<div class="icons right">
<i class="far fa-bell"></i>
</div>
</div>
<div class="pg_content">
<!-- 左侧功能区菜单 -->
<div class="menu">
<a href = "/management?method=list" class="menu_item" target="ifcontent">油画列表</a>
<a href = "#" class="menu_item" target="ifcontent">新增作品</a>
</div>
<!-- 主体框架 -->
<div class="content">
<iframe name="ifcontent" style="width:100%;height:100%;overflow-y: hidden;border:0px;min-width: 800px;" src="/management?method=list"></iframe>
</div>
</div>
</body>
</html>（1）通过设置<iframe>标签的src="/management?method=list"，将list.jsp中的数据导入进来；这个很关键！！！
<iframe name="ifcontent" style="width:100%;height:100%;overflow-y: hidden;border:0px;min-width: 800px;" src="/management?method=list"></iframe>（2）设置左侧菜单栏中，【油画列表】的超链接地址；
至此，后台系统的主体内容的功能展示区的油画数据的列表展示和分页功能的开发就OK了；
通过浏览器访问management.html就能查看效果；
