코딩기록 저장소 🐕/기능구현연습

11/2 첨부형게시판 ② 🐱

kimkongmom 2023. 11. 2. 08:48

 

 

 

 

 

 

🐱 mapper.xml

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?xml version="1.0" encoding="UTF-8"?>
 
<mapper namespace="com.gdu.myhome.dao.UploadMapper">
 
  <!-- UploadDto에는 UserDto가 포함되어 있으므로 resultMap을 만들어서 UploadDto의 설명 -->
  <resultMap type="UploadDto" id="UploadMap">
    <id column="UPLOAD_NO" property="uploadNo" />
    <result column="TITLE" property="title" />
    <result column="CONTENTS" property="contents" />
    <result column="CREATED_AT" property="createdAt" />
    <result column="MODIFIED_AT" property="modifiedAt" />
    <result javaType="int" property="attachCount" />
    <association property="userDto" javaType="UserDto">
        <id column="USER_NO" property="userNo" />
        <result column="EMAIL" property="email" />
        <result column="PW" property="pw" />
        <result column="NAME" property="name" />
        <result column="GENDER" property="gender" />
        <result column="MOBILE" property="mobile" />
        <result column="POSTCODE" property="postcode" />
        <result column="ROAD_ADDRESS" property="roadAddress" />
        <result column="JIBUN_ADDRESS" property="jibunAddress" />
        <result column="DETAIL_ADDRESS" property="detailAddress" />
        <result column="AGREE" property="agree" />
        <result column="STATE" property="state" />
        <result column="PW_MODIFIED_AT" property="pwModifiedAt" />
        <result column="JOINED_AT" property="joinedAt" />
    </association>
  </resultMap>
  
  
  <select id="getUploadCount" resultType="int">
    SELECT COUNT(*)
      FROM UPLOAD_T
  </select>
  
  <select id="getUploadList" parameterType="Map" resultMap="UploadMap">
   SELECT A.UPLOAD_NO, A.TITLE, A.CONTENTS, A.CREATED_AT, A.MODIFIED_AT, A.ATTACH_COUNT, A.USER_NO, A.EMAIL, A.NAME
     FROM (SELECT ROW_NUMBER() OVER(ORDER BY UPLOAD_NO DESC) AS RN,
             UP.UPLOAD_NO, UP.TITLE, UP.CONTENTS, UP.CREATED_AT, UP.MODIFIED_AT, 
             (SELECT COUNT(*) FROM ATTACH_T ATC WHERE UP.UPLOAD_NO = ATC.UPLOAD_NO) AS ATTACH_COUNT, 
              USR.USER_NO, USR.EMAIL, USR.NAME
             FROM UPLOAD_T UP LEFT OUTER JOIN USER_T USR
               ON UP.USER_NO = USR.USER_NO) A
    WHERE  A.RN BETWEEN #{begin} AND #{end}
  </select>
  
 
  
</mapper>
cs

 

 

 

🐱 mapper interface

 

1
2
3
4
5
6
7
8
package com.gdu.myhome.dao;
 
@Mapper
public interface UploadMapper {
  public int getUploadCount();
  public List<UploadDto> getUploadList(Map<String, Object> map);
}
 
cs

 

 

 

🐱 UploadService

 

1
2
3
4
5
package com.gdu.myhome.service;
 
public interface UploadService {
  public Map<String, Object> getUploadList(HttpServletRequest request);
}
cs

 

 

 

🐱 UploadServiceImpl

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package com.gdu.myhome.service;
 
@Transactional
@RequiredArgsConstructor
@Service
public class UploadServiceImpl implements UploadService {
 
  private final UploadMapper uploadMapper;
  private final MyFileUtils myFileUtils;
  private final MyPageUtils myPageUtils;
    
