프로젝트 마무리단계;
비동기방식으로 게시판을 생성했다.
ajax와 getJson
비동기 방식으로 불러온 List에서
지역, 분위기, 제한에 맞는 값을 DB에서 추출하는 작업.
//지역 페이징 처리 각자의 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 = '' 리셋되지 않고 누적해서 쌓였기 때문에 오류수정 필요.
