[MyBatis]_동적 쿼리_foreach문_feat(List<Map>데이터)

[MyBatis]_동적 쿼리_foreach문_feat(List<Map>데이터)

2022. 10. 19. 15:03ㆍ[DB]/Mybatis

728x90

사용환경]

DB : oracle

FrameWork : Spring, mybatis

목표]

클라이언트에서 한가지 key 와 value 로 이루어진 json 데이터 뿐 만 아니라

파라미터에 List<Map> 데이터가 담긴 경우 여러 API 를 발송하는 것이 아니라 한번에 수정하도록 구현

사용함수&방법]

화면]

문법]

MyBatis foreach

collection : 파라미터로 전달받은 인자, list 혹은 Array 형태만 가능

item : 전달받은 인자를 대신할 값

open : 구문이 시작될때 삽입할 문자열

close : 구문이 종료될때 삽입할 문자열

separator : 반복 되는 사이에 출력할 문자열

index : 반복되는 구문 번호이다. 0부터 순서대로 증가

iBatis

property : 파라미터

prepend : 해당 구문 시작전 사용될 쿼리문구 ex) AND. OR 등..

open : 구문이 시작될때 삽입할 문자열

close : 구문이 종료될때 삽입할 문자열

conjunction : 반복되는 사이에 출력할 문자열

소스코드

Front

HTML]

<table border="1" class="board">
    <thead>
    <tr>
        <th>회원 아이디</th>
        <th>회원 비밀번호</th>
        <th>중복확인</th>
        <th>바꾸실 이름</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th><input id="autoCompleteInput" class="input_id"/></th>
        <th><input id="user_pw" class="input_pw"/></th>
        <th>
            <button class="auth_check_btn">존재여부</button>
            <input type="hidden" class="auth_check_yn" value="N"/>
        </th>
        <th><input id="user_id" class="input_name"/></th>
    </tr>
    <tr>
        <th><input  class="input_id"/></th>
        <th><input  class="input_pw"/></th>
        <th>
            <button class="auth_check_btn">존재여부</button>
            <input type="hidden" class="auth_check_yn" value="N"/>
        </th>
        <th><input  class="input_name"/></th>
    </tr>
    </tbody>
    <!-- forEach 문은 리스트 객체 타입을 꺼낼때 많이 활용된다. -->
</table>
<br>
<button id="check_btn">테스트</button>
<button id="reset_btn">초기화</button>

Script]

<script type="text/javascript">

    $(document).ready(function () {

        let container = document.querySelector(".menu2_tab");

        let auto_input =  container.querySelector("#autoCompleteInput");
        let user_pw = container.querySelector("#user_pw");

        let check_btn = container.querySelector("#check_btn");
        let reset_btn = container.querySelector("#reset_btn");


        let input_name = container.querySelectorAll(".input_name");
        let input_pw = container.querySelectorAll(".input_pw");
        let input_id = container.querySelectorAll(".input_id");

        let check_user_btn = container.querySelectorAll(".auth_check_btn");
        let auth_check_yn = container.querySelectorAll(".auth_check_yn");



        $("#autoCompleteInput",container).autocomplete({
            source: function(request,response){
                $.ajax({
                    url: 'member/memberAutoComplete.do',
                    type : "POST",
                    contentType : "application/json",
                    data : JSON.stringify({VALUE : request.term}),
                    success : function (responseData){
                        response(
                            $.map(responseData , function(item){
                                return{
                                    value : item.MEMBERID,
                                    label : item.MEMBERID
                                }
                            })
                        )
                    },
                    error: function(){

                    }
                });
            },
            create : function(event , ui){
                $(this).data('ui-autocomplete')._renderItem = function(ul,item){
                    /*ul.addClass('auto-search__list');*/
                    let label = item.label.replace($("#autoCompleteInput",container).val(),'');
                    let element = $('<div><mark>'+$("#autoCompleteInput",container).val()+'</mark>'+ label +'</div>');
                    return $('<li></li>').append(element).appendTo(ul);
                }
            },
            focus: function(event,ui){
                return false;
            },
            minLength: 1,
            autoFocus : true,
            delay : 300,
            classes : {
                'ui-autocomplete': 'highlight'
            },
            /*appendTo : 해당 옵션 body에 만들지 container 와 같은 탭 영역에 생성해서 생명주기 조절 가능*/
            select: function(evt,ui){
                // 선택시 이벤트 부여 가능
            }

        });



        //중복확인 check event
        for(let i = 0 ; i < check_user_btn.length ; i++){

            $(check_user_btn[i]).on('click',async function(){
                console.log(this);

                if(!(input_id[i].value) || !(input_pw[i].value)){
                    alert('아이디와 비밀번호를 입력해 주세요');
                    return;
                }


                let data = {
                    user_id : input_id[i].value,
                    user_pw : input_pw[i].value
                }

                let sendReuslt = await $.ajax({
                    url: 'member/checkMemeber.do',
                    type : "POST",
                    contentType : "application/json",
                    data : JSON.stringify(data),
                    success : function (responseData){

                    },
                    error: function(){

                    }
                });



                if(sendReuslt === 0 ) {
                    auth_check_yn[i].value = 'N';
                    alert('존재하지 않는 회원입니다. 아이디와 비밀번호를 확인해주세요')
                    return;
                }

                alert('존재하는 아이디 입니다.');
                auth_check_yn[i].value = 'Y';


            })
        }


        check_btn.onclick = async function(){


            for(let idx in auth_check_yn){

                if(auth_check_yn[idx].value == 'N'){
                    let cnt = Number(idx) + 1;
                    alert(cnt+" 번 라인 아이디 존재여부 확인을 먼저 해주세요");
                    return;
                }
            }



            for(let idx in input_name){
                if(input_name[idx].value == ''){
                    let cnt = Number(idx) + 1;
                    alert(cnt+" 번째 변경할 이름을 넣어주세요. 빈값은 넣을 수 없습니다.");
                    return;
                }
            }


            let sendArray = [];
            for(let i = 0 ; i < input_id.length ; i++){

                let data = {
                    user_id : input_id[i].value,
                    user_pw : input_pw[i].value,
                    user_name :input_name[i].value
                }

                sendArray.push(data);

            }



            let sendReuslt = await $.ajax({
                url: 'member/ArrayListSample.do',
                type : "POST",
                contentType : "application/json",
                data : JSON.stringify(sendArray),
                success : function (responseData){
                    clearInputBox();
                    alert('회원정보 수정이 완료되었습니다.');


                },
                error: function(){

                }
            });




        }

        reset_btn.onclick = function(){
            clearInputBox();
        }



        function clearInputBox(){

            for(let i = 0; i < input_name.length; i++){
                input_name[i].value = '';
                input_pw[i].value = '';
                input_id[i].value = '';
                auth_check_yn[i].value = 'N';

            }

        }






    });




    /*function fn_boardRegi(){
        let title = $("#subject").val();

        let content = $("#writecontent").val();
        let $globalStorage = $commons.storage.g_variable;
        let writer = $globalStorage.getValue("loginUser");
        let date = $commons.util.date();

        fetch("/board/register.do",{
            method: 'POST',
            headers: {
                'content-type' : 'application/json'
            },
            body: JSON.stringify({
                title: title,
                content : content,
                writer : writer,
                regdate: date,
                viewcnt : 0
            })
        }).then(res => res.json())
        .then(data => {
            console.log(data);
        })

    };*/
