項目D-5


プロジェクト終了フェーズ
非同期で掲示板が作成されました.
ajaxとgetjson
非同期でロードされたリストから

データベースから地域、雰囲気、制限に合致する値を抽出します.

			//지역 페이징 처리 각자의 area li 지목.
        		const $area = document.getElementById('area');
                const $place = document.getElementById('place');
                const $restrict = document.getElementById('restrict');

                //값을 담을 변수 선언 값이 판단 될 때 마다
                var picarea ='';
                var picmood ='';
                var limit1 ='';
                var limit2 ='';
                var limit3 ='';
		
             
                	
                	//값 불러오는곳!!
		
                	
        
        	function getList(data, reset, page,limit1,limit2,limit3,area,place) {

			
        	// 값 불러오는곳!
        	
        
        		const $promboardfilter = document.querySelector('.promboard-filter');
                $promboardfilter.addEventListener('click', e => {



                    console.log('이벤트 발생');

                    if (e.target.matches('#area input[type="checkbox"]')) {
                        console.log('지역필터안에 들어옴');

                        //선택한 지역
                        picarea = e.target.parentNode.textContent;

                        if (e.target.checked) {

                            if (picarea === '서울') {
                                e.target.parentNode.style.fontSize = '20px';

                                //나머지 false 처리.
                                // console.log($area.children[1].children[0].childNodes[0]);
                                for (let $li of $area.children) {
                                    //console.log($li);
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }

                            if (picarea === '경기/인천') {
                                e.target.parentNode.style.fontSize = '20px';

                                for (let $li of $area.children) {
                                    //console.log($li);
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }

                            if (picarea === '강원') {
                                e.target.parentNode.style.fontSize = '20px';
                                for (let $li of $area.children) {
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }

                            if (picarea === '충북') {
                                e.target.parentNode.style.fontSize = '20px';
                                for (let $li of $area.children) {
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }

                            if (picarea === '충남/대전') {
                                e.target.parentNode.style.fontSize = '20px';
                                for (let $li of $area.children) {
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }

                            if (picarea === '경북/대구') {
                                e.target.parentNode.style.fontSize = '20px';
                                for (let $li of $area.children) {
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }

                            if (picarea === '경남/부산') {
                                e.target.parentNode.style.fontSize = '20px';
                                for (let $li of $area.children) {
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }

                            if (picarea === '전북') {
                                e.target.parentNode.style.fontSize = '20px';
                                for (let $li of $area.children) {
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }

                            if (picarea === '전남/광주') {
                                e.target.parentNode.style.fontSize = '20px';
                                for (let $li of $area.children) {
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }

                            if (picarea === '제주') {
                                e.target.parentNode.style.fontSize = '20px';
                                for (let $li of $area.children) {
                                    if ($li.children[0].children[0] !== e.target) {
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }

                                }
                            }




                        } else {


                            if (picarea === '서울') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                            if (picarea === '경기/인천') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                            if (picarea === '강원') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                            if (picarea === '충북') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                            if (picarea === '충남/대전') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                            if (picarea === '경북/대구') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                            if (picarea === '경남/부산') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                            if (picarea === '전북') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                            if (picarea === '전남/광주') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                            if (picarea === '제주') {
                                e.target.parentNode.style.fontSize = '14px';
                                picarea = '';
                            }

                        }





                    } else if (e.target.matches('#place input[type="checkbox"]')) {
                        console.log('분위기필터안에 들어옴');
                        
                        picmood = e.target.parentNode.textContent;

                        if (e.target.checked) {

                            if(picmood === 'Nature / Wooden'){
                                e.target.parentNode.style.fontSize = '20px';

                                for($li of $place.children){
                                    if($li.children[0].children[0] !== e.target){
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }
                                }
                            }

                            if(picmood === 'Concrete / Industrial'){
                                e.target.parentNode.style.fontSize = '20px';

                                for($li of $place.children){
                                    if($li.children[0].children[0] !== e.target){
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }
                                }
                            }

                            if(picmood === 'Morden / Neat'){
                                e.target.parentNode.style.fontSize = '20px';

                                for($li of $place.children){
                                    if($li.children[0].children[0] !== e.target){
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }
                                }
                            }

                            if(picmood === 'Retro / Vintage'){
                                e.target.parentNode.style.fontSize = '20px';

                                for($li of $place.children){
                                    if($li.children[0].children[0] !== e.target){
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }
                                }
                            }

                            if(picmood === 'Cozy / Comfort'){
                                e.target.parentNode.style.fontSize = '20px';

                                for($li of $place.children){
                                    if($li.children[0].children[0] !== e.target){
                                        $li.children[0].children[0].checked = false;
                                        $li.children[0].style.fontSize = '14px';
                                    }
                                }
                            }




                        } else {

                            if(picmood === 'Nature / Wooden'){
                                picmood = '';
                            }

                            if(picmood === 'Concrete / Industrial'){
                                picmood = '';
                            }


                            if(picmood === 'Morden / Neat'){
                                picmood = '';
                            }


                            if(picmood === 'Retro / Vintage'){
                                picmood = '';
                            }


                            if(picmood === 'Cozy / Comfort'){
                                picmood = '';
                            }


                        }

                    } else if (e.target.matches('#restrict input[type="checkbox"]')) {
                        if (e.target.checked) {
                            e.target.parentNode.style.fontSize = '20px';
                            var restrict = e.target.parentNode.textContent;

                            //boolean 타입의 변수 3개 선언. 누적해서 제한해야 하는데 어떻게 하지..

                            if (restrict === 'No Kids') {
                                limit1 = 'true';
                            }

                            if (restrict === 'No Pets') {
                                limit2 = 'true';
                            }

                            if (restrict === 'No Study') {
                                limit3 = 'true';
                            }





                        } else {
                            var restrict = e.target.parentNode.textContent;
                            if (restrict === 'No Kids') {
                                limit1 = 'false';
                                e.target.parentNode.style.fontSize = '14px';
                            }
                            if (restrict === 'No Pets') {
                                limit2 = 'false';
                                e.target.parentNode.style.fontSize = '14px';
                            }
                            if (restrict === 'No Study') {
                                limit3 = 'false';
                                e.target.parentNode.style.fontSize = '14px';
                            }


                        }



                    } else {
                        //여기서 getList 불러
                        return;
                    }

                    //전송합니다. 제한사항 , 지역, 무드
                    //limit1,limit2,limit3,picarea,plicmood
                    // getList(data,true,page,limit1,limit2,limit3,picarea,picmood);




        	console.log('제한사항 설정 함수 in : ' + '제한사항1 :'+limit1+ '제한사항2 :'+ limit2+ '제한사항3 :'+ limit3+ '장소: '+ picarea + 'mood :'+ picmood);

        			//서울이면 한번 부르고, 경기두번, 강원 3번 뭔가 이상한데?
                }); //이벤트 처리 끝.
単純に複文で値を受け入れるためにfor文を使用すると回転を続けるエラーが発生します.
jsを別々に編成する.
受信した値によってmapperがsql文を入力する方法が異なります.
動的sql文が使用されています.

	<sql id="area">
		<if test="vo.area == '서울'">AND area = '서울'</if>
		<if test="vo.area == '경기/인천'">AND area = '경기/인천'</if>
		<if test="vo.area == '강원'">AND area = '강원'</if>
		<if test="vo.area == '충북'">AND area = '충북'</if>
		<if test="vo.area == '충남/대전'">AND area = '충남/대전'</if>
		<if test="vo.area == '경북/대구'">AND area = '경북/대구'</if>
		<if test="vo.area == '경남/부산'">AND area = '경남/부산'</if>
		<if test="vo.area == '전북'">AND area = '전북'</if>
		<if test="vo.area == '전남/광주'">AND area = '전남/광주'</if>
		<if test="vo.area == '제주'">AND area = '제주'</if>
		<if test="vo.area == null or vo.area == ''">
		
		</if>
	</sql>
	
	<sql id="restrict">
	
		<if test="vo.limitation1 == 'true' and vo.limitation2 == 'true' and vo.limitation3 == 'true'">
		WHERE limitation1 = 'true' AND limitation2 = 'true' AND limitation3 = 'true'
		</if>
		<if test="vo.limitation1 == 'true' and vo.limitation2 == 'true' and vo.limitation3 == 'false'">
		WHERE limitation1 = 'true' AND limitation2 = 'true'
		</if>
		<if test="vo.limitation1 == 'true' and vo.limitation2 == 'false' and vo.limitation3 == 'false'">
		WHERE limitation1 = 'true'
		</if>
		<if test="vo.limitation1 == 'true' and vo.limitation2 == 'false' and vo.limitation3 == 'true'">
		WHERE limitation1 = 'true' AND limitation2 = 'false' AND limitation3 = 'true'
		</if>
		<if test="vo.limitation1 == 'false' and vo.limitation2 == 'true' and vo.limitation3 == 'true'">
		WHERE limitation2 = 'true' AND limitation3 = 'true'
		</if>
		<if test="vo.limitation1 == 'false' and vo.limitation2 == 'true' and vo.limitation3 == 'false'">
		WHERE limitation2 = 'true'
		</if>
		<if test="vo.limitation1 == 'false' and vo.limitation2 == 'false' and vo.limitation3 == 'true'">
		WHERE limitation1 = 'false' AND limitation2 = 'false' AND limitation3 = 'true'
		</if>
		<if test="vo.limitation1 == 'false' and vo.limitation2 == 'false' and vo.limitation3 == 'false'">
		where pr.writer = u.username
		</if>
	</sql>
	
	<sql id="mood">
		<if test="vo.place == 'Nature / Wooden'">
		AND place = 'Nature / Wooden'
		</if>
		<if test="vo.place == 'Concrete / Industrial'">
		AND place = 'Concrete / Industrial'
		</if>
		<if test="vo.place == 'Mordern / Neat'">
		AND place = 'Mordern / Neat'
		</if>
		<if test="vo.place == 'Retro / Vintage'">
		AND place = 'Retro / Vintage'
		</if>
		<if test="vo.place == 'Cozy / Comfort'">
		AND place = 'Cozy / Comfort'
		</if>
		<if test="vo.place == null or vo.place ==''">
		
		</if>
	</sql>
    
    
    <!-- 목록 -->
	<select id="getList"
		resultType="com.spring.cafealley.command.PromoBoardVO">
		SELECT * FROM
			(
			SELECT ROWNUM as rn, tbl.* FROM
				(
				SELECT pr.*,
					   u.filenum
				  FROM promoboard pr
				  LEFT JOIN users u
				    ON pr.writer = u.username
				<include refid="restrict"/>
				
				<include refid="area"/>
				
				<include refid="mood"/>
				
				ORDER BY pr.bno DESC
				) tbl
			)
		<![CDATA[
		WHERE rn > (#{page.pageNum} - 1) * #{page.countPerPage}
		AND rn <= #{page.pageNum} * #{page.countPerPage}
		]]>
	</select>
	
SQL Developer実行時に正常に値を取得します.任意の値を入れる
getJsonのurl:
'<c:url value="/promo/getList?pageNum=" />' + page +"&limitation1="+
						limit1 +"&limitation2="+limit2+"&limitation3="+limit3+
						"&area="+area+"&place="+place,
せいぎょそうち
	//비동기 통신 후 가져올 목록
	@GetMapping("/getList")
	@ResponseBody
	public List<PromoBoardVO> getList(PageVO paging, PromoBoardVO vo) {
		System.out.println("글 목록 요청 들어옴.");
		System.out.println("요청 페이지 번호: " + paging.getPageNum());
		paging.setCountPerPage(5);
		
		System.out.println("제한사항이 포함된 vo :" + vo);
		
		//제한사항을 command 객체로 받는다.
		
		List<PromoBoardVO> list = boardService.getList(paging,vo);
//		for(PromoBoardVO vo : list) {
//			ImgVO ivo = imgService.select(vo.getKey());
//			if(ivo.getFilename3() == null) {
//				vo.setFilecnt(2);
//			} else if(ivo.getFilename2() == null) {
//				vo.setFilecnt(1);
//			} else {
//				vo.setFilecnt(3);
//			}
//		}
		
		
		for(PromoBoardVO pvo : list) {
			
			pvo.setLikeCnt(boardService.likeCnt(pvo.getBno()));
		}
		
		System.out.println(list);
		
		return list;
	}
条件を入力すると、ページはstr=""リセットではなく累積されるため、エラーを修正する必要があります.