1. 파일분리
- css, js 파일을 분리해서 html 안에 넣기 / icon 같은 img파일은 static - images폴더 안에 넣기
<head>
<link rel="stylesheet" href="style.css"> // style.css 불러오기
<script src="basic.js"></script> // basic.js 불러오기
<title>나만의 셀렉샵</title>
</head>2. 상품 검색 기능
- 요구조건 : 1) 검색어를 입력 후 엔터를 쳤을 때 API search에 검색을 입력하고 값을 받아오기 (execSearch 함수)
2) 받아온 데이터를 html으로 만들기 (addHTML 함수)
basic.js
function execSearch() {
/**
* 검색어 input id: query
* 검색결과 목록: #search-result-box
* 검색결과 HTML 만드는 함수: addHTML
*/
// 1. 검색창의 입력값을 가져온다.
let query = $('#query').val();
// 2. 검색창 입력값을 검사하고, 입력하지 않았을 경우 focus.
if (query == '') {
alert('검색어를 입력해주세요');
$('#query').focus();
return;
}
// 3. GET /api/search?query=${query} 요청
$.ajax({
type: 'GET',
url: `/api/search?query=${query}`,
success: function (response) {
$('#search-result-box').empty();
// 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);
}
}
})
}
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>`
}
- onclick='addProduct(${JSON.stringify(itemDto)})' -> addProduct는 관심상품으로 등록하는 아이콘 클릭 시
동작하는 js. addProduct가 실행될 때 적절한 파라미터(재료)를 넘겨줘야 함 그래서
itemDto를 넘겨줘야 하는데 ${itemDto} 이런식으로 넘겨줄 수 없음 (JSON형식이라.. ${}는 문자열을 써야 함)
결론 JSON형태인 itemDto를 string으로 넘겨줘야함! - 관심 물품 등록 후 관심 물품 목록에서 물품 클릭 시 링크 연결을 하기 때문에 여기서는 링크정보는 필요없음
3. 관심 상품 등록
- 요구조건 : 저장하기 버튼을 누르면 관심 상품에 등록! (addProduct 함수)
basic.js
function addProduct(itemDto) {
/**
* data를 ajax로 전달할 때는 두 가지가 매우 중요
* 1. contentType: "application/json",
* 2. data: JSON.stringify(itemDto), 파라미터로 전달될 때 itemDto가 자동으로 JSON으로 처음에 저장되있기 때문에
*/
// 1. POST /api/products 에 관심 상품 생성 요청
$.ajax({
type: "POST",
url: '/api/products',
contentType: "application/json",
data: JSON.stringify(itemDto),
success: function (response) {
$('#container').addClass('active'); // modal 뜨게 하는 법: $('#container').addClass('active');
// 2. 응답 함수에서 modal을 뜨게 하고, targetId 를 reponse.id 로 설정 (숙제로 myprice 설정하기 위함)
targetId = response.id; // targetId js 맨위 변수선언 되어있음
}
})
}- 파라미터인 itemDto가 JSON형태로 들어오기 때문에 data에서 문자열로 다시 바꿔줘야 함
- response에 id값이 담김 -> 제일 최근에 저장된 상품이 targetId에 저장되는 형식
4. 관심 상품 조회
- 요구조건 : 1) 관심상품으로 등록한 상품 목록 불러오기 (showProduct 함수)
2) 불러온 상품 목록을 html로 반환 (addProductItem 함수)
basic.js
$(document).ready(function(){
showProduct();
})- - 페이지가 모두 로드되면 showProduct()함수 실행 -> 관심상품 목록 보여주기(첫화면)
basic.js
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);
}
}
})
}
function addProductItem(product) {
// link, image, title, lprice, myprice 변수 활용하기
return `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' : ''}">
// lprice가 더 비싸면 isgood 그대로 작동
최저가
</div>
</div>
</div>\`;`;
}- class = "isgood"은 css에서 최저가 알림버튼 디자인이고 none은 css에서 display.none;으로 설정되있음
- 최저가 부분 - 삼항연산자 사용 : 상품가격과 사용자가 입력한 관심가격을 비교해서 상품가격이 더 비싸다면
(관심가격이 최저가라면) ? none을 반환 : 입력한 가격이 더 비싸면 ''반환X - ${조건 ? True의 반환 : False의 반환}
5. 관심 상품 가격 등록
basic.js
function setMyprice() {
// myprice 값 설정하기.
// 1. id가 myprice 인 input 태그에서 값을 가져온다.
let myprice = $('#myprice').val();
// 2. 만약 값을 입력하지 않았으면 alert를 띄우고 중단한다.
if (myprice == '') {
alert('올바른 가격을 입력해주세요');
return;
}
// 3. PUT /api/products/${targetId} 에 data를 전달한다.
$.ajax({
type: "PUT",
url: `/api/products/${targetId}`, // 최근에 등록한 관심상품을 targetId로 서버에서 설정했음
contentType: "application/json",
data: JSON.stringify({myprice: myprice}), // 키 : value
success: function (response) {
// 4. 모달을 종료한다. $('#container').removeClass('active');
$('#container').removeClass('active');
// 5. 성공적으로 등록되었음을 알리는 alert를 띄운다.
alert('성공적으로 등록되었습니다.');
// 6. 창을 새로고침한다. window.location.reload();
window.location.reload();
}
})
}
'미니프로젝트' 카테고리의 다른 글
| 3. 익명의 메모장 - 화면 구축(스프링부트) (0) | 2021.04.01 |
|---|---|
| 4. 나만의 셀렉샵 - 화면 구현 (스프링 부트) (0) | 2021.03.25 |
| 2. 나만의 셀렉샵 - 프로젝트 설계 & 서버 구축 (스프링부트) (0) | 2021.03.24 |
| 1. 나만의 셀렉샵 - 자바를 통해 API 이용하기 (스프링부트) (0) | 2021.03.24 |
| 2. 익명의 메모장 - 클라이언트 구축 (스프링부트) (0) | 2021.03.21 |
댓글