Front-end system five: display page display: create the front-end JSP; (View part of the paging module)

table of Contents

Two: Create the JSP of the View view part

I. Overview

The View part of the paging module is specifically to develop jsp to realize the function of the paging module;

(1) The Controller part and Model part have been developed; the next task is to get the value in the View and render it;

(2) The main task of this blog is to develop the View view part, specifically to develop the corresponding JSP, to obtain the data rendering display;

Two: Create the JSP of the View view part

The template engine used here is JSP instead of FreeMarker;

Knowing that HTML is static, you need to convert static pages into dynamic JSPs;

First of all:

Then, close index.html and change its extension to .jsp; then move index.jsp to the /WEB-INF/jsp directory:

You need to use JSP's jstl and el expressions to obtain and display the paging objects extracted by the Controller: so in advance, you need to introduce the jstl jar package; el does not need the jar package, because el is a standard in javaee and a standard in servlet/jsp ；

Contents of 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>

A few explanations of index.jsp:

(1) Need to introduce the jstl core tag library, the fmt format tag library of jstl;

(2) Lines 37-57 (left and right), mainly the c-foreach tag of jstl, traverse to obtain data; then use el expressions and fmt formatting tags in it;

(3) Lines 60-73 (left and right) are the settings of the bottom part of the page;

(4) Pay special attention to that EL expressions can perform mathematical operations, Boolean expressions, and ternary operators! ! ! ! !

(5) [ href="/page?p =${pno}] This setting method is slightly recognized when the hyperlink in this project is redirected ; but it is still a bit strange, and it needs to be digested later! !!!