TIL-20230517

제이쿼리

오늘 구현한 기능

1. 글 추가 기능

2. 글 삭제 기능

1) 데이터베이스에서 받은 데이터들을 for문을 돌려 제이쿼리로 HTML문을 붙여넣기

function showMyStories() {
            // let objectId = new ObjectId();
            fetch('/story')
                .then((res) => res.json())
                .then((data) => {
                    for(let idx = 0; idx < data.length; idx++) {
                        let id = data[idx].id
                        // let paseData = objectId(data[idx].id)
                        // idList.push(data[idx].storyTitle)
                        // console.log('paseData = ', data[idx].id)
                        let temp = `<div id="story${count}" class="my-story">
                                        <div  class="delete-btn" >
                                            <i class="fa-solid fa-xmark" onclick=deleteStory('${id}');></i>
                                        </div>
                                        <div class="update-btn"  id="update-btn">
                                            <i class="fa-solid fa-wrench" onclick=updateStory('${id, event}')></i>
                                        </div>
                                        <img src="${data[idx].imgUrl}" height="60%" width="100%" alt="">
                                        <div class="text">
                                            <h4>${data[idx].storyTitle}</h4>
                                            <p>
                                                ${data[idx].storyContent}
                                            </p>
                                        </div>
                                    </div>`    
    
                        $('.story-list').append(temp)
                        count++;
                    }
                    // console.log('data = ', data)
                    // let myStories = 

                })
        }

2) 원치 않는 요소 삭제

<i class="fa-solid fa-xmark" onclick=deleteStory('${id}');></i>
//////////////////////////////////////
fetch('/delete', {
	method: "DELETE",
    	body: formData,
    })
    .then((res) => res.json())
    .then((data) => {
    	alert(data.msg)
    })
/////////////////////////////////////////
@app.route('/delete', methods=["DELETE"])
def deleteStory():
   id = ObjectId(request.form['storyId'])
   print('id = ', id)
   db.myteam.delete_one({"_id": ObjectId(id)})
   return jsonify({"msg" : "카드가 삭제되었습니다."})

딜리트 버튼을 클릭하여 데이터베이스의 고유 id값을 보내준다.

앞으로 구현할 기능

1. 수정 기능