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} 로 지정해주자~
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>