[Spring] 마이페이지 결제내역 불러오기 #ajax

호연지기·2023년 8월 14일
MyBatisSpringThymeleafmaven
2

Spring-Thymeleaf 웹 서비스(오짐)

목록 보기
3/3

🫥 마이페이지에서 결제내역 불러오기

  1. 사용자가 결제를 하면 결제 정보가 데이터베이스mpay테이블에 저장된다.
  2. 사용자가 마이페이지-결제내역 페이지에 들어가면 세션을 활용하여 사용자의 회원번호로 데이터를 가져온다. (내역이 없을 경우 데이터가 없다는 내용 출력)
  3. 전체, 회원권, 일일권, PT 메뉴 선택에 따라 다른 결과를 보여준다.
  4. 결제내역이 많아질 경우 페이지가 넘어가도록 페이징 처리

마이페이지의 결제내역 섹션은 위와 같은 프로세스로 작동하도록 설계하였다.

💡 1. 페이지 세팅

결제내역 메뉴 선택

<select id="sel">
  <th:block th:if="${payType == null}">
    <option value="all" selected>전체</option>
    <option value="membership">회원권</option>
    <option value="daily">일일권</option>
    <option value="pt">PT</option>
  </th:block>
  <th:block th:unless="${payType == null}">
    <th:block th:switch="${payType}">
      <th:block th:case="gpay">
        <option value="all">전체</option>
        <option value="membership" selected>회원권</option>
        <option value="daily">일일권</option>
        <option value="pt">PT</option>
      </th:block>
      <th:block th:case="dgpay">
        <option value="all">전체</option>
        <option value="membership">회원권</option>
        <option value="daily" selected>일일권</option>
        <option value="pt">PT</option>
      </th:block>
      <th:block th:case="tpay">
        <option value="all">전체</option>
        <option value="membership">회원권</option>
        <option value="daily">일일권</option>
        <option value="pt" selected>PT</option>
      </th:block>
    </th:block>
  </th:block>
</select>

이런식으로..! selected에 따라 다른 페이지로 이동이 돼서 케이스별로 메뉴를 전부 다 적어줘야했다..ㅠ

결제내역

<div id="content" class="content">
  <div class="content-all">
    <table style="width: 100%", id="mtable">
      <tbody>
      <thead>
      <tr>
        <th>결제일</th>
        <th>헬스장</th>
        <th>트레이너</th>
        <th>이용기간</th>
        <th>가격</th>
        <th>후기</th>
      </tr>
      </thead>
      <tbody id="tb">
      <div th:unless="${#lists.isEmpty(mPList)}">
        <div th:each=" MPitem,status: ${mPList}">
          <tr class="payNreview">
            <td th:text="${MPitem.mpaydate}"></td>
            <td th:text="${MPitem.mpaygym}"></td>
            <td th:text="${MPitem.trainername}"></td>
            <td th:text="${MPitem.mpayperiod}"></td>
            <td th:text="${#numbers.formatInteger(MPitem.mpayprice, 3, 'COMMA') + '원'}"></td>
          </tr>
        </div>
      </div>
      <div th:if="${#lists.isEmpty(mPList)}">
        <td colspan="6">결제 내역이 없습니다.</td>
      </div>
      </tbody>
    </table>
  </div>
</div>
<div class="paging-area">
  <div class="paging" th:utext="${paging}"></div>
</div>

결제내역은 테이블 형식으로 불러온다.
원래는 후기를 등록하거나 삭제하는 후기관련 코드도 있는데 너무 길어져서..생략!

controller로 전송(ajax)

