진도 2. 게시판

$.ajax({
            type: "GET",
            url: "/i-am-catholic/boards",
            data: {
                "query": ""
            },
            success: function (result) {
                console.log(result);
                let listTag = "";

                if ( result.content.length !=0 ) {
                     result.content.forEach(function (item) {

                         listTag += 
                             "<li>" +
                             "<a href='./board_view.html'>" +
                             "<div class='text-wrap'>" +
                             "<p class='tit'>나는 천주교인이오 게시글 제목나는 천주교인이오 게시글 제목나는 천주교인이오 게시글 제목나는 천주교인이오 게시글 제목나는 천주교인이오 게시글 제목</p>" +
                             "<p class='txt'>" +
                             "나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용나는 천주교인이오 게시글 내용" +
                             "</p>" +
                             "<div class='date-wrap'>" +
                             "<div class='view'>" +
                             "<p class='view'>2022</p>" +
                             "<p class='comment'>1502</p>" +
                             "</div>" +
                             "<p class='date'>2022.07.11</p>" +
                             "</div>" +
                             "</div>" +
                             "<div class='thum-img'>" +
                             "<img src='../images/thumImg01.jpg' alt='썸네일이미지'>" +
                             "</div>" +
                             "</a>" +
                             "</li>"
                    });
                    $(".week-board-wrap2").html(listTag);
                }
            }
        });
        
 

listTag 넣는것 >

postman에서 이걸(=Response Body)보면 된다!! 오타 있을 수 있으니 옆의 값 보면서 하기.

listTag += 
                            "<li>" +
                            "<a href='./board_view.html'>" +
                            "<div class='text-wrap'>" +
                            "<p class='tit'>"+item.title+"</p>" +
                            "<p class='txt'>"+item.contents+"</p>" +
                            "<div class='date-wrap'>" +
                            "<div class='view'>" +
                            "<p class='view'>"+item.views+"</p>" +
                            "<p class='comment'>"+item.comments+"</p>" +
                            "</div>" +
                            "<p class='date'>"+item.createdAt+"</p>" +
                            "</div>" +
                            "</div>" +
                            "<div class='thum-img'>" +
                            "<img src='../images/thumImg01.jpg' alt='썸네일이미지'>" +
                            "</div>" +
                            "</a>" +
                            "</li>"

---

검색 / 페이지네이션

$(function(){
getBoard();
});

    let page=1;

    function getBoard() {
        let query=$(".query").val();

        $.ajax({
            type: "GET",
            url: "/i-am-catholic/boards",
            data: {
                "size": 4,
                "query": query,
                "page": page-1
            },
            success: function (result) {
                console.log(result);
                let listTag = "";

                if ( result.content.length !=0 ) {
                    result.content.forEach(function (item) {

                        listTag +=
                            "<li>" +
                            "<a href='./board_view.html'>" +
                            "<div class='text-wrap'>" +
                            "<p class='tit'>"+item.title+"</p>" +
                            "<p class='txt'>"+item.contents+"</p>" +
                            "<div class='date-wrap'>" +
                            "<div class='view'>" +
                            "<p class='view'>"+item.views+"</p>" +
                            "<p class='comment'>"+item.comments+"</p>" +
                            "</div>" +
                            "<p class='date'>"+item.createdAt+"</p>" +
                            "</div>" +
                            "</div>" +
                            "<div class='thum-img'>" +
                            "<img src='../images/thumImg01.jpg' alt='썸네일이미지'>" +
                            "</div>" +
                            "</a>" +
                            "</li>"
                    });
                    $(".boardsList2").html(listTag);
                }else {
                    $(".boardsList2").html(listTag);
                }
                fPagination(result, page);
            }
        });
    }

    $("#pagination").on("click", "a", function() {
        page = parseInt($(this).attr("gopage"));
        getBoard();
    });