글 전체 조회 GET
// 127.0.0.1:8080/BOOT1/api/board/selectlist.json?text=&page=1
@GetMapping(value="/selectlist.json")
public Map<String, Object> selectList(
@RequestParam(name="text") String text,
@RequestParam(name="page") int page) {
Map<String, Object> retMap = new HashMap<>();
try {
// (1-1)*10 => 1, (2-1)*10 => 11, (3-1)*10 => 21
List<BoardDTO> list
= bMapper.selectBoardListLikePagenation(
text, (page-1)*10);
retMap.put("status", 200);
retMap.put("list", list);
}
catch(Exception e) {
e.printStackTrace();
retMap.put("status", 0);
}
return retMap;
}
게시물 1개 조회 GET
// 127.0.0.1:8080/BOOT1/api/board/selectboardone.json?no=5
@GetMapping(value="/selectboardone.json")
public Map<String, Object> selectBoardOne(
@RequestParam(name="no") Long no) {
Map<String, Object> retMap = new HashMap<>();
try {
BoardDTO board = bMapper.selectBoardOne(no);
retMap.put("status", 200);
retMap.put("board", board);
}
catch(Exception e) {
e.printStackTrace();
retMap.put("status", 0);
}
return retMap;
}
조회수 증가
// 127.0.0.1:8080/BOOT1/api/board/updatehit.json?no=12
@PutMapping(value = "/updatehit.json")
public Map<String, Object> updateHit(
@RequestParam(name = "no") Long no){
Map<String, Object> retMap = new HashMap<>();
try{
int ret =
bMapper.updateBoardHit(no);
retMap.put("status", 200);
retMap.put("result", ret);
}
catch(Exception e){
e.printStackTrace();
retMap.put("status", -1);
}
return retMap; // 꼭 리턴 해줘야 함 안그러면 오류 남.
}글쓰기
// 127.0.0.1:8080/BOOT1/api/board/insertboardone.json
@PostMapping(value = "/insertboardone.json")
public Map<String, Object> insertBoardOne(
@RequestBody BoardDTO board){
System.out.println(board.toString());
Map<String, Object> retMap = new HashMap<>();
try{
int ret =
bMapper.insertBoardOne(board);
retMap.put("status", 200);
retMap.put("result", ret);
}
catch(Exception e){
e.printStackTrace();
retMap.put("status", -1);
}
return retMap; // 꼭 리턴 해줘야 함 안그러면 오류 남.
}VueController.java
package com.example.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
// 1. vue에서 구현해야 되는 부분
// 2. Model 객체를 통해서 view로 값 전달 하지 않음
@Controller
@RequestMapping(value = "/vue")
public class VueController {
@GetMapping(value = "/boardlist.do")
public String boardList(){
return "vue/boardlist";
}
@GetMapping(value = "/boardinsert.do")
public String getMethodName(){
return "vue/boardinsert";
}
}vue/boardlist.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판목록</title>
</head>
<body>
<a th:href="@{/vue/boardinsert.do}">글쓰기</a>
<table border="1">
<tbody id="tbody">
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
<th>등록일</th>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
<script>
const handleData = async() => {
const tbody = document.getElementById("tbody");
const text = '';
const page = 1;
const url = `/BOOT1/api/board/selectlist.json?text=${text}&page=${page}`;
const headers = {"Content-Type":"application/json"};
const { data } = await axios.get(url, {headers});
console.log(data);
if(data.status === 200){
for(let i=0;i<data.list.length;i++){
tbody.innerHTML +=
`<tr>`+
`<td>${data.list[i].no}</td>`+
`<td>${data.list[i].title}</td>`+
`<td>${data.list[i].writer}</td>`+
`<td>${data.list[i].hit}</td>`+
`<td>${data.list[i].regdate}</td>`+
`</tr>`;
}
}
}
handleData(); //함수는 호출되어야 실행됨.
</script>
</body>
</html>vue/boardinsert.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글쓰기</title>
</head>
<body>
<h3>글쓰기</h3>
<hr />
제목 <input type="text" id="title" /><br />
내용 <input type="text" id="content" /><br />
작성자 <input type="text" id="writer" /><br />
<button th:onclick="|javascript:handleInsert()|">글쓰기</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
<script>
const title = document.getElementById("title");
const content = document.getElementById("content");
const writer = document.getElementById("writer");
const handleInsert = async() => {
const url = `[[@{/api/board/insertboardone.json}]]`;
const headers = `{"Content-Type":"application/json"}`;
const body = {
title : title.value,
content : content.value,
writer : writer.value,
}
console.log(body);
const { data } = await axios.post(url,body,{headers});
console.log(data);
if(data.status === 200){
window.location.href='[[@{/vue/boardlist.do}]]';
}
}
</script>
</body>
</html>
갓 신생아 개발자 이야기