[1주차 미니프로젝트]

mbti별 TIL을 작성하는 웹서비스를 팀원들과 구현해 보았다!

익숙하지 않은 python 언어를 사용하는데에 어려움이 참 많았는데 팀원들과 협력하며 천천히 해결해 나갈 수 있었다. 구글링해가며 오류를 해결해 나갈때의 쾌감이 정말 좋았음!!

진행중에 특히나 클라이언트와 서버간의 데이터 전달에 어려움을 많이 겪었는데 아래의 예시를 첨부한다

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

        function listing() {
            $.ajax({
                type: 'GET',
                url: '/posts',
                data: {},
                success: function (response) {
                    console.log(response['post'])
                    let rows = response['post']
                    for(let i = 0; i<rows.length;i++) {
                        let mbti =rows[i]['mbti']
                        let title= rows[i]['title']
                        let contents = rows[i]['contents']
                        let writer = rows[i]['userid']
                        let postnum = rows[i]['num']
                        let temp_html = `<div class="col">
                                            <div class="card h-100" onclick="move(${postnum})">
                                                <h6 class="card-mbti" id="mbti">게시글번호:${postnum} / MBTI: ${mbti}</h6>
                                                <img src="https://cdn.pixabay.com/photo/2015/07/17/22/43/student-849825_960_720.jpg" class="card-img-top" alt="...">
                                                <div class="card-body">
                                                    <h5 class="card-title" id="title">${title}</h5>
                                                    <h6 class="card-title" id="">${writer}님의 글</h6>
                                                    <p class="card-text" id="contents">
                                                        ${contents}
                                                    </p>
                                                    <button onclick="move(${postnum})">글로이동</button>
                                                </div>
                                            </div>
                                        </div>`
                        $('#post-box').append(temp_html)
                    }
                }
            })
        }
       
       

메인페이지에서 서버로 게시글 전체 목록을 요청하는함수이다

@app.route("/posts", methods=["GET"])
def posts_get():
    posts_list = list(db.post.find({},{'_id':False}))
    return jsonify({'post':posts_list})

서버에선 데이터베이스에 모든 게시글을 담아 클라이언트로 전송하여준다

 function move(postnum) {
                $.ajax({
                    type: "POST",
                    url: "/index",
                    data: {
                        postnum_give: postnum
                    },
                    success: function (response) {
                        let rows = response['postinfo']
                        console.log(rows['num'])

                        let postnum = rows['num']

                        window.location.href='/index?postnum='+postnum;
                    }
                })
            }

메인페이지에서 특정 게시글을 클릭하였을때 서버로 요청하는 코드이다
서버로 해당게시글 번호를 데이터로 같이 넘겨 준다

  <button onclick="move(${postnum})">글로이동</button>

위처럼 게시글 목록을 받아올때 게시글 번호가 전달되어 버튼이 생성되는걸 확인하자!

@app.route("/index", methods=["POST"])
def contents_get():
    postnum_receive = request.form['postnum_give']

    print(postnum_receive)
    # ok

    content = db.post.find_one({'num':int(postnum_receive)},{'_id':False})
    print(content)

    return jsonify({'postinfo':content})
  

이후 서버는 전달받은 게시글 번호로 데이터베이스에 게시글을 찾은 후 클라이언트로 전달 해준다!

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

        function show_mbti() {
            let hashes = window.location.href.slice(window.location.href.indexOf('?') + 9)
            console.log(hashes)
            console.log(hashes)
            console.log(hashes)
            $('#mbti-writing').empty()
            $.ajax({
                type: "POST",
                url: "/api/index",
                data: { postnum_give : hashes},
                success: function (response) {
                    console.log(response['post'])
                    let row = response['post']
                    let title = row['title']
                    let mbti = row['mbti']
                    let contents = row['contents']
                    let user = row['userid']
                    let num = row['num']
                    let temp_html = `<h1>${title}</h1>
                                      <p>작성자: ${user} //게시물 번호: ${num}</p>

                                        <div id="align_body">
                                            <div id="mbti_check">
                                                ${mbti}
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">${contents}</textarea>
                                        </div>`

                    $('#mbti-writing').append(temp_html)
                    }

            });
        }

이후 게시글 조회 페이지의 자바스크립트 코드이다 쿼리파라미터로 전달해준 postnum의 값을

let hashes = window.location.href.slice(window.location.href.indexOf('?') + 9)

로 가져와서 사용해준다!

@app.route("/api/index", methods=["POST"])

def post_get():
    post_receive = request.form['postnum_give']
    post = db.post.find_one({'num':int(post_receive)},{'_id':False})
    return jsonify({'post':post})

이후 서버에서 클라이언트로부터 받은 게시글번호를 통하여 db검색 후 클라이언트로 반환해준다!

---

아마 좀더 생략가능하고 간략하게 줄일 수 있는 부분이 많을거라 생각하지만 오류없이 작성 완료 했다는것에 크게 뿌듯함을 느낄수 있었다 :)