항해99_3주차_스프링입문_개인과제_에러노트(2)

다섯 번째 에러

• getPassword 함수를 만들고 서버에서 패스워드만 불러오려고 하는데 arc에서 get검사할 때는 값이 잘 불러와지는데 서버를 실행하고 localhost에서 가져오려고하면 안된다... ㅠㅠ
• 에러 사진 - 수정하기 버튼 누르면 패스워드 가져오는 부분에서 아래와 같이 400에러 생김

• 해결 - 팀원분의 도움으로 코드 바꿨다.
• 아래에 완성된 코드가 있어서 바뀐 일부만 들고왔다. -> 완성된 코드<팀원분들의 도움으로 완성한 코드>
• url 부분에 "/api/blogs/password/{id}"로 했었는데 팀원분께서 "/api/blogs/password/"+id로 해보라고해서 했는데 console.log(response) 찍었을 때 잘 나왔다!!  원리는 모르지만 정말 기뻤다. 팀원분은 정말 똑똑하신 거 같다.
• 아!! 그리고 코드보다가 뒤늦게 깨달은 게 있다. html? 주소?안에 {id} 이렇게 변수를 넣어주려고하면은 백틱(``)을 썼어야 했는데!! (예시  `/api/blogs/password/{id}`  ) 이렇게 해야한다!!!! 나는 쌍따옴표를 쓰니깐 변수가 안 들어 온 거였다.
  팀원분께서 준 참고사항 https://curryyou.tistory.com/185

function editPost(id) {
        $.ajax({
            type: "GET",
            url: "/api/blogs/password/"+id,
            data: {},
            success: function (response) {
                let password = $(`#${id}-update-password`).val();
                let pw = response;
                console.log(password);
                console.log(pw);
                //만약에 사용자 비밀번호가 일치하면 아래 수행가능
                if (password == pw) {

 

 

여섯 번째 에러

• 아래와 같이 editPost를 따로 적고 패스워드만 서버에서 받아오는 getPassword함수를 따로 써서 editPost 안에서 getPassword함수를 쓸려고 했는데 잘 안된다 ㅠㅠ 그래서 getPassword에 editPost를 합쳤다.
• 팀원분께서 보내주신 ajax 동기/비동기 참고
  https://recollectionis.tistory.com/167

<잘 안됐던 코드>

    //수정하기 - getPassword 함수랑 수정하기 함수 다르게 해서 할려고 했는데 합쳐야되나보다
    function editPost(id) {
        let password = $(`#${id}-update-password`).val();
        let pw = getPassword(id);
        console.log(password);
        console.log(pw);
        //만약에 사용자 비밀번호가 일치하면 아래 수행가능
        if (password != pw) {
            alert("간절하다");
            return;
        }
            showEdits(id);
            //제목수정
            let updateTile = $(`#${id}-titleContent`).text().trim();
            $(`#${id}-update-title`).val(updateTile);

            //내용 수정
            let updateContent = $(`#${id}-contents`).text().trim();
            $(`#${id}-update-textarea`).val(updateContent);


    }

 

<팀원분들의 도움으로 완성한 코드>

function editPost(id) {
    $.ajax({
        type: "GET",
        url: "/api/blogs/password/"+id,
        data: {},
        success: function (response) {
            let password = $(`#${id}-update-password`).val();
            let pw = response;
            console.log(password);
            console.log(pw);
            //만약에 사용자 비밀번호가 일치하면 아래 수행가능
            if (password == pw) {
                showEdits(id);
                //제목수정
                let updateTile = $(`#${id}-titleContent`).text().trim();
                $(`#${id}-update-title`).val(updateTile);

                //내용 수정
                let updateContent = $(`#${id}-contents`).text().trim();
                $(`#${id}-update-textarea`).val(updateContent);
            } else {
                alert("비밀번호를 다시 확인해주세요");
                return;
            }
        }
    });
}

 

 

일곱 번째 에러

• 이건 내 에러는 아닌데 항해99 동기분 중에서 발생해서 같이 고민해 본 거다. 난 못 풀었지만 동기분이 해결하셔서 올려본다.
• 클라이언트에서 글을 수정하고 저장하기 버튼 누렀는데 수정된 데이터가 DB에 저장되지 않았다... 왜 그러지 ㅠㅠ
• 아래는 내 코드로 예시를 들어보았다.

<index.html>

//수정한거 저장하기
function submitEdit(id) {
        let title = $(`#${id}-update-title`).val().trim();
        let username = $(`#${id}-writerContent`).text().trim();
        let password = $(`#${id}-update-password`).val().trim();
        let contents = $(`#${id}-update-textarea`).val().trim();
        if (isValidContents(contents) == false) {
            return;
        }
        let data = {'username': username,'title': title, 'contents': contents, 'password':password};

        $.ajax({
            type: "PUT",
            url: `/api/blogs/${id}`,
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (response) {
                alert('메시지 변경에 성공하였습니다.');
                window.location.reload();
            }
        });
}

 

해결

• Blog.java 클래스에 적은 업데이트 변수랑 위에 PUT 타입으로 데이터를 보내는 data의 변수가 같아야 한다. 개수도 같아야한다!! 이걸 어떻게 해결하셨는지 대단하다.

<Blog.java>

//업데이트
public void update(BlogRequestDto requestDto){
    this.username = requestDto.getUsername();
    this.title = requestDto.getTitle();
    this.contents = requestDto.getContents();
    this.password = requestDto.getPassword();
}