AJAX : 게시글 보기, 수정 페이지로 이동

1. index.mustache에 요청해보기

• 헤더에 JQuery랑 fontasome 링크 추가하기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

• ajax 요청이 일어나야 함

• 서버가 같으면 8080뒤에 있는 주소는 뒤에 것만 적어도 됨

• type이 post면 컨텐트타입, 데이터가 추가로 들어감

• 정상(200)이면 done->바디 데이터

• 실패면 다 fail

{{> layout/header}}

<div class="container p-5">

    <table class="table table-striped">
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성자</th>
            <th></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div>
<script>
    $.ajax({
        url: "/api/boards", //서버가 같으면 8080뒤에 있는 주소는 뒤에 것만 적어도 됨
        type: "get" // post면 컨텐트타입, 데이터가 추가로 들어감
    }).done((res) => { // 정상(200)이면 done->바디 데이터
        console.log("통신 성공");
        console.log(res);

    }).fail((res) => {
        console.log("통신 실패");
        console.log(res);
    }); // 실패면 다 fail

    function getBoard() {
        return `<tr id="board-5">
            <td>5</td>
            <td>제목5</td>
            <td>내용5</td>
            <td>홍길동</td>
            <td>
                <div class="d-flex">
                    <form action="#">
                        <button class="btn btn-danger">삭제</button>
                    </form>
                    <form action="/board/1/updateForm" method="get">
                        <button class="btn btn-warning">수정</button>
                    </form>
                </div>
            </td>
        </tr>`;
    }
</script>

{{> layout/footer}}

2. 강제로 터뜨려보기

• 상태 코드 500 셋팅해서 터뜨리기

package shop.mtcoding.blog.board;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequiredArgsConstructor
@RestController // 데이러틀 리턴
public class BoardApiController {
    private final BoardRepository boardRepository; // DI

    // 주소 만들기
    @GetMapping("api/boards") // 보드 줘라는 주소, 복수는 보드들 줘, 보드들 중에 1번 줘해서 복수형을 씀
    public ApiUtil<List<Board>> findAll(HttpServletResponse response) {
        response.setStatus(500);
        List<Board> boardList = boardRepository.selectAll(); // 상태코드랑 메세지랑 같이 줘야함
        return new ApiUtil<>(boardList); // MessageConverter라는 클래스가 오브젝트를 응답할때 자동 발동함
    }
}

• 상태 코드 400 셋팅해서 터뜨리기

package shop.mtcoding.blog.board;

import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequiredArgsConstructor
@RestController // 데이러틀 리턴
public class BoardApiController {
    private final BoardRepository boardRepository; // DI

    // 주소 만들기
    @GetMapping("api/boards") // 보드 줘라는 주소, 복수는 보드들 줘, 보드들 중에 1번 줘해서 복수형을 씀
    public ApiUtil<List<Board>> findAll(HttpServletResponse response) {
        response.setStatus(400);
        List<Board> boardList = boardRepository.selectAll(); // 상태코드랑 메세지랑 같이 줘야함
        return new ApiUtil<>(400, "유저네임이 중복되었습니다"); // MessageConverter라는 클래스가 오브젝트를 응답할때 자동 발동함
    }
}

• 실패시 alert 창 띄우기

{{> layout/header}}

<div class="container p-5">

    <table class="table table-striped">
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성자</th>
            <th></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div>
<script>
    $.ajax({
        url: "/api/boards", //서버가 같으면 8080뒤에 있는 주소는 뒤에 것만 적어도 됨
        type: "get" // poset면 컨텐트타입, 데이터가 추가로 들어감
    }).done((res) => { // 정상(200)이면 done->바디 데이터
        console.log("통신 성공");
        console.log(res);

    }).fail((res) => {
        //console.log(res);
        alert(res.responseJSON.msg);
        // location.herf="/loginForm";
    }); // 실패면 다 fail

    function getBoard() {
        return `<tr id="board-5">
            <td>5</td>
            <td>제목5</td>
            <td>내용5</td>
            <td>홍길동</td>
            <td>
                <div class="d-flex">
                    <form action="#">
                        <button class="btn btn-danger">삭제</button>
                    </form>
                    <form action="/board/1/updateForm" method="get">
                        <button class="btn btn-warning">수정</button>
                    </form>
                </div>
            </td>
        </tr>`;
    }
</script>

{{> layout/footer}}

• 상태 코드 401 셋팅해서 터뜨리기

package shop.mtcoding.blog.board;

import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequiredArgsConstructor
@RestController // 데이러틀 리턴
public class BoardApiController {
    private final BoardRepository boardRepository; // DI

