코딩기록 저장소 🐕/스스로 프로젝트와 연습

FullCalendar 사용하기(5) 삭제

kimkongmom 2024. 4. 24. 18:11

 

 

 

FullCalendar마지막으로 삭제해보겠습니다.

 

가장 간단한 delete입니다.

 

1. Mapper.xml

 

일정을 각자 삭제해서 update로 하려다..다른곳에 시간을 더 쏟아보자고 판단..!😂

<delete id="deletePlan" parameterType="int">
    DELETE
      FROM PLAN_T
     WHERE PLAN_NO = #{planNo, jdbcType=INTEGER}
</delete>

 

 

2. Dao(Mapper)

public int deletePlan(int PlanNo);

 

 

3. Service

 

웹 개발에서는 Map을 사용하여 JSON 형식의 데이터를 쉽게 구성하고 관리할 수 있습니다.

삭제 성공 여부를 나타내는 removeResult를 간단히 키-값 쌍으로 추가할 수 있습니다.

@Override
public Map<String, Object> deletePlan(int planNo) {
  int removeResult =  planMapper.deletePlan(planNo);
  return Map.of("removeResult", removeResult);
}

 

 

4. Controller

@ResponseBody
@PostMapping(value = "/layout/delete.do", produces ="application/json")
public Map<String, Object> deletePlan(@RequestParam(value="planNo", required=false, defaultValue="0") int planNo){
    return planService.deletePlan(planNo);
}

 

 

 

5. html


수정과 비슷한 형태로 Result === 1이면 성공 

$(document).ready(function() {
   $('#delete_btn').click(function() {
      var planNo = $('#planNo').val(); // 삭제할 일정의 고유 번호를 가져옵니다.
      if (confirm('일정을 삭제하시겠습니까?')) {
         $.ajax({
            url: '/layout/delete.do',
            type: 'POST',
            data: { planNo: planNo },
            dataType: 'json',
            success: function(resData) {
               if (resData.removeResult === 1) {
                  alert('일정이 삭제되었습니다.');
                  $('#editEventModal').modal('hide'); // 모달 창을 닫습니다.
               } else {
                  alert('일정이 삭제되지 않았습니다.');
               }
            },
            error: function() {
               alert('서버 오류가 발생했습니다.');
            }
         });
      }
   });
});

 

 

이미지 설명