</script>

autocomplete 는 다음 포스트 참고

https://yn971106.tistory.com/150

[Autocomplete]_jQuery UI 사용법, 예제

환경 Tool: Intellij Framework : Spring Language : ES6,JQuery DB : ORACLE 목적 input 태그에 자동완성 기능 구현 데이터는 ORACLE DB 의 값 조회 AutoComplete 에 커스텀 Class 적용방법 사용 라이브러리 UI-J..

yn971106.tistory.com

Controller

@RequestMapping("member/ArrayListSample.do")
@ResponseBody
public int ArrayListSample(@RequestBody List<Map<String,String>> mapList) throws Exception{

    System.out.println("ArrayListSample 실행");
    System.out.println(mapList);

    for(int i = 0 ; i > mapList.size(); i++){

        System.out.println(mapList.get(i));

    }

    ModelAndView mav = new ModelAndView();

    int resultList = memberservice.ArrayListSample(mapList);


    mav.addObject("output",resultList);

    return resultList;

}

//list value sample
@RequestMapping("member/checkMemeber.do")
@ResponseBody
public int checkMemeber(@RequestBody Map<String,String> mapData) throws Exception{

    System.out.println("checkMemeber 실행");
    System.out.println(mapData);

    ModelAndView mav = new ModelAndView();

    int resultCnt = memberservice.checkMemeber(mapData);


    mav.addObject("output",resultCnt);

    return resultCnt;

}

service

public int ArrayListSample(List<Map<String,String>> mapList) throws SQLException, Exception;

public int checkMemeber(Map<String,String> mapData) throws SQLException, Exception;

serviceImpl

@Override
public int ArrayListSample(List<Map<String,String>> mapList) throws Exception {
    return membermapper.ArrayListSample(mapList);
}


@Override
public int checkMemeber(Map<String,String> mapData)throws Exception {
    return membermapper.checkMemeber(mapData);
}

Mapper

public int ArrayListSample(List<Map<String,String>> mapList);

public int checkMemeber(Map<String,String> mapData);

xml

<update id="ArrayListSample">

    BEGIN
    <foreach collection="list" item="target" separator=";">
        update
        book_member
        set USER_NAME = #{target.user_name}
        where  MEMBERID = #{target.user_id}
        AND MEMBERPW = #{target.user_pw}
    </foreach>
    ;
    END;

</update>

<select id="checkMemeber" resultType="int">

    SELECT
        count(*)
    FROM BOOK_MEMBER
    WHERE MEMBERID = #{user_id} and MEMBERPW = #{user_pw}

</select>

설명]

<update id="ArrayListSample">

    BEGIN
    <foreach collection="list" item="target" separator=";">
        update
        book_member
        set USER_NAME = #{target.user_name}
        where  MEMBERID = #{target.user_id}
        AND MEMBERPW = #{target.user_pw}
    </foreach>
    ;
    END;

</update>

BEGIN END 문을 사용하여 한번에 전달받은 리스트의 크기만큼 update 순회

collection : list 구조의 데이터를 받기 때문에 list 설정

item : 명시하기 쉽게 target 으로 지정

separator : 한번 순회 후 사이에 넣을 값인 ; 로 하나의 쿼리를 실행시키기 위해 세미콜론 기입

+@ IBatis 문법 작성시

<update id="ArrayListSample">

    BEGIN
    <iterate conjunction=";">
        update
        book_member
        set USER_NAME = #[].user_name#
        where  MEMBERID = #[].user_id#
        AND MEMBERPW = #[].user_pw#
    </iterate>
    ;
    END;

</update>

로 작성할수 있겠습니다.

감사합니다.