<script th:inline="javascript">

  //셀렉트박스 선택
  $("#sel").change(function () {
    let select = $("#sel").val();
    console.log(select); //daily, membership, pt

    let mpayType = "";
    if (select === "daily") {
      mpayType = "dgpay";
    } else if (select === "membership") {
      mpayType = "gpay";
    } else if (select === "pt") {
      mpayType = "tpay";
    }

    sendObj = { "mpayType": mpayType,
      "membernum": [[${member.membernum}]],
      "pageNum": 1
    };
    console.log(sendObj);

    //controller에 전송(ajax)
    $.ajax({
      url: "myPayList",
      type: "post",
      data: JSON.stringify(sendObj),
      contentType: "application/json",
      success: function (res) {
        let mPList = res.mPList;
        console.log(mPList);
        let paging = res.paging;
        console.log(paging);
        $(".paging").html(paging);
        let ritem = res.rList;
        console.log(ritem);
        // let mpaynumR = ritem.mpaynum;
        // console.log(mpaynumR);

        if (res != null && mPList.length != 0) {
          // 서버에서 받은 데이터를 처리하고 출력하는 로직을 여기에 작성
          // 예시: 테이블의 tbody에 결과 데이터를 추가하는 방식으로 출력
          var tbody = $("#tb");
          console.log(tbody);
          tbody.empty(); // 기존 데이터 삭제
          for (var i = 0; i < mPList.length; i++) {
            var mpayItem = mPList[i];
            var member = [[${session.member}]];
            var row = "<tr class='payNreview'>" +
                    "<td>" + mpayItem.mpaydate + "</td>" +
                    "<td>" + mpayItem.mpaygym + "</td>" +
                    "<td>" + mpayItem.trainername + "</td>" +
                    "<td>" + mpayItem.mpayperiod + "</td>" +
                    "<td>" + mpayItem.mpayprice.toLocaleString('ko-KR') + '원' + "</td>";

            tbody.append(row);
          }

        } else {
          var tbody = $("#tb");
          tbody.empty(); // 기존 데이터 삭제
          var row = "<tr>" +
                  "<td colspan='5'>" + "결제 내역이 없습니다." + "</td>" +
                  "</tr>";
          tbody.append(row);
        }

      },
      error: function (err) {
        console.log(err);
        alert("오류가 발생했습니다.");
      }
    });
  });


</script>

여기에도 후기등록 및 삭제 관련 이벤트가 포함되어 있는데 생략했다.

  1. 결제내역(전체, 회원권, 일일권, PT) 선택값 전달mpayType
  2. 페이지 넘버 전달
  3. 사용자 회원 번호 전달

자바스크립트는 위와 같은 이벤트를 처리하고 ajax로 컨트롤러에 값을 넘겨준다.

그럼 이제 컨트롤러에서는 이 값들을 어떻게 처리할까?
컨트롤러 속으로 고고! 고고!

(추억의 개콘 고고 예술속으로...)

💡 2. 컨트롤러

결제내역 가져오기

//결제 내역 가져오기
@GetMapping("myPayList")
public ModelAndView mPay(SearchDto search, HttpSession session){
    log.info("myPayList()");

    mv = mServ.mPay(search,session);
    return mv;
}

마이페이지에서 결제내역 메뉴를 눌렀을 때 회원정보를 기준으로 전체 결제내역을 보여주는 메소드

메뉴 선택에 맞춰 결제내역 보여주기

//결제내역 조회(회원권, 일일권, PT)
@PostMapping("myPayList")
@ResponseBody
public Map<String, Object> selectedMpay(@RequestBody SearchDto search){
    log.info("selectedMpay()");

    Map<String, Object> rmap = mServ.selectedMpay(search);

    return rmap;
}

회원권, 일일권 등 메뉴를 선택했을 때 정보를 필터링하여 내보내는 메소드

💡 3. 서비스

전체 결제내역 가져오기

public ModelAndView mPay(SearchDto search, HttpSession session) {
    log.info("GetMypayList()");
    mv = new ModelAndView();

    int num = search.getPageNum();
    // limit 0, 5 - 1페이지

    //출력할 게시물 수가 설정되지 않으면 기본값(5)로 설정
    if (search.getListCnt() == 0) {
        search.setListCnt(listCnt);
    }
    if(num == 0) num = 1;
    search.setPageNum((num - 1) * search.getListCnt()); // 보여질 게시글 목록의 수

    //결제내역 가져오기
    List<MPayDto> mPList = mDao.GetMypayList(search);

    //회원정보 가져오기
    MemberDto member = mDao.selectMemberSearch(search);

    mv.addObject("mPList", mPList);
    mv.addObject("member", member);

    //페이징 처리
    search.setPageNum(num);
    String pageHtml = null;
    String payKind = null;
    if(search.getMpayType() == null || search.getMpayType().equals("")){
        pageHtml = getPaging(search);
    }else {
        pageHtml = getMpayPaging(search);
        payKind = search.getMpayType();
    }

    mv.addObject("paging", pageHtml);
    mv.addObject("payType", payKind);

    //세션에 필요 정보 저장(pageNum)
    session.setAttribute("pageNum", num);


    mv.setViewName("myPayList");
    return mv;
}

