Spring(3)

93799 ワード
Backend Spring テキストリンク

書き込み入力フォームの作成


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- jstl core 쓸때 태그에 c 로 표시. -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!-- jstl fmt 쓸때 위와 같음. fmt : formatter 형식 맞춰서 표시 -->
<%@ include file="../includes/header.jsp"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">Board Register</h1>
	</div>
</div>
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">글쓰기</div>
			<div class="panel-body">
				<form role="form" action="/board/register" method="post">
					<div class="form-group">
						<label>Title</label> <input class="form-control" name='title'>
					</div>
					<div class="form-group">
						<label>Text area</label>
						<textarea class="form-control" rows="3" name='content'></textarea>
					</div>
					<div class="form-group">
						<label>Writer</label> <input class="form-control" name="writer">
					</div>
					<button type="submit" class="btn btndefault">Submit Button</button>
					<button type="reset" class="btn btn-default">Reset Button</button>
				</form>
			</div>
		</div>
	</div>
</div>
<%@ include file="../includes/footer.jsp"%>
BoardController.Javaにフォームを表示するコードを追加
@GetMapping("/register")
public void register() {
// 이동할 주소를 리턴하지 않는다면, 요청한 이름으로의 jsp 파일을 찾음.
}

文章を読む


<a href="/board/get?bno=${board.bno }"><c:out value="${board.title }" /></a>
リストのタイトルを表示する部分にこのメソッドを入力します.
get.jspを作成し、次の内容を入力します.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">글 읽기</h1>
	</div>
</div>
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading"></div>
			<div class="panel-body">
				<div class="form-group">
					게시물 번호<input class="form-control" name="bno"
						value='<c:out value="${board.bno }"/>' readonly="readonly">
				</div>
				<div class="form-group">
					제목<input class="form-control" name="title"
						value='<c:out
value="${board.title }"/>' readonly="readonly">
				</div>
				<div class="form-group">
					내용
					<textarea rows="3" class="form-control" name="content"
						readonly="readonly"><c:out value="${board.content }" /></textarea>
				</div>
				<div class="form-group">
					작성자<input class="form-control" name="writer"
						value='<c:out
value="${board.writer }"/>' readonly="readonly">
				</div>
				<button data-oper="modify" class="btn btn-warning">
					<a href="/board/modify?bno=${board.bno }"> 수정</a>
				</button>
				<button data-oper="list" class="btn btn-info">
					<a href="/board/list"> 목록</a>
				</button>
			</div>
		</div>
	</div>
</div>

文章を直す


BoardController.Javaでget処理のコントローラにmodifyを追加する

// 제목 링크를 클릭하여 글 상세보기 - get 방식.
	@GetMapping({"/get","/modify"})
	public void get(@RequestParam("bno") Long bno, Model model) {
		// @RequestParam : 요청 전달값으로 글번호 이용.
		log.info("/get");
		model.addAttribute("board", service.get(bno));
		// jsp에서 request.setAttribute 하던 것과 비슷.
		// 전달값으로 명시만 하면 스프링이 자동 처리.
		// 사용하는 부분만 추가 구현.
	}
modify.jspの生成

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- jstl core 쓸때 태그에 c 로 표시. -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!-- jstl fmt 쓸때 위와 같음.fmt : formatter 형식 맞춰서 표시 -->
<%@ include file="../includes/header.jsp"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">글 수정</h1>
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
          
			<div class="panel-body">
				<form role="form" action="/board/modify" method="post">
					<input type="hidden" name="bno" value="${board.bno}" />

					<div class="form-group">
						<label>Title</label> <input class="form-control" name="title"
							value="${board.title }">
					</div>
					<div class="form-group">
						<label>Text area</label>
						<textarea class="form-control" rows="3" name='content'><c:out
								value="${board.content}" /></textarea>
						</textarea>
					</div>
					<div class="form-group">
						<label>Writer</label> <input class="form-control" name="writer"
							value='<c:out
value="${board.writer }"/>'>
					</div>
					<button type="submit" data-oper='modify' class="btn btn-success">Modify</button>
					<button type="submit" data-oper='remove' class="btn btn-danger">Remove</button>
					<button type="submit" data-oper='list' class="btn btn-info">List</button>
				</form>
			</div>
		</div>
	</div>
</div>


