2022-08-30 화요일 회고록

미니 프로젝트 2일차! 정확하게는 금요일부터 했으니 금,토,일,월,화 5일차가 된다. 

오늘은 미니프로젝트를 진행하면서 db에서 게시글을 불러와 게시글 수정하면 db에 갱신하는 기능을 만들려고 한다. 

 

먼저 db에 게시글을 불러오는 함수이다! 

 function showeditpage() {
                $.ajax({
                    type: "GET",
                    url: "/form_edit_read/write",
                    data: {},
                    success: function (response) {
                        let user_info = response['all_user_info']
                        console.log(user_info)

                        id = user_info['id']
                        console.log(id)
                        let name = user_info['name']
                        let image = user_info['image']
                        let introduction = user_info['introduction']
                        let mbti = user_info['mbti']
                        let blog = user_info['blog']

                        let temp_html = `
                        <div class="modal-body">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-default" >이름</span>
                                </div>
                                <input
                                    id="name"
                                    type="text"
                                    class="form-control"
                                    aria-label="Default"
                                    aria-describedby="inputGroup-sizing-default"
                                    value = ${name}>
                            </div>
                            <br></br>
                            <img
                            class="img-fluid d-block mx-auto"
                            src="${image}"
                            alt="..."/>
                            <br></br>
                            </div>
                            <textarea class="form-control" id="introduction" rows="3">${introduction}</textarea>
                            <br></br>
                            <ul class="list-inline">
                                <li>
                                    <select class="form-select" aria-label="Default select example">                                   
                                        <option id="mbti"selected="selected">${mbti}</option>
                                        <option value="1">ISTJ</option>
                                        <option value="2">ISFJ</option>
                                        <option value="3">INFJ</option>
                                        <option value="4">INTJ</option>
                                        <option value="5">ISTP</option>
                                        <option value="6">ISFP</option>
                                        <option value="7">INFP</option>
                                        <option value="8">INTP</option>
                                        <option value="9">ESTP</option>
                                        <option value="10">ESFP</option>
                                        <option value="11">ENFP</option>
                                        <option value="12">ENTP</option>
                                        <option value="13">ESTJ</option>
                                        <option value="14">ESFJ</option>
                                        <option value="15">ENFJ</option>
                                        <option value="16">ENTJ</option>
                    
                                    </select>
                                </li>
                                <br></br>
                                <li>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="inputGroup-sizing-default" >blog</span>
                                        </div>
                                        <input
                                            id="blog"
                                            type="text"
                                            class="form-control"
                                            aria-label="Default"
                                            aria-describedby="inputGroup-sizing-default"
                                            value = ${blog}>
                                    </div>
                                </li>
                            </div>
                        </div>`

                        $('#edit-box').append(temp_html)

 

@app.route('/user1/read', methods=['GET'])
def user1_read():
        reads = list(db.users.find({}, {'_id': False}))
        return jsonify({'all_reads': reads})

 

아래 함수는 수정된 내용들을 db에 다시 갱신 시키는 것이다

            var id
            $(document).ready(function () {
                showeditpage()
            });

            //수정된 데이터를 DB에 저장함
            function modify() {
                let name = $("#name").val();
                let introduction = $("#introduction").val();
                let mbti = $("#mbti").val();
                let blog = $("#blog").val();
                console.log(name)
                $.ajax({
                    type: "POST",
                    url: "/form_edit_read/modify",
                    data: {
                        id_give: id,
                        name_give: name,
                        introduction_give: introduction,
                        mbti_give: mbti,
                        blog_give: blog
                    },
                    success: function (response) {
                        if (response["result"] == "success") {
                            alert(response["msg"]);
                            window.location.href = ('/');
                        }
                    }
                })
            }

@app.route('/form_edit_read/modify', methods=['POST'])
def form_edit_modify():
    id_receive = request.form['id_give']
    name_receive = request.form['name_give']
    introduction_receive = request.form['introduction_give']
    mbti_receive = request.form['mbti_give']
    blog_receive = request.form['blog_give']
    
    db.users.update_one({'id':id_receive}, {'$set': {'name': name_receive, 'introduction': introduction_receive, 'mbti': mbti_receive, 'blog': blog_receive}})
    return jsonify({'result': 'success', 'msg': '수정이 완료되었습니다.'})

 

post와 get요청에 대한 것에 대해서 제대로 배운 것 같아 기분이 뿌듯했다!