Spring/Spring Data JPA

[JPA] 마우스 위치, selectbox 검색, ToString 말고 지정값 출력

2023. 5. 18. 00:28

목차

1. 마우스 위치에 게시글 정보 뜨기
2. selectbox 로 검색 다르게 받기
3. 조인한 테이블의 값들 중 원하는 값만 호출하기
0. 총코드

1. 마우스 위치에 게시글 정보 뜨기

// BoardController
@ResponseBody
@PostMapping("/detailAjax")
public Map mini(int num) {
	MyBoardDto dto = service.getBoard(num);
	Map map = new HashMap();
	map.put("vo", dto); //{"vo":{"num":1, "writer":{"id":"aaa"...}, "wdate":...}}
	return map;
}

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// e = 이벤트가 일어나는 객체 
	$('.h').hover(function(e){ // mouseenter
		let num = $(this).attr("num");
		$.ajax({
			url: '/board/detailAjax',
			type: 'post',
			data: {'num':num}, // 전송할 데이터 (파람)
			dataType: 'JSON',
			success: function(result){ //{"vo":{"num":1, "writer":{"id":"aaa"...}, "wdate":...}}
				let txt = '';
				let vo = result.vo;
				txt += 'num: ' + vo.num + '<br/>';
				txt += 'writer: ' + vo.writer.id + '<br/>';
				txt += 'wdate: ' + vo.wdate + '<br/>';
				txt += 'title: ' + vo.title + '<br/>';
				txt += 'content: ' + vo.content + '<br/>';
				$('#detail').html(txt);
                    
                // 마우스 위치에 뜨게 하기 
				$('#detail').css('top', e.pageY);
				$('#detail').css('left', e.pageX);
				$('#detail').css('display', 'block');
			},
			error: function(req, status){
				alert(status);
			}
		});
	}, function(){ // mouseleave
		$('#detail').hide();
	})
})
</script>
</head>
<body>
<div id="detail" style="position: absolute; top: 100px; left: 300px; border: 1px solid blue; display: none; background-color:white"></div>

<table border="1">
<tr><th>글번호</th><th>제목</th><th>작성자</th><th>날짜</th></tr>

<c:forEach var="vo" items="${list}">
	<tr>
		<td>${vo.num}</td>
		<td><a href="/board/detail?num=${vo.num}" class="h" num="${vo.num }">${vo.title}</a></td>
		<td>${vo.writer.id}</td> <!-- writer 테이블값 중 id만 출력해라~! -->
		<td>${vo.wdate}</td>
	</tr>
</c:forEach>
</table>
</body>

2. selectbox 로 검색 다르게 받기

<script>
function a() {
	let type = f.searchType.value;
	let span = document.getElementById("searchSpan");
	let html = "";
	if (type == "1") {
		html = "<input type = 'text' name = 'writer'>";
		f.action = "/board/getbyname"; //form의 액션 속성에 값 넣어줌 
	} else {
		html = "<input type = 'text' name = 'title'>";
		f.action = "/board/getbytitle";
	}
	span.innerHTML = html;
}
</script>
</head>
<body>
<form action="/board/getbywriter" method="post" name = "f">
	<span> <select name="searchType" onchange = "a()">
			<option value="1">작성자</option>
			<option value="2">제목</option></select>
	</span> 
	<span id = "searchSpan"> 
		<input type = 'text' name = 'writer'>
	</span> 
	<input type="submit" value="검색">
</form>
</body>

3. 조인한 테이블의 값들 중 원하는 값만 호출하기

@ManyToOne
@JoinColumn(nullable=false) // fk 설정 
@OnDelete(action = OnDeleteAction.CASCADE) // on delete cascade
private Mymember writer; // 검색할 때마다 테이블을 조인해서 writer에 대한 정보를 모두 보여줌..

테이블을 조인하는 멤버변수를 그냥 호출하게 되면 해당 테이블의 ToString이 출력된다.

${vo.writer}

원하는 값만 출력하고 싶다면

${vo.writer.id}

${vo.writer} -> ${vo.writer.id} 로 지정해주자~

0. 총코드

Myboard

package com.example.demo.board;

import java.util.Date;

import org.hibernate.annotations.OnDelete;
import org.hibernate.annotations.OnDeleteAction;

import com.example.demo.member.Mymember;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.JoinColumn;
import jakarta.persistence.ManyToOne;
import jakarta.persistence.PrePersist;
import jakarta.persistence.PreUpdate;
import jakarta.persistence.SequenceGenerator;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;