<script>
	$(document).ready(function() {
		/* 문서가 준비 됐다면, 아래 함수 수행. */
		var formObj = $("form");/* 문서중 form 요소를 찾아서 변수에 할당. */
		$('button').on("click", function(e) {
			/* 버튼이 클릭된다면 아래 함수 수행, e라는 이벤트 객체를
			 전달하면서 */
			e.preventDefault();/* 기본 이벤트 동작 막기. */
			var operation = $(this).data("oper");
			/* 버튼에서 oper 속성 읽어서 변수에 할당. */
			console.log(operation);
			/* 브라우저 로그로 oper값 출력. */
			if (operation === 'remove') {
				formObj.attr("action", "/board/remove");
				/* form에 액션 속성을 변경. */
			} else if (operation === 'list') {
				self.location = "/board/list";
				return;
			}
			formObj.submit();
			/* 위의 조건이 아니라면 수정 처리. */
		});
	});
</script>




<%@ include file="../includes/footer.jsp"%>
掲示板の文章を修正すると、モダリティウィンドウが表示されますので、ヒントメッセージを表示させるように修正します.

function checkModal(result) {
			if (result === '') {
				// == 는 값만 비교, === 은 값과 형식도 비교.
				return;
			}
			if ($.isNumeric(result)) {// 전달된 값이 숫자인가?
				if (parseInt(result) > 0) {
					$(".modal-body").html("게시글 " + parseInt(result) + "번 등록");
				}
			} else {
				$(".modal-body").html(result);
				// 수정과 삭제시에는 success 라는 문자열이 전달 되므로,

				// 성공 메세지만 표시하기 원함.
			}
			$("#myModal").modal("show");// 모달창 표시
		}
文章を修正すると、成功したモードウィンドウが表示されます.

ページング処理


まずdomainパッケージでのCriteriaの実装

package kr.board.domain;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class Criteria {
	private int pageNum; // 현재 페이지 번호.
	private int amount; // 페이지당 게시물수

	public Criteria() {
		this(1, 10); // 아래쪽 전달값 2개 생성자 호출.
	}

	public Criteria(int pageNum, int amount) {
		this.pageNum = pageNum;
		this.amount = amount;
	}
}
BoardMapper.Javaにドメインを追加

public List<BoardVO> getListWithPaging(Criteria cri);
BoardMapper.xmlのクエリーメソッドの追加
	<select id="getListWithPaging"
		resultType="kr.board.domain.BoardVO">
