[웹개발 - DIOS] 랜덤으로 상품 추천하기

☑︎ 랜덤으로 상품을 추천하는 기능

• 쇼핑몰 상품 목록 페이지

추천 상품은 한 번에 8개씩이다. 4개의 추천 상품이 랜덤으로 뜬 다음 1.5 초 뒤에 다른 4개의 상품이 뜬다.

새로고침하면 다른 8개의 상품이 같은 방식으로 뜬다.

 

 

 

- Mapper, xml

int[] selectIndex();

<select id="selectIndex"
        resultType="int">
    SELECT `index` AS `index`
    FROM `dios_store`.`items`
</select>

items table 에는 DIOS 쇼핑몰에 존재하는 모든 상품의 정보가 담겨있다. items table 의 index 를 모두 select 하여 배열에 담아준다. 

 

- Service

public int[] getIndex() {
    return this.goodsMapper.selectIndex();
}

- Controller

Random random = new Random();

int[] items = this.goodsService.getIndex();

int num1 = items[random.nextInt(items.length)];
int num2 = items[random.nextInt(items.length)];
int num3 = items[random.nextInt(items.length)];
int num4 = items[random.nextInt(items.length)];
int num5 = items[random.nextInt(items.length)];
int num6 = items[random.nextInt(items.length)];
int num7 = items[random.nextInt(items.length)];
int num8 = items[random.nextInt(items.length)];
modelAndView.addObject("random1", num1);
modelAndView.addObject("random2", num2);
modelAndView.addObject("random3", num3);
modelAndView.addObject("random4", num4);
modelAndView.addObject("random5", num5);
modelAndView.addObject("random6", num6);
modelAndView.addObject("random7", num7);
modelAndView.addObject("random8", num8);

✔️ Random

: Java 에서 난수를 생성하는 방법

 

Random random = new Random();   // 랜덤 객체 생성

int num = random.nextInt(100)    // 0 ~ 99 의 랜덤 숫자

 

random.nextInt() 안에 items.length 를 넣어준다. 괄호 안에 100을 넣어주면 0 ~ 99 범위의 숫자가 들어간다. 그러므로 items 배열의 length(상품의 개수)를 넣으면 0 ~ item.length -1 의 범위를 뽑을 수 있다. 배열의 index 는 0 부터 시작하기 때문에 딱 맞다. 

상품의 랜덤 index(items table 의 index)를 뽑아내려면 "items[랜덤 숫자]"를 뽑아야 한다. num1 부터 num8 까지 8개의 변수를 만든 다음, 각각 items[랜덤 숫자] 를 담아둔다. 그걸 HTML 에서 다루기 위해 modelAndView 에 담는다.

 

 

- Controller

@GetMapping(value = "titleImage") 
public ResponseEntity<byte[]> getTitleImage(@RequestParam(value = "index") int index) {
    ItemEntity image = this.goodsService.getItemTitleImage(index);
    if (image == null) {
        return new ResponseEntity<>(HttpStatus.NOT_FOUND);
    }
    HttpHeaders headers = new HttpHeaders();
    headers.setContentLength(image.getTitleImageData().length);
    headers.add("Content-Type", image.getTitleImageMime()); 
  
    return new ResponseEntity<>(image.getTitleImageData(), headers, HttpStatus.OK);
}

이 코드는 이미지를 출력하는 코드인데 @RequestParam 으로 int 타입의 index 값을 요구한다. 여기에 상품의 index 가 들어가야 한다. 

 

- HTML

<a class="ic slide1" th:href="@{'/goods/read?gid=' + ${random1}}">
    <img class="img" alt="side-img" th:src="@{'/goods/titleImage?index=' + ${random1}}">
</a>

img 태그에 들어간 th:src="@{'/goods/titleImage?index=' + ${random1}}" 에 따라 '=' 뒤에 상품의 index 를 넣으면 그에 해당하는 상품의 사진이 출력된다. 이 자리에 Controller 에서 뽑은 랜덤 숫자가 들어갔기 때문에 상품의 사진이 랜덤으로 출력 될 것이다.

- Controller

public ModelAndView getRead(@RequestParam(value = "gid") int gid)

img 태그를 감싸고 있는 a 태그에 th:href="@{'/goods/read?gid=' + ${random1}}" 을 작성해줘서 랜덤으로 생성된 상품의 사진을 눌렀을 때는 그 상품의 상세페이지로 들어가게 했다. 상품의 상세 페이지를 보여주는 getRead 클래스도 @RequestParam 으로 int 타입의 gid 를 요구하는데 이 자리에도 상품의 index 가 들어간다. 만들어 준 랜덤 숫자를 담은 변수를 위와 똑같이 넣어주면 되는 것이다. 

 

새로고침하면 랜덤 숫자 모두가 바뀌게 되어 새로고침을 할 때 마다 다른 상품이 뜬다.

 

 

 

• 홈페이지

마찬가지로 홈 페이지에도 적용해 주었다. 새로 고침을 할 때 마다 광고되는 상품이 바뀐다.

마우스를 올리면 '상품 보러가기' 글이 보이고, 누르면 해당 상품으로 넘어간다.