Spring Boot 로 웹 서비스 출시하기 -4. 게시판 구현하기 (JPA + RestAPI + Oracle) Ajax(axios)를 이용한 DB 비동기 통신, VIEW 연결

실수·2021년 3월 23일
0

SpringBoot로 웹 프로젝트 만들기

목록 보기
4/4

AJAX와 AXIOS,FETCH

지난번엔 기본 Controller를 이용하여 웹페이지를 새로고침 하면서 데이터를 불러오는 방식을 이용하였는데, 이번에는 RestController오로 구현한 RestApi와 axios라는 자바스크립트 라이브러리를 이용하여 비동기 통신을 해보도록 하겠습니다.

axios와 fetch는 Ajax의 라이브러리 중 하나입니다. (참고)

먼저, 저번에 만들었던 RestApi를 토대로 axios를 이용하여 VIEW와 연결하여보겠습니다.

GET

CRUD 중의 Read(읽기)를 해보겠습니다.
axios객체는 아래와 같이 간단하게 HTTP요청을 할 수 있습니다.(참고)

axios({
  url: '요청 URL',
  method: 'get',
  data: {
  	데이터(매개 변수)
  }
});

동일한 방식, 형식이 다르게 사용 가능

axios.get('요청 URL', {
  params: {
	데이터(매개 변수)
  }
});

이를 기반으로 제 로컬주소에 등록해놓은 API주소에서 데이터를 가져와 보겠습니다.


로컬주소를 주소창에 입력하게되면 RestController에 의해서 JSON 값들을 출력받게 되는데 이를 axios 를 이용하여 값을 요청한뒤 받아오는 방식입니다.

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>board</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.serializeObject/2.0.3/jquery.serializeObject.min.js"></script>
</head>
<script>
    $(function() {
        axios.get('/member/all', {
        })
            .then(function (response) {
                let tb = $("<tbody/>");
                console.log(response)
                for(var i in response.data) {
                    console.log(response.data)

                    let $id = response.data[i].id
                    let $email = response.data[i].email
                    let $name = response.data[i].name
                    let $nickname = response.data[i].nickname
                    let $rrn= response.data[i].rrn
                    let $gender = response.data[i].gender
                    let $phone = response.data[i].phone
                    let $createdDate = response.data[i].createdDate

                    var row = $("<tr/>").append(
                        '<td><a href='+$id+'>' + $id + '</a></td>'+
                        '<td>'+$email+'</td>'+
                        '<td>'+$name+'</td>'+
                        '<td>'+$nickname+'</td>'+
                        '<td>'+$rrn+'</td>'+
                        '<td>'+$gender+'</td>'+
                        '<td>'+$phone+'</td>'+
                        '<td>'+$createdDate+'</td>'
                    )
                    tb.append(row);
                }
                $(".thead").after(tb);
            })
            .catch(function (error) {
                console.log(error);
            })
            .finally(function () {
                // always executed
            });
    })

</script>
<body>
<div class="container">
    <h2>회원 목록</h2>
    <table class="board_list">
        <colgroup>
            <col width="15%"/>
            <col width="*"/>
            <col width="15%"/>
            <col width="20%"/>
            <col width="20%"/>
            <col width="20%"/>
            <col width="20%"/>
            <col width="20%"/>
        </colgroup>
        <thead class="thead">
        <tr>
            <th scope="col">회원번호</th>
            <th scope="col">이메일</th>
            <th scope="col">이름</th>
            <th scope="col">닉네임</th>
            <th scope="col">생년월일</th>
            <th scope="col">성별</th>
            <th scope="col">휴대폰</th>
            <th scope="col">생성일</th>
        </tr>
        </thead>
        <!--       <tbody>-->
        <!--        <tr th:if="${#lists.size(list)} > 0" th:each="list : ${list}">-->
        <!--            <td th:text="${list.id}"></td>-->
        <!--            <td class="title"><a href="/board/updateMember/" th:attrappend="href=${list.id}" th:text="${list.name}"></a></td>-->
        <!--            <td th:text="${list.job}"></td>-->
        <!--            <td><a href="/board/updateMember/" th:attrappend="href=${list.id}">수정</a> / <a href="/board/deleteMember/" th:attrappend="href=${list.id}">삭제</a> </td>-->
        <!--        </tr>-->
        <!--        <tr th:unless="${#lists.size(list)} > 0">-->
        <!--            <td colspan="4">조회된 결과가 없습니다.</td>-->
        <!--        </tr>-->
        <!--        </tbody>-->
    </table>
    <a href="/user/signup" class="btn">회원 가입</a>
</div>
</body>
</html>

axios가 response 값을 받게되면 모든유저가 담긴 배열을 반환받게 되는데, 그 배열의 data값 안에 유저 정보가 담겨있습니다. 그래서 response.data[i]를 이용하여 i값에 해당하는 데이터를 뽑아오게 됩니다.

아래 주석처리 되어있는 <tbody>값 밑의 테이블 구조를 자바스크립트 에서 지정하여 새로 생성해 주고 있는데, 따로 td,tr에 아이디를 주어서 값만 바꾸어 주어도 상관 없습니다.


