나만의 select shop 만들기 (15) 썸네일형 리스트형 등록한 관심상품 최저가 설정하기 마지막으로 관심상품 등록하기에서 마무리 못한 최저가 설정 기능을 만들어보자 관심상품 등록하기를 위한 모달까지는 띄웠지만 최저가를 설정해주는 기능이 없었다. 크롬 개발자 도구에서 해당 버튼을 확인하면 setMyprice() 기능을 구현해야 한다는걸 알 수있다. setMyprice 에서는 #myprice 에서 입력값을 받아 유효성 처리를 해주고 addProject() 에서 response.id 값을 targetId에 넣어줬으니 이걸 key값인 칼럼의 myprice에 #myprice 를 넣어줘야 한다. static > basic.js function setMyprice() { let myprice = $('#myprice').val(); // 1. id가 myprice 인 input 태그에서 값을 가져온다. .. 스케줄러 만들기 매일 새벽 1시에 관심 상품 목록 제목으로 검색해서, 최저가 정보를 업데이트 하는 스케줄러 만들기. utils > Scheduler.java @RequiredArgsConstructor // final 멤버 변수를 자동으로 생성합니다. @Component // 스프링이 필요 시 자동으로 생성하는 클래스 목록에 추가합니다. public class Scheduler { private final ProductRepository productRepository; private final ProductService productService; private final NaverShopSearch naverShopSearch; // 초, 분, 시, 일, 월, 주 순서 @Scheduled(cron = "0 0 1 *.. 관심 상품 보여주기 $(documetnt).ready 함수의 의미 페이지가 모두 로드된 직후 제일 먼저 실행할 자바스크립트 코드를 넣는 곳입니다. 즉 접속할 때, 새로고침 할 때 마다 이부분이 다시 실행된다. 일단 접속하면 관심 상품을 보여줘야 하기 때문에 맨 하단을 보면 showProduct() 함수를 실행하도록 작성하였다. 우선 이녀석을 만들어 보자 static > basic.js > showProduct() function showProduct() { /** * 관심상품 목록: #product-container * 검색결과 목록: #search-result-box * 관심상품 HTML 만드는 함수: addProductItem */ // 1. GET /api/products 요청 $.ajax({ type: 'GET', .. 관심 상품 등록하기 이번엔 상품 우측의 이 아이콘이 실행 할 관심상품 등록기능을 만들어 보자. 이전에 addHTML에서 addProduct 에 itemDto를 stringify (문자열 화) 해서 전달해 주었다. 여기서 중요한 점은 나중에 ajax를 통해서 백에 전달할 때 서버에서 스프링에 전달 할 때에도 다시 한번 JSON.stringify 를 해줘야 한다. 왜냐 하면 파라미터로 받을 때 그 문자열이 만약 json형태면 자바스크립트가 자동으로 json으로 바꿔버린다. 한번 확인해보자. static > basic.js > addProduct() function addProduct(itemDto) { /** * modal 뜨게 하는 법: $('#container').addClass('active'); * data를 ajax로.. 상품 검색 기능 만들기 이제 백에서 데이터를 받아올 수 있으니 js 파일에서 ajax를 사용해 append로 가져와보자 우선 execSearch, addHTML 함수 만들기 static > basic.js > function execSearch() function execSearch() { /** * 검색어 input id: query * 검색결과 목록: #search-result-box * 검색결과 HTML 만드는 함수: addHTML */ // 1. 검색창의 입력값을 가져온다. let query = $('#query').val(); // 2. 검색창 입력값을 검사하고, 입력하지 않았을 경우 focus. if (query == ''){ alert("검색어를 입력해주세요."); $('#query').focus(); } // 3.. HTML, Css, 이미지파일 static > index.html Select Shop 모아보기 탐색하기 Apple 아이폰 11 128GB [자급제] 919,990원 최저가 Apple 아이맥 27형 2020년형 (MXWT2KH/A) 2,289,780 원 X ⏰최저가 설정하기 최저가를 설정해두면 선택하신 상품의 최저가가 떴을 때 표시해드려요! 원 설정하기 static > basic.js let targetId; $(document).ready(function () { // id 가 query 인 녀석 위에서 엔터를 누르면 execSearch() 함수를 실행하라는 뜻입니다. $('#query').on('keypress', function (e) { if (e.key == 'Enter') { execSearch(); } }); $('#cl.. 키워드로 상품 검색하기 - 네이버 API와 서비스 연결하기 1.NaverShopSearch 컴포넌트 등록 컴포넌트 등록이란? 스프링이 필요한 클래스를 자동으로 생성하도록 권한을 주는것. 이제 검색을 main메서드가 아니라 controller에서 가져다 써야 한다. 그럼 스프링이 자동으로 필요한 클래스를 필요한 곳에 생성 해야 할 때 자동으로 생성하려는 클래스 목록이 이것들이구나 확인해야 한다. 그 목록에 등록하는것이 컴포넌트 등록! @Component //이제부터, @RequiredArgsConstructor 와 함께 사용할 경우 스프링이 자동으로 생성합니다. public class NaverShopSearch { 솰라솰라 } 2.SerchRequestController 만들기 @RequiredArgsConstructor // final 로 선언된 클래스를 자동.. 키워드로 상품 검색하기 - NaverShopSearch 발전시키기 전에 만들어 둔 NaverShopSearch 클래스를 웹서비스에 사용할 있도록 수정해보자. utils > NaverShopSearch.java public class NaverShopSearch { public String search() { RestTemplate rest = new RestTemplate(); HttpHeaders headers = new HttpHeaders(); headers.add("X-Naver-Client-Id", "mGmaVv5HUsl9XXf407tz"); headers.add("X-Naver-Client-Secret", "3mo1i3q5LN"); String body = ""; HttpEntity requestEntity = new HttpEntity(body, heade.. org.json 패키지 설치하기 우선 검색 검색하고 JSON In Java 클릭 Usages 가 가장 높은걸로 선택 내가 Grale을 사용중이니 클릭하고 내용 복사 build.gradle 에서 의존성 주입을 해주고 실행 ~ gradle에서 새로고침하면 끝! 관심 상품 등록하기 빨간 박스를 누르면 관심상품으로 가져오게 되는데 그때 필요한 정보가 제품명, 링크, 이미지, 현최저가격 (+ 클릭시 팝업으로 원하는 최저가 ) 로 기본 4가지 (입력최저가 포함 5개) 의 정보를 저장 해야한다. Dto 클래스는 2개가 필요한데 생성단계에서 필요한 기본 4가지 정보를 담은 ProductRequestDto와 내가 원하는 금액을 입력하는 ProductMypriceRequestDto를 만든다. models > ProductRequestDto.java @Getter public class ProductRequestDto { private String title; private String link; private String image; private int lprice; } models > Pr.. 이전 1 2 다음
