目次
I.概要
ページングモジュールの表示部分は、特にページングモジュールの機能を実現するためにjspを開発することです。
（1）コントローラー部分とモデル部分が開発されました。次のタスクは、ビューで値を取得してレンダリングすることです。
（2）このブログの主なタスクは、ビュービューパーツを開発すること、特に対応するJSPを開発して、データレンダリング表示を取得することです。
2：ビュービューパーツのJSPを作成します
ここで使用されるテンプレートエンジンは、FreeMarkerではなくJSPです。
HTMLが静的であることを知っているので、静的ページを動的JSPに変換する必要があります。
まず第一に：
次に、index.htmlを閉じ、その拡張子を.jspに変更します。次に、index.jspを/ WEB-INF / jspディレクトリに移動します。
コントローラによって抽出されたページングオブジェクトを取得して表示するには、JSPのjstl式とel式を使用する必要があります。したがって、事前にjstl jarパッケージを導入する必要があります。elはjavaeeの標準であり、elはjarパッケージを必要としません。サーブレット/ jspの標準；
index.jspの内容：
<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!-- 引入jstl的核心库包 -->
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <!-- 引入jstl的格式化包；待会对价格进行 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css\common.css">
<script type="text/javascript" src="js\js1.js"></script>
</head>
<body>
<div class="header">
<div class="logo">
<img src="image\logo.png">
</div>
<div class="menu" onclick="show_menu()" onmouseleave="show_menu1()">
<div class="menu_title" ><a href="###">内容分类</a></div>
<ul id="title">
<li>现实主义</li>
<li>抽象主义</li>
</ul>
</div>
<div class="auth">
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="banner">
<img src="image/welcome.png" class="banner-img">
</div>
<div class="img-content">
<ul>
<c:forEach items="${pageModel.pageData}" var="painting">
<li>
<img src="${painting.preview}" class="img-li">
<div class="info">
<h3>"${painting.pname}"</h3>
<p>
"${painting.description}"
</p>
<div class="img-btn">
<!-- 价格格式化输出 --><!-- 0.00是因为，在实际正式开发，显示价格时必须要在后面增加两位小数.00 -->
<div class="price"><fmt:formatNumber pattern="￥0.00" value="${painting.price}"></fmt:formatNumber></div>
<a href="#" class="cart">
<div class="btn">
<img src="image/cart.svg">
</div>
</a>
</div>
</div>
</li>
</c:forEach>
</ul>
</div>
<div class="page-nav">
<ul>
<li><a href="/page?p=1">首页</a></li>
<li><a href="/page?p=${pageModel.hasPreviousPage?pageModel.page-1:1 }">上一页</a></li>
<!-- 步长设为1 -->
<c:forEach begin="1" end="${pageModel.totalPages}" var="pno" step="1">
<li><span ${pno== pageModel.page?"class='first-page'":""}> <!-- el表达式允许使用三目运算符 -->
<a href="/page?p=${pno}">
${pno}
</a>
</span></li>
</c:forEach>
<li><a href="/page?p=${pageModel.hasNextPage?pageModel.page+1:pageModel.totalPages}">下一页</a></li>
<li><a href="/page?p=${pageModel.totalPages}">尾页</a></li>
</ul>
</div>
</div>
<div class="footer">
<p><span>M-GALLARY</span>©2020 POWERED BY IMOOC.INC</p>
</div>
</body>
</html>index.jspのいくつかの説明：
（1） jstlのfmt形式のタグライブラリであるjstlコアタグライブラリを導入する必要があります。
（2） 37〜57行目（左と右）、主にjstlのc-foreachタグは、データを取得するためにトラバースします。次に、el式とfmtフォーマットタグを使用します。
（3） 60〜73行目（左右）はページ下部の設定です。
（4） EL式は数学演算、ブール式、および三項演算子を実行できることに特に注意してください。！！！！
（5） [ href = "/ page？p = $ {pno}]この設定方法は、このプロジェクトのハイパーリンクがリダイレクトされるときにわずかに認識されますが、それでも少し馴染みがなく、後で消化する必要があります!!!!