[Tistory] 게시글 쓰기 - 데이터 들어 오는지 확인

1. 화면

• 게시물을 작성해주세요 안에 게시글을 작성 할꺼니까 textarea 없어도 되겠네

2. 데이터 잡기

$("#postWriteForm").on("submit", function(e) {
       e.preventDefault(); // 폼이 바로 제출되지 않도록 함

       // 제목 값 읽기
       let title = $("#title").val();
       console.log("제목: " + title);

       // 카테고리 아이디 값 읽기
       let categoryId = $("#categoryId").val();
       console.log("categoryId: " + categoryId);
       
       
});

3. 게시글 속 이미지 오토카지?

3-1. Quill 에디터의 내용 가져오기

let quillContent = quill.root.innerHTML;

• Quill 에디터의 현재 콘텐츠를 HTML 형식으로 가져온다.

• quill.root.innerHTML은 에디터에 작성된 모든 텍스트, 이미지, 동영상 등의 요소를 포함하는 HTML 문자열을 반환한다.

• 이 값은 이후에 서버로 전송할 데이터로 사용된다.

4. AJAX 요청을 처리 보내기

• this 사용
let formData = new FormData(this);
formData.append("content", quillContent);
현재 폼에 포함된 모든 입력값이 FormData 객체에 추가되어 AJAX 요청으로 전송할 수 있음

$("#postWriteForm").on("submit", function(e) {
       e.preventDefault(); // 폼이 바로 제출되지 않도록 함

       // 제목 값 읽기
       let title = $("#title").val();
       console.log("제목: " + title);

       // 카테고리 아이디 값 읽기
       let categoryId = $("#categoryId").val();
       console.log("categoryId: " + categoryId);

       // Quill 에디터 내용 읽기
       let quillContent = quill.root.innerHTML;
       console.log("Quill Content: " + quillContent); // HTML 태그와 함께 텍스트 출력 (글꼴, 색상 등 유지)

       // 폼 데이터 생성 (파일 및 텍스트 데이터 포함)
       let formData = new FormData(this); // 현재 폼의 데이터를 가져옴
       formData.append("content", quillContent); // Quill 에디터의 내용을 추가

       $.ajax({
           url: "/s/post/save",
           data: formData,
           contentType: false, // 기본적으로 jQuery는 데이터를 문자열로 처리하지만, 파일 전송을 위해 false로 설정
           processData: false, // FormData를 사용할 때는 multipart/form-data를 사용하므로 false로 설정
           type: 'POST'

       }).done((res) => {
           Swal.fire({
               text: "게시글 등록이 완료되었습니다.",
               icon: "success",
               button: "확인"
           }).then(() => {
               window.location.href = "/post/list";
           });

       }).fail((res) => {
           Swal.fire({
               text: "게시글 등록 실패",
               icon: "warning",
               button: "확인"
           });
       });


   });

5. PostController

// 게시글 쓰기
    @PostMapping("/s/post/save")
    public String save(PostRequest.SaveDTO reqDTO){
        System.out.println("Post SaveDTO"+ reqDTO);

        return "redirect:/post/list";
    }

6. PostRequest - SaveDTO 만들기

@Data
public static class SaveDTO {
    private String title;
    private String content;
    private Integer categoryId;
    private MultipartFile thumbnailFile;

}

DTO 에도 MultipartFile 해놓는다

7. 확인