Spring Boot 프로젝트 15일차[20241024]

Spring Boot 프로젝트 15일차. 스프링부트 수업을 병행하며 백단 작업을 시작하였습니다. 먼저 이전에 작성한 html, css, js파일들을 타입리프형식을으로 변경하였으며 퍼블리싱을 위해 a태그를 사용한 기능들은 모두 js에서 작동하도록 변경하였습니다. 아직 스프링부트에 대한 이해도가 낮아 기능을 어떻게 구현할지, 어떤 코드를 사용해야할지에 대해 많은 고민을 하고 있습니다. 

 

📌페이지이동 js처리

      <!-- 입양/임보/후기 게시판 바 -->
      <div class="adopt-nav">
          <div class="adopt-navList" id="adoptPage">안심입양</div>
          <div class="adopt-navList" id="protectPage">임시보호</div>
          <div class="adopt-navList" id="reviewPage">후기</div>
      </div>

{
    let adoptPageBtn = document.getElementById('adoptPage');
    adoptPageBtn.addEventListener('click', function(){
        location.href='/adopt/adopt';
    });
}

-안심입양/임시보호/후기 페이지를 각각 클릭이로 이동하기 위해 js에서 id값을 기준으로 div정보를 가져온 후 클릭했을 시  '/adopt/adopt' url로 보내주어 페이지가 열리도록 작성하였습니다.

 

 

📌게시글정보불러오기

-구현화면

-사용코드

-필요한값을 저장하기 위한 DTO 생성

@Getter @Setter @ToString
@NoArgsConstructor
public class AdoptMainDTO {
    private Long adoptNo;
    private String adoptTitle;
    private Date adoptRegidate;
    private String adoptStatus;
    private String centerMemberName;
}

 

-필요한값을 조회하기 위한 쿼리문을 Mapper.xml에 작성

    <select id="adoptMain" resultType="AdoptMainDTO">
    <![CDATA[
        SELECT a.ADOPT_NO, a.ADOPT_TITLE, a.ADOPT_REGIDATE, a.CENTER_MEMBER_NO, a.ADOPT_STATUS, c.CENTER_MEMBER_NAME
        FROM(
                SELECT ADOPT_NO, ADOPT_TITLE, ADOPT_REGIDATE, CENTER_MEMBER_NO, ADOPT_STATUS,
                       ROW_NUMBER() OVER ( ORDER BY ADOPT_REGIDATE DESC) AS row_num
                FROM TBL_ADOPT) a
                JOIN TBL_CENTER_MEMBER c ON a.CENTER_MEMBER_NO = c.CENTER_MEMBER_NO
        WHERE a.row_num < 11
        ]]>
</select>

* <,>같은 기호를 사용하기 위해 <![CDATA]]로 쿼리문을 감싸줌

 

-Mapper.interface 파일을 통해 DB와 쿼리문을 연결

@Mapper
public interface AdoptMapper {
    List<AdoptMainDTO> adoptMain();
}

 

-앞서 작성한 코드들을 실행하여 조회한 값을 DTO에 저장

@Service
@Transactional
@RequiredArgsConstructor
public class AdoptService {

    private final AdoptMapper adoptMapper;

    public List<AdoptMainDTO> getAdoptList() {
        return adoptMapper.adoptMain();
    }
}

 

-DTO에 저장된 값을 불러와 model 객체 추가하여 view(html)에 사용할 수 있도록 한 뒤 return 페이지로 이동

    //입양/임보/후기 메인페이지
    @GetMapping("/main")        //열릴페도메인 localhost:8060/adopt/main
    public String Main(Model model) {
        List<AdoptMainDTO> adoptList = adoptService.getAdoptList();
        model.addAttribute("adoptList", adoptList);
        return "adopt/adopt-main";  //localhost:8060/adopt/main로 접속했을시 열릴 html
    }