전체 결제내역만 가져오는 건 비교적 간단하다.
페이징 처리하고, 결제내역 가져오고, 회원정보 가져오고...
필요한 것들 다 가져왔으면 ModelAndView에 담고..
세션에 페이징 넘버 저장하고..
뷰 설정하고 리턴!

그럼 이제 선택 옵션을 추가하면 어떻게 될까?

메뉴 선택에 맞춰 결제내역 보여주기(회원권, 일일권 ..)

//결제내역 조회(회원권, 일일권, PT)
public Map<String, Object> selectedMpay(SearchDto search) {
    log.info("selectedMpay()");

    List<MPayDto> mPList = null;
    Map<String, Object> rmap = new HashMap<>();

    int num = search.getPageNum();

    //출력할 게시물 수가 설정되지 않으면 기본값(5)로 설정
    if (search.getListCnt() == 0) {
        search.setListCnt(listCnt);
    }
    if(num == 0) num = 1;
    search.setPageNum((num - 1) * search.getListCnt());

    try{
        mPList = mDao.selectedMpay(search);
        rmap.put("mPList", mPList);
        //페이징
        search.setPageNum(num);
        String pageHtml = getMpayPaging(search);
        rmap.put("paging", pageHtml);

        }

    } catch (Exception e){
        e.printStackTrace();
    }
    return rmap;

메뉴에 맞게 결제내역을 가져오는 건 살짝 더 복잡하다.
필요한 것들 가져오고 리턴시켜주는 건 동일한데,
Map으로 받아서 그 안에 결제내역, 페이징 넘버, 리뷰를 담아 리턴한다.


비동기방식 ajax로 데이터를 넘기기 때문에 셀렉트박스에서 메뉴를 선택하면 화면전환없이 실시간으로 메뉴에 맞게 결과가 바뀐다.

결제한 적 없는 일일권을 선택했더니 정상적으로 결제 내역이 없다고 뜬다.

💡 4. DAO(데이터베이스)

//회원 결제내역 가져오기
<select id="GetMypayList" resultType="MPayDto" parameterType="SearchDto">
    select * from MPay where membernum=#{membernum}
    <if test="mpayType != null">
        and mpaynum like concat(#{mpayType},'%')
    </if>
    LIMIT #{pageNum}, #{listCnt}
</select>

//회원 정보 가져오기
<select id="selectMemberSearch" resultType="MemberDto" parameterType="SearchDto">
    select * from member where membernum=#{membernum}
</select>

//메뉴 선택에 따라 결제내역 가져오기
<select id="selectedMpay" resultType="MPayDto" parameterType="SearchDto">
    select * from mpay
    where membernum = #{membernum} and mpaynum like concat(#{mpayType},'%')
        LIMIT #{pageNum}, #{listCnt}
</select>


결제번호인 mpaynum은 운동권 종류에 따라 형식이 달라져서 운동권을 기준으로 mpayType을 설정해주었다.

페이징과 리뷰 메소드 처리한 것도 포함되어야 하는데 여기에서는 결제내역 위주의 메소드를 보여주고, 다음 포스팅에서는 페이징과 리뷰 관련 메소드를 다루겠습니다.😊~

📅 DATE

2023.08.14 작성

profile
호연지기
사람의 마음에 차 있는 너르고 크고 올바른 기운
이전 포스트

[Spring] 포트원(아임포트)결제api 사용하기 #ajax

0개의 댓글