[코스파] 스프링 기초 4주차-4

상품 검색 기능 만들기

1.   검색어를 요청할 때 만들어 논 Search API 에 가서 검색을 요청하고 결과를 반환

2.   받아온 데이터를 HTML 로 만들어야 함

     Ø  execSearch, addHTML 함수 만들기

    검색창 입력값 가져오기

    입력값을 검사하고, 입력값이 없을 경우 focus

    GET /api/search?query=${query} 요청

    for 문으로 itemDto 를 꺼내서 HTML 만들고 검색결과를 목록에 붙이기

    addHTML 완성하기

             

검색결과 전체를 담고있는 div id = searc-result-box 여기에 add HTML 후 업로드 할 곳

 

execSearch, : in basic.js

function execSearch() {
    /**
     * 검색어 input id: query
     * 검색결과 목록: #search-result-box
     * 검색결과 HTML 만드는 함수: addHTML
     */
    // 1. 검색창의 입력값을 가져온다.
    let query = $('#query').val();
    // 2. 검색창 입력값을 검사하고, 입력하지 않았을 경우 focus.
    if (query ==''){
        alert("검색어를 입력해주세요.")
        $('#query').focus();
    }
    // 3. GET /api/search?query=${query} 요청
    $.ajax({
        type: 'GET',
        url: `/api/search?query= ${query}`, // 백틱을 사용하지 않을 경우 뒤에 query 가 변수가 아닌 검색어가 되어 벌임
        // 문자열 내 변수값을 넣고 싶을 때는 백틱을 사용하고 $와 중괄호로 감싸기
        success:function (response){
         // 4. for 문마다 itemDto를 꺼내서 HTML 만들고 검색결과 목록에 붙이기!
            for (let i=0; i< response.length;i++){
                let itemDto = response[i];
                let tempHtml = addHTML(itemDto);
                $('#search-result-box').append(tempHtml);
            }
        }
    })
}

 

addHTML in basic.js

function addHTML(itemDto) {
    /**
     * class="search-itemDto" 인 녀석에서
     * image, title, lprice, addProduct 활용하기
     * 참고) onclick='addProduct(${JSON.stringify(itemDto)})'
     */
    return `<div class="search-itemDto">
            <div class="search-itemDto-left">
                <img src="${itemDto.image}" alt="">
            </div>
            <div class="search-itemDto-center">
                <div>${itemDto.title}</div>
                <div class="price">
                   ${numberWithCommas(itemDto.lprice)}
                    <span class="unit">원</span>
                </div>
            </div>
            <div class="search-itemDto-right">
                <img src="images/icon-save.png" alt="" onclick='addProduct(${JSON.stringify(itemDto)})'>
            </div>
        </div>`
}

Ø  addProduct 함수 실행될 때 넣어줘야 할 파라미터  = itemDto

Ø  itemDto 형태는 JSON, but 괄호 안에는 문자열을 넣어줘야 하므로 stirng 형태로 변환!

Ø  addProduct ( ${JSON.stirngify(itemDtol)} ) : 형태로 넣어줘야 한다!

 

관심상품 등록하기

: 저장 버튼을 누를 경우 관심상품에 등록이 되는 기능 = addProduct

1.  관심 상품 생성 요청

파라미터로 상품 정보를 받은 addProduct 는 관심상품 생성요청을 보내야 한다

Ø  contentType: "application/json"

파라미터로 받을 때 문자열이 json 형태면 자바스크립트가 자동적으로 json 으로 바꿔버림  따라서 다시 전달할 떄는 json.stringify 를 이용해야 함

저장하기 버튼에 응답값이 들어온 것을 볼 수 있음  [ 날짜 (cA, mA),  이미지 ,  링크 ,  아이디  ]

 

2. modal 뜨게 하기

modal 이란? 뒤에가 흐리게 나오고 팝업이 뜨는 명령

$('#container').addClass('active');

3. targetId = response.id

최근에 설정된 관심상품의 가격을 기억하고, 그 값을 가지고 가격을 업데이트! 하는데 사용

targetId = response.id;

Ø  js 전체에서 동작할 수 있도록 맨 처음에 let 해야 함

관심 상품 보여주기

product 의 목록을 불러와서 HTML 로 보여주기

showProduct : GET 방식으로 API product 요청해서 관심목록을 불러오는 것