성공적으로 출력이 되는것을 볼수가 있습니다.
스타일은 제가 스타일시트를 적용해주어서 저렇게 출력이 되는것입니다.

POST

POST부분의 form부분의 제작이 미흡하여 axios 코드만 업로드 하겠습니다..
input 쪽의 id값만 잘 설정하시면 작동이 될겁니다.

    function submit_click(){
        var email = $("#email").val();
        var password = $("#password").val();
        var name = $("#name").val();
        var nickname = $("#nickname").val();
        var rrn = $("#rrn").val();
        var gender = $("#gender").val();
        var phone = $("#phone").val();

        axios.request({
            method : 'POST',
            url: '/member/new',
            headers: {'Content-type' : 'application/json'},
            data: {
                email : email,
                password : password,
                name : name,
                nickname : nickname,
                rrn : rrn,
                gender : gender,
                phone : phone
            }
        }).then(
            alert("회원가입에 성공했습니다.")
        )
    }

이번엔 POST 방식을 이용하여 데이터값을 api 서버로 전달하는 방식입니다.

form의 submit 버튼에 onclick="submit_click()" 함수를 적용하여 회원가입 버튼을 누를시
input type="text" 안의 값들을 매개변수로 지정하여 /member/new 주소로 json 형식으로 전송하는 로직입니다.

PUT,DELETE

PUT과 DELETE는 유저 상세정보를 볼수있는 페이지를 만들어 그곳에서 수정과 삭제가 되도록 구현했습니다.

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>board</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.serializeObject/2.0.3/jquery.serializeObject.min.js"></script>
</head>
<script>
    $(function(){
        var $id = $("#id").val();
        axios.get('member/'+$id,{
        }).then(function (response) {
            let $id = response.data.id
            let $email = response.data.email
            let $name = response.data.name
            let $nickname = response.data.nickname
            let $rrn= response.data.rrn
            let $gender = response.data.gender
            let $phone = response.data.phone
            console.log($id)
            document.getElementById("email").value = $email
            document.getElementById("name").value = $name
            document.getElementById("nickname").value = $nickname
            document.getElementById("rrn").value = $rrn
            document.getElementById("gender").value = $gender
            document.getElementById("phone").value = $phone

        }).then(function (error){
        })
    })

    function submit_click(){
        var $id = $("#id").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var name = $("#name").val();
        var nickname = $("#nickname").val();
        var rrn = $("#rrn").val();
        var gender = $("#gender").val();
        var phone = $("#phone").val();

        axios.request({
            method : 'PUT',
            url: 'member/' + $id,
            data: {
                email : email,
                password : password,
                name : name,
                nickname : nickname,
                rrn : rrn,
                gender : gender,
                phone : phone
            }
        }).then(
            alert("수정을 성공 했습니다."),
        location.href="/member"
        )

    }

    function delete_click(){
        var $id = $("#id").val();
        axios.delete('/member/'+$id)
            .then(function (response) {
                if(confirm("삭제에 성공했습니다. 메인으로 돌아갈까요?")) {
                    window.location.href = "/member"
                }
            })
            .catch(function (response) {

            })
            .then(function () {
            });
    }

</script>
<body>
<div class="container">
    <h2>회원 상세</h2>
    <form class="zz" role="form">
        <table class="board_list">
            <tr>
                <td>회원번호</td>
                <td th:text ="${id}"> </td>
                <td>
                    <input type="hidden" name="id" id="id" th:value="${id}">
                </td>
            </tr>
            <tr>
                <td>이메일</td>
                <td>
                    <input type="text" name="email" id="email"/>
                </td>
            </tr>
                    <input type="hidden" name="password" id="password"/>
            <tr>
                <td>이름</td>
                <td>
                    <input type="text" name="name" id="name"/>
                </td>
            </tr>
            <tr>
                <td>닉네임</td>
                <td>
                    <input type="text" name="nickname" id="nickname"/>
                </td>
            </tr>
            <tr>
                <td>생년월일</td>
                <td>
                    <input type="text" name="rrn" id="rrn"/>
                </td>
            </tr>
            <tr>
                <td>성별</td>
                <td>
                    <input type="text" name="gender" id="gender"/>
                </td>
            </tr>
            <tr>
                <td>휴대폰</td>
                <td>
                    <input type="text" name="phone" id="phone"/>
                </td>
            </tr>
        </table>
        <input type="button" id="submit" onclick="submit_click()" value="저장" class="btn">
        <input type="button" id="delete" onclick="delete_click()" value="삭제" class="btn">
    </form>
</div>
</body>
</html>

페이지로 들어오게되면 기본실행되는 $(function(){}) 을 통하여 값을 읽어들이게 되고




수정을 하면 메인화면으로 수정이됨과 동시에 메인화면으로 이동하게 됩니다.

삭제를 누르게 되면 메인으로 돌아갈지 묻게 되는데 확인을 클릭하면 메인으로 돌아가게 됩니다.

삭제가 되는것을 볼수가 있습니다.

profile
실수
컴린이
이전 포스트

Spring Boot 로 웹 서비스 출시하기 -3. 게시판 구현하기 (JPA + RestAPI + Oracle)

0개의 댓글