<![CDATA[
select bno, title, content, writer, regdate, updatedate
from
(
select /*+INDEX_DESC(tbl_board pk_board) */
rownum rn, bno, title, content, writer, regdate,
updatedate
from
tbl_board
where rownum <= #{pageNum} * #{amount}
)
where rn > (#{pageNum}-1) * #{amount}
]]>
	</select>
BoardMapperTestsで作業を確認
@Test
	public void testPaging() {
		Criteria cri = new Criteria();
		cri.setPageNum(1);
		cri.setAmount(10);
		List<BoardVO> list = mapper.getListWithPaging(cri);
		list.forEach(board -> log.info(board.getBno()));
	}
BoardServiceへのメソッドの追加
public List<BoardVO> getList(Criteria cri);
BoardServiceImpへのメソッドの追加

@Override
	public List<BoardVO> getList(Criteria cri) {
		log.info("getListWithPaging....." + cri);
		return mapper.getListWithPaging(cri);
	}
BoardServiceTestの変更

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j

public class BoardServiceTest {
	@Setter(onMethod_ = @Autowired)
	private BoardService service;

	@Test
	public void testGetList2() {
		service.getList(new Criteria(2, 10)).forEach(board -> log.info(board));
	}
}
BoardController.Javaでlistを変更する

@GetMapping("/list")
	public void list(Model model, Criteria cri) {
		// log.info("list");
		// model.addAttribute("list", service.getList());
		// 과거 jsp에서는 request.setAttribute로 ArrayList를 전달했지만
		// , 같은 역할을 model이 대신.
		// 컨트롤러 >> 서비스 >> 매퍼 >> mybatis
		log.info("list: " + cri);
		model.addAttribute("list", service.getList(cri));
	}
PageDTOを実装してページ番号を処理


@Getter
@ToString
public class PageDTO {
	private int startPage; // 페이징 시작
	private int endPage; // 페이징 끝
	private boolean prev, next;
	private int total; // 총 게시물수
	private Criteria cri; // 현재페이지와 페이지당 게시물수

	public PageDTO(Criteria cri, int total) {
		this.cri = cri;
		this.total = total;
		this.endPage = (int) (Math.ceil(cri.getPageNum() / 10.0)) * 10;
// 1페이지라고 가정하면 endPage는 10
		this.startPage = this.endPage - 9;// 1
		int realEnd = (int) (Math.ceil((total * 1.0) / cri.getAmount()));
// 총게시물이 20개라고 가정하면 realEnd=2
// 페이지당 보여줄 게시물 수는 10개로 가정.
		if (realEnd < this.endPage) {
			this.endPage = realEnd;
		}
		this.prev = this.startPage > 1;
		this.next = this.endPage < realEnd;
	}
}
BoardControllerによるリストの変更

@GetMapping("/list")
	public void list(Model model, Criteria cri) {
		// log.info("list");
		// model.addAttribute("list", service.getList());
		// 과거 jsp에서는 request.setAttribute로 ArrayList를 전달했지만,
		// 같은 역할을 model이 대신한다.
		log.info("list: " + cri);
		model.addAttribute("list", service.getList(cri));
		model.addAttribute("pageMaker", new PageDTO(cri, 190));
	}
list.jspでのページングの実装
<br>

<div>
	<ul class="pagination justify-content-center">
		<c:if test="${pageMaker.prev }">
			<li class="page-item previous"><a
				href="${pageMaker.startPage-1 }" class="page-link">Prev</a></li>
		</c:if>
		<c:forEach var="num" begin="${pageMaker.startPage }"
			end="${pageMaker.endPage }">
			<!-- 게시물 목록에서 배열을 이용한 것과 같이 begin은 배열의 시작값, end= 배열의 끝값으로 순환 처리.  -->

			<li class='page-item ${pageMaker.cri.pageNum==num?" active":""}'>
				<!-- pageMaker객체의 cri객체의 pageNum이 현재 num과 같다면, active 출력, 아니라면 공백 출력 active는 스타일 강조처리가 부트스트랩에 이미 설정되어 있음  -->
				<a href="${num }" class="page-link">${num }</a>
			</li>
		</c:forEach>

		<c:if test="${pageMaker.next }">
			<li class="page-item next"><a href="${pageMaker.endPage+1 }"
				class="page-link"> Next</a></li>
		</c:if>

	</ul>

</div>

ページングは実現していますが、ページングはできません
list.jspでフォームを構築する
<form id="actionForm" action="/board/list" method="get">
	<input type="hidden" name="pageNum" value="${pageMaker.cri.pageNum }">
	<input type="hidden" name="amount" value="${pageMaker.cri.amount }">
</form>
次に、次のスクリプトを追加します.

var actionForm = $("#actionForm");
		// 클래스 page-item 에 a 링크가 클릭 된다면,
		$(".page-item a").on("click", function(e) {
			e.preventDefault();
			// 기본 이벤트 동작을 막고,
			console.log("click");
			// 웹 브라우저 검사 창에 클릭을 표시
			actionForm.find("input[name='pageNum']").val($(this).attr("href"));
			//액션폼 인풋태그에 페이지넘 값을 찾아서,
			//href로 받은 값으로 대체함
			actionForm.submit();
		});
クリックして投稿にアクセスし、リストを選択したときに元のリンクに移動する方法を追加できます.
list.jspで

<td><a href="/board/get?bno=${board.bno }"><c:out
										value="${board.title }" /></a></td>
活動場所を表す

<td><a href="${board.bno }" class="move"> <c:out
value="${board.title }" /></a></td>
に代わる
list.jspへのメソッドの追加

$(".move").on(
						"click",
						function(e) {
							e.preventDefault();
							actionForm
									.append("<input type='hidden' name='bno' "
											+ "value='" + $(this).attr("href")
											+ "'>");
							actionForm.attr("action", "/board/get");
							actionForm.submit();
						});
BoardControllerによる変更
@GetMapping({ "/get", "/modify" })
	public void get(@RequestParam("bno") Long bno, @ModelAttribute("cri") Criteria cri, Model model) {
		// @ModelAttribute("cri") 는 자동으로 객체 할당 저장.
		// 자동으로 생성된 Criteria cri를 모델값으로 저장하는데,
		// 저장명이 cri
		// @RequestParam : 요청 전달값으로 글번호 이용.
		log.info("/get");
		model.addAttribute("board", service.get(bno));
		// jsp에서 request.setAttribute 하던 것과 비슷.
		// 전달값으로 명시만 하면 스프링이 자동 처리.
		// 사용하는 부분만 추가 구현.
	}
get.jspに非表示値を追加する

<form id="operForm" action="/bound/modify" method="get">
					<input type="hidden" id="bno" name="bno" value="${board.bno }" />
					<input type="hidden" name="pageNum" value="${cri.pageNum }" /> <input
						type="hidden" name="amount" value="${cri.amount }" />
				</form>
get.jspでリストボタンを変更する

<button data-oper="list" class="btn btn-info">
					<a href="/board/list?pageNum=${cri.pageNum }&amount=${cri.amount }">
						목록</a>
				</button>
jndi接続のテスト
robolectric依存ライブラリダウンロードピットレコード