@Entity
@Setter
@Getter
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class Myboard {
	@Id
	@SequenceGenerator(name="seq_gen", sequenceName="seq_myboard", allocationSize=1)
	@GeneratedValue(strategy=GenerationType.SEQUENCE, generator="seq_myboard")
	private int num;
	
	// @ManyToOne(n:1) -- 여러 글을 한 사람이 쓸 수 있음  
	// @OneToOne(1:1) -- 한 사람이 하나만 만들 수 있음 
	// @OneToMany(1:n) -- 한 사람이 여러 글을 쓸 수 있음
	// @ManyToMany(n:n) -- 여러 사람이 여러 글을 쓸 수 있음 (..?)
	@ManyToOne
	@JoinColumn(nullable=false) // fk 설정 
	@OnDelete(action = OnDeleteAction.CASCADE) // on delete cascade
	private Mymember writer; // 검색할 때마다 테이블을 조인해서 writer에 대한 정보를 모두 보여줌..
	
	private Date wdate; // java.util.Date 로 import
	private String title;
	private String content;
	
	@PreUpdate
	@PrePersist //insert문 실행 전에 먼저 처리 
	public void sysdate() {
		wdate = new Date();
	}
}

MyBoardDto

package com.example.demo.board;

import java.util.Date;

import com.example.demo.member.Mymember;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;

@Setter
@Getter
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class MyBoardDto {
	private int num;
	private Mymember writer; 
	private Date wdate; 
	private String title;
	private String content;

}

BoardDao

package com.example.demo.board;

import java.util.ArrayList;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.example.demo.member.Mymember;

@Repository
public interface BoardDao extends JpaRepository<Myboard, Integer> {
	// 제목으로 검색
	ArrayList<Myboard> findByTitleLike(String title);
	
	// 작성자로 검색 
	// 파라메터 타입은 컬럼 타입과 동일하게 해줘야 한다~~
	ArrayList<Myboard> findByWriter(Mymember writer);

}

BoardController

package com.example.demo.board;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/board")
public class BoardController {
	@Autowired
	private BoardService service;

	@GetMapping("/list")
	public void list(ModelMap map) {
		ArrayList<MyBoardDto> list = service.getAllBoard();
		map.addAttribute("list", list);
	}

	// 글목록에서 글내용 미리보기
	@ResponseBody
	@PostMapping("/detailAjax")
	public Map mini(int num) {
		MyBoardDto dto = service.getBoard(num);
		Map map = new HashMap();
		map.put("vo", dto); //{"vo":{"num":1, "writer":{"id":"aaa"...}, "wdate":...}}
		return map;
	}

	// 작성자로 검색
	@PostMapping("/getbywriter")
	public ModelAndView writer(String writer) {
		ModelAndView mav = new ModelAndView("/board/list");
		mav.addObject("list", service.getBoardByWriter(writer));
		return mav;
	}

	// 제목으로 검색
	@PostMapping("/getbytitle")
	public ModelAndView title(String title) {
		ModelAndView mav = new ModelAndView("/board/list");
		mav.addObject("list", service.getBoardByTitle(title));
		return mav;
	}

	// 글작성폼
	@GetMapping("/add")
	public void addForm() {
	}

	// 글작성 완료
	@PostMapping("/add")
	public String add(MyBoardDto dto) {
		service.saveBoard(dto);
		return "redirect:/board/list";
	}

	// 글 디테일
	@GetMapping("/detail")
	public void detail(int num, ModelMap map) {
		map.addAttribute("vo", service.getBoard(num));
	}

	// 글 수정
	@PostMapping("/detail")
	public String edit(MyBoardDto dto) {
//		MyBoardDto dto2 = service.getBoard(dto.getNum());
//		dto2.setTitle(dto.getTitle());
//		dto2.setContent(dto.getContent());
//		service.saveBoard(dto2);
		service.saveBoard(dto);
		return "redirect:/board/list";
	}

	// 글 삭제
	@GetMapping("/del")
	public String del(int num) {
		service.delBoard(num);
		return "redirect:/board/list";
	}

}

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$('.h').hover(function(e){ // mouseenter
			let num = $(this).attr("num");
			//alert(num);
			$.ajax({
				url: '/board/detailAjax',
				type: 'post',
				data: {'num':num}, // 전송할 데이터 (파람)
				dataType: 'JSON',
				success: function(result){ //{"vo":{"num":1, "writer":{"id":"aaa"...}, "wdate":...}}
					let txt = '';
					let vo = result.vo;
					txt += 'num: ' + vo.num + '<br/>';
					txt += 'writer: ' + vo.writer.id + '<br/>';
					txt += 'wdate: ' + vo.wdate + '<br/>';
					txt += 'title: ' + vo.title + '<br/>';
					txt += 'content: ' + vo.content + '<br/>';
					$('#detail').html(txt);
					$('#detail').css('top', e.pageY);
					$('#detail').css('left', e.pageX);
					$('#detail').css('display', 'block');
				},
				error: function(req, status){
					alert(status);
				}
			});
		}, function(){ // mouseleave
			$('#detail').hide();
		})
	})
	
	function a() {
		let type = f.searchType.value;
		let span = document.getElementById("searchSpan");
		let html = "";
		if (type == "1") {
			html = "<input type = 'text' name = 'writer'>";
			f.action = "/board/getbyname"; //form의 액션 속성에 값 넣어줌 
		} else {
			html = "<input type = 'text' name = 'title'>";
			f.action = "/board/getbytitle";
		}
		span.innerHTML = html;
	}