  @Override
  public Map<String, Object> getUploadList(HttpServletRequest request) {
  
    Optional<String> opt = Optional.ofNullable(request.getParameter("page"));
    int page = Integer.parseInt(opt.orElse("1"));
    int total = uploadMapper.getUploadCount();
    int display = 9;
    
    myPageUtils.setPaging(page, total, display);
    
    Map<String, Object> map = Map.of("begin", myPageUtils.getBegin()
                                   , "end", myPageUtils.getEnd());
    
    List<UploadDto> uploadList = uploadMapper.getUploadList(map);
    
    return Map.of("uploadList", uploadList
                , "totalPage", myPageUtils.getTotalPage());
  }
  
cs

 

 

 

🐱 UploadController

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.gdu.myhome.controller;
 
@RequestMapping("/upload")
@RequiredArgsConstructor
@Controller
public class UploadController {
 
  private final UploadService uploadService;
 
  @ResponseBody
  @GetMapping(value="/getList.do", produces="application/json")
  public Map<String, Object> getList(HttpServletRequest request){
    return uploadService.getUploadList(request);
  }
  
}
cs

 

 

 

 

🐱 jsp

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<c:set var="dt" value="<%=System.currentTimeMillis()%>" />
 
<jsp:include page="../layout/header.jsp">
  <jsp:param value="업로드게시판" name="title"/>
</jsp:include>
<style>
  div {
   box-sizing: border-box;
  }
  .upload_list {
   width: 1000px;
   margin: 10px auto;
   display: flex;
   flex-wrap: wrap;   
  }
  .upload {
   width: 300px;
   height: 300px;
   border: 1px solid gray;
   text-align: center;
   padding-top: 100px;
   margin: 20px 10px; 
  }
  .upload:hover {
    background-color: silver;
    cursor: pointer;
  }
</style>
 
<div>
 
  <div>
    <a href="${contextPath}/upload/write.form">
      <button type="button" class="btn btn-primary">새글작성</button>
    </a>
  </div>
  
  <div id="upload_list" class="upload_list"></div>
 
</div>
 
<script>
 
  // 전역 변수
  var page = 1;
  var totalPage = 0;
 
  const fnGetUploadList = () => {
    $.ajax({
      // 요청
      type: 'get',
      url: '${contextPath}/upload/getList.do',
      data: 'page=' + page,
      // 응답
      dataType: 'json',
      success: (resData) => {
        totalPage = resData.totalPage;
        //$('#upload_list').empty();
        $.each(resData.uploadList, (i, upload) => {
          let str = '<div class="upload">';
          str += '<div>' + upload.title + '</div>';
          str += '<div>' + upload.userDto.name + '</div>';
          str += '<div>' + upload.createdAt + '</div>';
          str += '<div>' + upload.attachCount + '</div>';
          str += '</div>';
          $('#upload_list').append(str);
        })
      }
    })
    
  }
  
  const fnScroll = () => {
      
    var timerId;  // 최초 undefined 상태
      
    $(window).on('scroll', () => {
        
        if(timerId){  // timerId가 undefined이면 false로 인식, timerId가 값을 가지면 true
          clearTimeout(timerId);
        }
        timerId = setTimeout(() => { 
          let scrollTop = $(window).scrollTop();
          let windowHeight = $(window).height();
          let documentHeight = $(document).height();
          
          if(scrollTop + windowHeight + 100 >= documentHeight){
            if(page > totalPage){
             return;
            }
            page++;
            fnGetUploadList();
          }
        }, 200);
    })  
  }
 
  const fnAddResult = () => {
      let addResult = '${addResult}';  // '', 'true', 'false'
      if(addResult !== ''){
          if(addResult === 'true'){
              alert('성공적으로 업로드 되었습니다.');
              $('#upload_list').empty();
              fnGetUploadList();
          } else {
              alert('업로드가 실패하였습니다.');
          }
      }
  }
  fnScroll();
  fnGetUploadList();
  fnAddResult();
 
</script>
 
<%@ include file="../layout/footer.jsp" %>
cs