목차
2. 가져온 외부 파일의 management.htm 및 list.html 구조 분석 :
(1) management.html 프레임 페이지 내용 분석 : 전체 페이지 레이아웃에 초점을 맞춘 다음 특정 세부 사항을 분석하십시오! ! !
(2) List.html 분석 : 전체 구조에 초점을 맞춘 다음 특정 세부 사항을 분석하십시오! ! !
3. 모델 (뷰 레이어)의이 부분은 전경 시스템을 개발할 때 모델 레이어를 재사용합니다.
5. 뷰 (뷰 레이어) 개발 : 도입 된 외부 파일 : 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에도 페이징 연산 이있는 것으로 나타났습니다. 실제로 여기의 페이징 논리는 프런트 엔드 시스템의 렌더링 및 표현을 제외하고는 [프론트 엔드 시스템]의 페이징 논리와 동일합니다. 따라서 [백엔드 시스템] 여기에서 페이징을 구현하기 위해 [프론트 데스크 시스템]을 작성할 때 모델 (서비스 및 Dao를 포함한 모델 부분)의 코드를 완전히 사용할 수 있습니다.
3. 모델 (뷰 레이어)의이 부분은 전경 시스템을 개발할 때 모델 레이어를 재사용합니다.
백엔드 시스템의 페이징 표시부는 프론트 엔드 시스템 개발시 모델 (뷰) 계층에서 페이징 관련 코드를 완전히 재사용 할 수 있습니다 . 이로부터 Model (뷰) 계층 또는 Dao가 있음을 알 수 있습니다. 레이어, 기본 순수 및 순수 데이터 기능을 제공하며 특정 비즈니스 논리가 관련되지 않습니다! ! !
이러한 페이징 데이터는 동일하기 때문에 프런트 엔드가 렌더링하고 표시하는 방식 만 다릅니다.
4. 컨트롤러 (컨트롤 레이어) 개발;
이 블로그의 기능을 실현하기 위해 ManagementController 클래스 (서블릿)를 만듭니다. [백엔드 시스템 최적화 된 데이터 목록 표시 및 페이징]
특정 구현 : 백그라운드 시스템의 컨트롤러로 새 서블릿, ManagementController 클래스를 만듭니다.
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) 이 서블릿은 doGet () 메서드와 doPost () 메서드를 모두 유지합니다.하지만 doGet (request, response);는 doPost () 메서드에서 호출 된 다음 doGet () 메서드로 이동합니다. 전경 doPost () 요청이 오면 doPost () 메서드에 의해 수신되고 doPost () 메서드는 요청을 doGet () 메서드에 전달하고 doGet () 메서드의 논리 코드를 허용합니다. 요청을 처리합니다.
(2) ManagementController 클래스는 [추가], [삭제], [변경] 및 [확인] 작업을 완료해야합니다. 채택 된 전략은 전면의 "method"매개 변수 값에 따라 다른 작업을 수행하는 것입니다. -end request parameter; 코드를보다 모듈화하기 위해 [Add], [Delete], [Change], [Check];를 구현하기위한 다른 메소드를 정의합니다. 그리고 나서 doGet () 메소드에서 " method "parameter value Different, 다른 메서드를 호출하여 다른 기능을 완료합니다 .
(3) 이 블로그 의 주요 내용은 [Check]이므로이 블로그에는 [Check]의 기능을 구현하기위한 list () 메소드 만 있습니다.
(4) 백엔드 시스템의 페이징 표시 부분은 프론트 엔드 시스템 개발시 모델 (뷰) 레이어에서 페이징 관련 코드를 완전히 재사용 할 수 있습니다 . 이로부터 모델 (뷰) 레이어가 있음을 알 수 있습니다. , 또는 Dao 레이어, 기본적이고 순수한 데이터 기능을 제공하며 특정 비즈니스 로직을 포함하지 않습니다! ! !
(5) 컨트롤러 처리가 완료된 후 데이터를 요청에 추가하면 요청이 데이터를 표시해야하는 프런트 엔드 리소스로 리디렉션됩니다 (여기서 프런트 엔드 리소스는 jsp 파일입니다).
5. 뷰 (뷰 레이어) 개발 : 도입 된 외부 파일 : 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) 이 라벨이 특정 등급에 적용되는지 여부에 따라 조건에 따라 선택합니다.
(3) 백그라운드 시스템의 ManagementController 클래스를 완료해야합니다. [추가], [삭제], [변경], [확인] 작업, 특정 구현은 요청의 메서드 매개 변수 값을 기반으로해야합니다. ;; 따라서 list.jsp에서 하이퍼 링크의 요청은 메소드 매개 변수와 함께 제공되어야합니다.
……………………………………………………
(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을 방문하십시오.
