학원 수업 48일차 221028

• 9-10

고객센터페이지 디자인

 

 

• 10-11

타임리프 주석 <!--/*     */>
<!-- <dd class="answer">[[${dto.answer}]]</dd> -->
타임리프 주석을 정확히 써주지 않으면 주석처리 해도 [[ ]] 안까지 읽어버림

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining
Advanced inlined evaluation and JavaScript serialization
(/springWeb05-design/src/main/resources/templates/customer/front.html)

	<script th:inline="javascript">
		var pageNo;
		var division;
		 $(function(){
			 pageNo=(/*[[${param.page}]]*/null)?? 1 ;
			 division=(/*[[${param.division}]]*/null)?? "use" ;
			 var pLength=(/*[[${pData.pLength}]]*/null)?? 5;
			 var menuList=$(".cus-menu ul>li");
			 for(var target of menuList){
				 if($(target).attr("value")==division){
					 $(target).addClass("target");
				 }
			 }
			 //var pageNo=/*[[${param.page}]]*/"";
			 //if(pageNo==null||pageNo=="") pageNo=1;
			 //console.log("pageNo = "+pageNo);
			 var pageList = $(".page-list>li");
			 pageList.eq((pageNo-1) % pLength ).addClass("select");
			 
			 $(".cus-list ul>li").click(listClicked);
			 $(".cus-menu ul>li").click(menuClicked);
		 });
	</script>

 

cdata주석
https://dreamaz.tistory.com/32
- CDATA로 감싼 javascript 부분이 의도치않게 XML Parser에 의해 잘못 인식되는 것을 막기 위해
- XHTML이 아닌 HTML로 인식되는 경우에도 javascript가 문제 없이 동작하도록 하기 위해

JavaScript Strings
https://www.w3schools.com/js/js_strings.asp

js 삼항연산자 null
https://kbseok.tistory.com/entry/Javascript-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EC%97%B0%EC%82%B0%EC%9E%90-a-null-b-c

jQuery first() Method
https://www.w3schools.com/jquery/traversing_first.asp

 

 

• 11-12

(/springWeb05-design/src/main/resources/templates/customer/front.html)
리스트 번호 누르면 색깔 들어가게 구현할게요
jQuery :eq() Selector
https://www.w3schools.com/jquery/sel_eq.asp

	var pageList = $(".page-list>li");
	pageList.eq((pageNo-1) % pLength ).addClass("select");

.select a{
	color: #fff !important;
	background-color: rgba(107,165,67,.5); 
}

게시글 누르면 내용 나오도록 구현할게요
jQuery Effects - Sliding 슬라이드
https://www.w3schools.com/jquery/jquery_slide.asp

12factor
https://12factor.net/ko/

게시글 카테고리 division 만들어줄게요

division 메뉴가 클릭되면 각각의 리스트가 나올 수 있도록 할게요
jQuery val() Method
https://www.w3schools.com/jquery/html_val.asp
Note: The val() method is mostly used with HTML form elements.
li에 적용이 안돼서 .val을 .attr("value") 로 대체하였음
jQuery attr() Method
https://www.w3schools.com/jquery/html_attr.asp
Return the value of an attribute: $(selector).attr(attribute)

	for(var target of menuList){
		 if($(target).attr("value")==division){
			 $(target).addClass("target");
		 }
	 }

 

 

• 2-3

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#lists

<ul th:if="${#lists.isEmpty(list)}">
	<li>조회 결과가 존재하지 않습니다.</li>
</ul>

(/springWeb05-design/src/main/resources/templates/customer/front.html)

function pageNoClicked(targetNo){
     //alert(pageNo+" : "+division);
     location.href="/customers/home?division="+division+"&page="+targetNo;
 }

 

 

• 3-4

(/springWeb05-design/src/main/java/com/green/nowon/controller/CustomerController.java)
service.faqList(model, page, division); 새로 만들어서 해볼게요

@Service
public class FaqServiceProcess implements FaqService {
	
	@Autowired
	private FaqMapper faqMapper;
	
	//faq리스트 얻어오는 작업처리
	@Override
	public void list(Model model, String division, int page) {
	
		int rowTotal=faqMapper.countAllByDivision(division);
		
		int limit=10; //한 페이지에 표현할 row 개수
		int offset = limit * (page-1); //첫번째 결과부터 건너뛰는 개수
		RowBounds rowBounds = new RowBounds(offset, limit);
		//offset만큼 건너뛰고 limit개수를 읽어옴
		//리스트정보
		List<FaqDTO> result = faqMapper.findAllByDivisionAndRowBounds(division, rowBounds);
		//페이지정보
		PageDTO pageInfo = PageDTO.getInstance(page, rowTotal, limit, 8);
		model.addAttribute("list",result);
		model.addAttribute("pi",pageInfo);
	}
}

(src/main/java/com/green/nowon/domain/mapper/FaqMapper.java)

@Mapper
public interface FaqMapper {
	@Select("select count(*) from faq where division=#{division}")
	int countAllByDivision(@Param("division") String division);
}

 

 

• 4-5

//서브쿼리를 사용하지 않고 기본쿼리 적용하고 RowBounds객체만 파라미터로 삽입 

@Select("select * from faq where division=#{division}")
List<FaqDTO> findAllRowBounds(@Param("division") String division, RowBounds rowBounds);

 

 

• 5-6

한 페이지에 보여지는 글의 개수 limit
메서드에 각각 값 넣어주지 말고 한번에 컨트롤하고 싶어
(application.yml)에서 컨트롤!
#한 페이지에 보여지는 글의 개수
#Unknown property 'page' 직접 세팅 가능
mysetting:
  page:
    limit: 15
(CustomerServiceProcess.java)
@Value("${mysetting.page.limit}")
private int limit;


JMS(Java Message Service)?
apache kafka?