게시판에 상세보기 기능을 추가~
=> 게시글 제목을 클릭하면 해당 게시글의 상세보기 페이지로 이동
📝 BoardMapper 수정하기
//조회수 증가
@Update("UPDATE spring_board SET "
+ "hit=hit+1 "
+ "WHERE no=#{no}")
public void hitIncrement(int no);
//detail
@Select("SELECT no,name,subject,content,hit,TO_CHAR(regdate,'YYYY-MM-DD') as dbday FROM spring_board "
+ "WHERE no=#{no}")
public BoardVO boardDetailData(int no);BoardVO는 이미 만들어놨으니까 Mapper에 SQL구문 먼저 추가했다 !!
📝 BoardDAO 수정하기
public BoardVO boardDetailData(int no)
{
mapper.hitIncrement(no);
return mapper.boardDetailData(no);
}게시글을 클릭 할 경우 조회수도 같이 증가되기때문에, 저 안에 hit구문을 추가했다!
📝 BoardController 수정하기
@GetMapping("board/detail.do")
public String board_detail(int no,Model model)
{
//model을 이용해서 no값 넘기기
model.addAttribute("no",no);
return "board/detail";
}no값을 넘겨줘야하기때문에 매개변수로 no, Model을 추가했다.
Model을 이용해서 no값을 넘겨주었다 ㅎ-ㅎ
(참고로 Model은 org.springframework 안에있당)
📝 BoardRestController 수정하기
@GetMapping(value = "board/detail_vue.do",produces = "text/plain;charset=utf-8")
public String board_detail_vue(int no)
{
String result="";
BoardVO vo=dao.boardDetailData(no);
JSONObject obj=new JSONObject();
obj.put("no", vo.getNo());
obj.put("name", vo.getName());
obj.put("subject", vo.getSubject());
obj.put("content", vo.getContent());
obj.put("dbday", vo.getDbday());
obj.put("hit", vo.getHit());
result=obj.toJSONString();
return result;
}detail 같은 경우에는, 10개씩 데이터를 보낼 필요 없기때문에
JSONArray를 사용하지 않았다.
📝 list.jsp 수정하기
제목을 누르면 해당 게시글로 이동해야 하기때문에 수정이 필요하다!
각각 게시글에 No를 붙여서 넘겨주면 된다.
<th width=45%><a :href="'../board/detail.do?no='+vo.no">{{vo.subject}}</a></th>기존 코드를 이렇게 수정했다.
Vue를 이용해서 no값을 넘기려면, href앞에 :를 꼭 붙여줘야한다.(값 매칭)
그리고 ' ' 안에 주소를 작성하고, 밖에 vo.no를 추가해줘야 한다.
(이거 안하면 vo.no를 단순 문자로 인식한다고 하니 주의!)
📝 detail.jsp 만들기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row1 {
margin:0px auto;
width: 700px;
height: 650px;
}
h1 {
text-align: center
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
<h1>상세보기</h1>
<div class="row row1">
<table class="table">
<tr>
<th width=20% class="text-center warning">번호</th>
<td width=30% class="text-center">{{vo.no }}</td>
<th width=20% class="text-center warning">작성일</th>
<td width=30% class="text-center">{{vo.dbday }}</td>
</tr>
<tr>
<th width=20% class="text-center warning">이름</th>
<td width=30% class="text-center">{{vo.name }}</td>
<th width=20% class="text-center warning">조회수</th>
<td width=30% class="text-center">{{vo.hit }}</td>
</tr>
<tr>
<th width=20% class="text-center warning">제목</th>
<td colspan="3">${vo.subject }</td>
</tr>
<tr>
<td colspan="4" class="text-left" valign="top" height="200">
<pre style="white-space: pre-wrap;border:none;background-color: white;">{{vo.content }}</pre>
</td>
</tr>
<tr>
<td colspan="4" class="text-right">
<a href="#" class="btn btn-xs btn-info">수정</a>
<a href="#" class="btn btn-xs btn-warning">삭제</a>
<a href="../board/list.do" class="btn btn-xs btn-success">목록</a>
</td>
</tr>
</table>
</div>
</div>
<script>
new Vue({
el:'.container',
data:{
//array
vo:{},
no:${no}
},
//버튼을 누를때 X => 시작과 동시에 값을 가져옴
mounted:function(){
let _this=this;
axios.get("http://localhost:8080/web/board/detail_vue.do",{
params:{
no:_this.no
}
//요청 처리 결과값 읽기 => 데이터값만 변경(상태변경)
}).then(function(result){
_this.vo=result.data;
})
}
})
</script>
</body>
</html>💻 결과 확인하기
안녕하세요