Ø  $(document).ready 내에 작성 : 페이지가 모두 로드 된 후 실행할 자바스크립트를 넣는 곳, 접속하면 보여줘야 하므로 showProduct 를 호출

function showProduct() {
    /**
     * 관심상품 목록: #product-container
     * 검색결과 목록: #search-result-box
     * 관심상품 HTML 만드는 함수: addProductItem
     */
    // 1. GET /api/products 요청
    $.ajax({
        type : 'GET',
        url : '/api/products',
        success : function (response) {
            // 2. 관심상품 목록, 검색결과 목록 비우기
            $('#product-container').empty();
            $('#search-result-box').empty();
            // 3. for 문마다 관심 상품 HTML 만들어서 관심상품 목록에 붙이기!
            for (let i=0; i<response.length;i++){
                let product = response[i];
                let tempHtml = addProductItem(product);
                $('#product-container').append(tempHtml);
            }
        }
    })
}

 

addProductItem : addHTML 과 동일, 주어진 정보를 바탕으로 HTML 태그를 만들어 반환하는 것

function addProductItem(product) {
    // 백틱 내부에 있는 건 index.html 에서 가져옴
    // link, image, title, lprice, myprice 변수 활용하기
    return `<div class="product-card" onclick="window.location.href='${product.link}'">
            <div class="card-header">
                <img src="${product.image}"  
                     alt="">
            </div>
            <div class="card-body">
                <div class="title">
                    ${product.title}
                </div>
                <div class="lprice">
                    <span>${numberWithCommas(product.lprice)}</span>원
                </div>
                <div class="isgood ${product.lprice > product.myprice ? 'none' : ''}">
                    최저가
                </div>
            </div>
        </div>`;
}

Ø  사망연산자?

만약 프로덕트에 lp 와 mp 를 비교해서 mp >= lp : 반환x 하지만 반대라면, lp가 더 크면 none 을 반환한다.  mp 와 lp 를 비교해서 보여줄 수 없을 때는 none

 

스케줄러 만들기

관심상품 목록을 하루에 한번 자동으로 최저가(DB 정보)를 업데이트 하는 기능

src > main > com.sparta.week04 > utils               Scheduler.java 생성

public class Scheduler {

    private final ProductRepository productRepository;
    private final ProductService productService;
    private final NaverShopSearch naverShopSearch;

    // 초, 분, 시, 일, 월, 주 순서
    @Scheduled(cron = "0 0 1 * * *")    //cron :정한 시간에 일치할 때 실행
    // *: 상관없음, 위 내용은 매일 am 1시 0분 0초에 실행한다
    public void updatePrice() throws InterruptedException { // throws 뒤는 오류 발생 시
        System.out.println("가격 업데이트 실행");
        // 저장된 모든 관심상품을 조회합니다.
        List<Product> productList = productRepository.findAll();
        for (int i=0; i<productList.size(); i++) {
            // 1초에 한 상품 씩 조회합니다 (Naver 제한)
            TimeUnit.SECONDS.sleep(1);

            // i 번째 관심 상품을 꺼냅니다.
            Product p = productList.get(i);

            // i 번째 관심 상품의 제목으로 검색을 실행합니다.
            String title = p.getTitle();
            String resultString = naverShopSearch.search(title);

            // i 번째 관심 상품의 검색 결과 목록 중에서 첫 번째 결과를 꺼냅니다.
            List<ItemDto> itemDtoList = naverShopSearch.fromJSONtoItems(resultString);
            ItemDto itemDto = itemDtoList.get(0);

            // i 번째 관심 상품 정보를 업데이트합니다.
            Long id = p.getId();
            productService.updateBySearch(id, itemDto);
        }
    }
}

Ø  updateBySeach 메소드 필요

                

ProductService.java 내부에 아래 코드 추가 (updateBySearch)

@Transactional
public Long updateBySearch(Long id, ItemDto itemDto) {
    productRepository.findById(id).orElseThrow(
            () -> new IllegalArgumentException("아이디가 없습니다.")
    );
    product.updateByItemDto(itemDto);
    return id;
}

Product.java 내부에 아래 updateByItemDto 추가

public void updateByItemDto(ItemDto itemDto){
    this.lprice = itemDto.getLprice();
}

 

Week04Application.java 에 맨 윗줄에 아래 내용 추가

@EnableScheduling // 스프링 부트에서 스케줄러가 작동하게 합니다.

Ø  스케줄러가 작동하기 위한 권한 획득 하게 해주는 어노테이션