</script>
</head>
<body>
	<h3>글목록</h3>

	<div id="detail"
		style="position: absolute; top: 100px; left: 300px; border: 1px solid blue; display: none; background-color:white"></div>

	<a href="/board/add">글작성</a>
	<a href="/">뒤로가기</a>
	<br />

	<c:if test="${empty list}">
		작성된 글이 없습니다.
	</c:if>
	<c:if test="${not empty list}">
	
		<form action="/board/getbywriter" method="post" name = "f">
			<span> <select name="searchType" onchange = "a()">
					<option value="1">작성자</option>
					<option value="2">제목</option></select>
			</span> 
			<span id = "searchSpan"> 
				<input type = 'text' name = 'writer'>
			</span> 
			<input type="submit" value="검색">
		</form>
		<br/>
	
		<table border="1">
			<tr>
				<th>글번호</th>
				<th>제목</th>
				<th>작성자</th>
				<th>날짜</th>
			</tr>

			<c:forEach var="vo" items="${list}">
				<tr>
					<td>${vo.num}</td>
					<td><a href="/board/detail?num=${vo.num}" class="h"
						num="${vo.num }">${vo.title}</a></td>
					<td>${vo.writer.id}</td> <!-- writer 테이블값 중 id만 출력해라~! -->
					<td>${vo.wdate}</td>
				</tr>
			</c:forEach>
		</table>
	</c:if>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$('.h').hover(function(e){ // mouseenter
			let num = $(this).attr("num");
			//alert(num);
			$.ajax({
				url: '/board/detailAjax',
				type: 'post',
				data: {'num':num}, // 전송할 데이터 (파람)
				dataType: 'JSON',
				success: function(result){ //{"vo":{"num":1, "writer":{"id":"aaa"...}, "wdate":...}}
					let txt = '';
					let vo = result.vo;
					txt += 'num: ' + vo.num + '<br/>';
					txt += 'writer: ' + vo.writer.id + '<br/>';
					txt += 'wdate: ' + vo.wdate + '<br/>';
					txt += 'title: ' + vo.title + '<br/>';
					txt += 'content: ' + vo.content + '<br/>';
					$('#detail').html(txt);
					$('#detail').css('top', e.pageY);
					$('#detail').css('left', e.pageX);
					$('#detail').css('display', 'block');
				},
				error: function(req, status){
					alert(status);
				}
			});
		}, function(){ // mouseleave
			$('#detail').hide();
		})
	})
	
	function a() {
		let type = f.searchType.value;
		let span = document.getElementById("searchSpan");
		let html = "";
		if (type == "1") {
			html = "<input type = 'text' name = 'writer'>";
			f.action = "/board/getbyname"; //form의 액션 속성에 값 넣어줌 
		} else {
			html = "<input type = 'text' name = 'title'>";
			f.action = "/board/getbytitle";
		}
		span.innerHTML = html;
	}
</script>
</head>
<body>
	<h3>글목록</h3>

	<div id="detail"
		style="position: absolute; top: 100px; left: 300px; border: 1px solid blue; display: none; background-color:white"></div>

	<a href="/board/add">글작성</a>
	<a href="/">뒤로가기</a>
	<br />

	<c:if test="${empty list}">
		작성된 글이 없습니다.
	</c:if>
	<c:if test="${not empty list}">
	
		<form action="/board/getbywriter" method="post" name = "f">
			<span> <select name="searchType" onchange = "a()">
					<option value="1">작성자</option>
					<option value="2">제목</option></select>
			</span> 
			<span id = "searchSpan"> 
				<input type = 'text' name = 'writer'>
			</span> 
			<input type="submit" value="검색">
		</form>
		<br/>
	
		<table border="1">
			<tr>
				<th>글번호</th>
				<th>제목</th>
				<th>작성자</th>
				<th>날짜</th>
			</tr>

			<c:forEach var="vo" items="${list}">
				<tr>
					<td>${vo.num}</td>
					<td><a href="/board/detail?num=${vo.num}" class="h"
						num="${vo.num }">${vo.title}</a></td>
					<td>${vo.writer.id}</td> <!-- writer 테이블값 중 id만 출력해라~! -->
					<td>${vo.wdate}</td>
				</tr>
			</c:forEach>
		</table>
	</c:if>

</body>
</html>

저작자표시 비영리 동일조건

티스토리툴바