    // 주소 만들기
    @GetMapping("api/boards") // 보드 줘라는 주소, 복수는 보드들 줘, 보드들 중에 1번 줘해서 복수형을 씀
    public ApiUtil<List<Board>> findAll(HttpServletResponse response) {
        //response.setStatus(401);
        List<Board> boardList = boardRepository.selectAll(); // 상태코드랑 메세지랑 같이 줘야함
        return new ApiUtil<>(boardList); // MessageConverter라는 클래스가 오브젝트를 응답할때 자동 발동함
    }
}

• 실패시 로그인 화면으로 이동시켜줘도 좋음

{{> layout/header}}

<div class="container p-5">

    <table class="table table-striped">
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성자</th>
            <th></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div>
<script>
    $.ajax({
        url: "/api/boards", //서버가 같으면 8080뒤에 있는 주소는 뒤에 것만 적어도 됨
        type: "get" // poset면 컨텐트타입, 데이터가 추가로 들어감
    }).done((res) => { // 정상(200)이면 done->바디 데이터
        console.log("통신 성공");
        console.log(res);

    }).fail((res) => {
        //console.log(res);
        alert(res.responseJSON.msg);
        // location.herf="/loginForm";
    }); // 실패면 다 fail

    function getBoard() {
        return `<tr id="board-5">
            <td>5</td>
            <td>제목5</td>
            <td>내용5</td>
            <td>홍길동</td>
            <td>
                <div class="d-flex">
                    <form action="#">
                        <button class="btn btn-danger">삭제</button>
                    </form>
                    <form action="/board/1/updateForm" method="get">
                        <button class="btn btn-warning">수정</button>
                    </form>
                </div>
            </td>
        </tr>`;
    }
</script>

{{> layout/footer}}

• 데이터는 현재 javascpript 오브젝트임

3. render 뿌리기

• 위에 다가 디자인 해놓고 집어넣으면 됨

• 나중에 body안에 form 태그가 아니라 ajax로 할 것

• 수정은 수정 페이지로 이동 /ajax가 아닌 이동

• a태그를 사용해도 됨

<a href="/board/1/updateForm" class btn-waring>수정</a>

• append로 하기 위해 selectAll에 order by id desc 추가해서 정렬하기

package shop.mtcoding.blog.board;

import jakarta.persistence.EntityManager;
import jakarta.persistence.Query;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@RequiredArgsConstructor
@Repository
public class BoardRepository {
    private final EntityManager em;

    public List<Board> selectAll(){
        Query query = em.createNativeQuery("select * from board_tb order by id desc ", Board.class);
        List<Board> boardList = query.getResultList(); // 못찾으면 빈 컬렉션을 준다 (크기=0)
        return boardList;
    }

    public Board selectOne(int id){
        Query query = em.createNativeQuery("select * from board_tb where id = ?", Board.class);
        query.setParameter(1, id);

        try {
            Board board = (Board) query.getSingleResult();
            return board;
        } catch (Exception e) {
            return null;
        }
    }

    @Transactional
    public void insert(String title, String content, String author){
        Query query = em.createNativeQuery("insert into board_tb(title, content, author) values(?, ?, ?)");
        query.setParameter(1, title);
        query.setParameter(2, content);
        query.setParameter(3, author);

        query.executeUpdate();
    }
}

• for문 돌리면서 render 함수의 값으로 그림 그리는 것

• js코드는 무조건 제일 밑에!

• 수정 페이지 이동 주소 수정하기

{{> layout/header}}

<div class="container p-5">

    <table class="table table-striped">
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성자</th>
            <th></th>
        </tr>
        </thead>
        <tbody id="board-box">
        
        </tbody>
    </table>

</div>
<script>
    $.ajax({
        url: "/api/boards", //서버가 같으면 8080뒤에 있는 주소는 뒤에 것만 적어도 됨
        type: "get" // poset면 컨텐트타입, 데이터가 추가로 들어감
    }).done((res) => { // 정상(200)이면 done->바디 데이터
        console.log("통신 성공");
        console.log(res);

        // for(board of boardList){}도 가능하나 stream api를 쓰는 것이 좋음
        let boardList = res.body;
        boardList.forEach((board)=>{
            $("#board-box").append(render(board));
        });

    }).fail((res) => {
        //console.log(res);
        alert(res.responseJSON.msg);
        // location.herf="/loginForm";
    }); // 실패면 다 fail

    function render(board) {
        return `<tr id="board-${board.id}">
            <td>${board.id}</td>
            <td>${board.title}</td>
            <td>${board.content}</td>
            <td>${board.author}</td>
            <td>
                <div class="d-flex">
                        <button onclick="del(${board.id})" class="btn btn-danger">삭제</button>
                    <form action="/board/${board.id}/updateForm" method="get">
                        <button class="btn btn-warning">수정</button>
                    </form>
                </div>
            </td>
        </tr>`;
    }
</script>

{{> layout/footer}}