Node.js 게시판 글 수정하기

Node.js 게시판 글 수정하기

 

Html 클라이언트 단

        $(document).ready(function () {
            get_fix_detail();
        });

        function get_fix_detail() {
            $.ajax({
                type: "GET",
                url: `/api/goods/${goodsId}`,
                data: {},
                success: function (response) {
                    let goodsDetail = response["detail"];
                    let content = goodsDetail["content"];
                    let person = goodsDetail["person"];
                    let name = goodsDetail["name"];
                    let cate = goodsDetail["category"];
                    let pwd = goodsDetail["pwd"];
                    let goodsId = goodsDetail["goodsId"];
                    let tempHtml = `
                              <div style="text-align:center; margin-bottom:20px;">
    <div class="mb-3" style="width:200px; margin:auto;">
        <label for="exampleFormControlInput1" class="form-label" style="margin-top:20px;"><b>작성자</label>
    <input type="email" class="form-control" value="${person}" id="person22" placeholder="작성자">

        <label for="exampleFormControlInput1" class="form-label" style="margin-top:20px;">주제</label>
        <input style="width:200px;" type="email" value="${cate}" class="form-control" id="cate" placeholder="주제">

        <label for="exampleFormControlInput1" class="form-label" style="margin-top:20px;">제목</label>
        <input style="width:200px;" type="email" value="${name}" class="form-control" id="name9" placeholder="제목">


    </div>
    <div class="mb-3" style="text-align:center; margin-top:30px;">
        <label for="exampleFormControlTextarea1" class="form-label">내용</label>
        <textarea placeholder="내용을 입력해주세요." class="form-control" id="contents" rows="3" style="width:800px; height:500px; margin:auto;">${content}</textarea>
    </div>
    </div>

    <div style="text-align:center; display:block;">
     <button type="button" class="btn btn-info" style="font-family: 'Stylish', sans-serif;" onclick="prompt_test('${pwd}', '${goodsId}')" >수정 할래용?</button>
     <button type="button" class="btn btn-danger" style="font-family: 'Stylish', sans-serif;" onclick="prompt_test2('${pwd}', '${goodsId}')" >삭제 할래용?</button>
    </div>  `
                    $("#fix_show_list").append(tempHtml)
                }
            });
        }




        function prompt_test(pwd, goodsId) {
            let prompt_test = prompt("비밀 번호를 입력해주세용ㅎㅎ");
            let temp = pwd
            if (prompt_test == pwd) {
                alert("수정 완료!")
                return makeReview(goodsId)
                location.href = '/home'
            } else {
                alert("비밀 번호가 틀렸어용")
            }
        }

        function makeReview(res_goodsId) {
            let names = $('#name9').val()
            let contents01 = $('#contents').val()
            let person00 = $('#person22').val()
            let cate = $('#cate').val()
            let goodsId = res_goodsId
            console.log(names)
            console.log(goodsId)
            console.log(contents01)
            $.ajax({
                type: "POST",
                url: "/api/fix_save",
                data: {
                    "name": names,
                    "person": person00,
                    "content": contents01,
                    "category": cate,
                    "goodsId": goodsId
                },
                //
                success: function (response) {
                    window.location.reload();
                    location.href = '/home'
                }
            })
        }

일단은 DB에 저장되어 있는 값을 가지고 온다.

Ajax url 에서 ${goodsId} 이 부분은 db에 저장된 고유의 값이다.

파라미터는 detail ? goods=06 이런식으로 들어오고,

각각 페이지를 다르게 출력해 준다.

 

DB에 저장되어 있는 값을 그대로 들고와서,

 

수정한 뒤에는 저장하기 버튼을 이용해 저장시킨다.

 

이때  prompt_test 함수를 통해

prompt를 띄우고 비밀번호를 입력하게 한다.

 

if 입력이 맞다면

makeReview 함수를 호출하고,

 

틀리면

alert을 띄운다.

 

나는 여기서 이렇게 함수 2개를 이용해서 했는데, 함수 1개만 이용해서 하는 법도 있는가보다.

 

 

 

서버

router.post("/fix_save", async (req, res) => {
  const { goodsId, name, person, content, category } = req.body
  await Goods.updateOne({ goodsId }, { $set: { name, person, content, category } });
});

여기서 const로 한번에 변수들을 가지고 온다.

req.body는 클라이언트에서 보내준 모든 값이다.

그 값들은 각각 저 변수로 들어오게 된다.

 

클라이언트의 변수명과 서버에서 받는 변수명도 똑같이 해준다.

 

Goods(=goods) 라는 db값에 updateOne을 해주는데 ({ goodsId }) 키값을 가진 부분에서

$set을 이용하여 goodsld 키값에 해당하는 name, person, content, category를 모두 수정시켜준다.

 

 

글 삭제

router.post("/fix_delete", async (req, res) => {
  const { goodsId } = req.body
  // deleteone은 set을 안씀
  await Goods.deleteOne({ goodsId : goodsId})
});

※ deleteOne은 $set을 사용할 수 없다.

방식은 똑같이 받아오는데,

어차피 키 하나의 값만 같으면 해당 딕셔너리 한 줄을 삭제할 수 있으니 goodsId만 가지고 와서

deleteOne을 이용하여 goodsId : goodsId가 일치하면 삭제시켜버린다.