1-2 [JavaScript, html, mongoDB] Flask 환경에서 MongoDB를 이용한 페이지 구성

오늘 할 일 (계획)

1. DB 추가 구성 - 랜덤 카드 칼럼 출력에 사용

 

2. 비밀번호 변경 페이지 구성하기

 

3. 웹 프로젝트 3 마무리 - 지연중

 

4. 파이썬 알고리즘 강의 2주 차 완료하기 - 지연중

 

5. Git 기초강의 3주 차까지 완강 - 지연중

 

오늘 한 일 (회고)

1. 로그인, 회원가입 페이지 내부 타이머 오류 수정

 

2. 로그인 utf-8 Decode 에러 문제 임시적으로 해결

 

3. 피드 페이지 수정 중

- 정해져 있는 레이아웃이 아닌 데이터 베이스의 데이터를

받아서 화면에 뿌려줄 수 있게 구현 

            <div id="sub-icon-wrapper">
<!--                <div class="sub-item">-->
<!--                    <div class="sub-item-user">-->

<!--                        <div class="sub-item-text">-->
<!--                            <p class="sub-item-name">빨간망토 차차</p>-->
<!--                            <p class="sub-item-follower">이용자님이 팔로우합니다</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <p class="sub-item-button">팔로우</p>-->
<!--                </div>-->
            </div>
        </div>
    </div>

</div>
<script src="../static/redirection.js"></script>
<script src="../static/random_show.js"></script>
<script src="../static/feedindex.js"></script>

html 파일 밑에 js 파일 여기서는 random_show.js 파일이 실행되게 구성

$(document).ready(function () {
    // user_info()
    random_show()
    random_show_history()
    mainpost_show()
})

random_show()
random_show_history()
mainpost_show()

실행되면 위와같이 document.ready 함수로 인해서 페이지가 열릴때 random_show.js에 있는 해당

function random_show() {
    // let max = 1200
    // let min = 0
    // let count = Math.floor(Math.random() * (max - min + 1)) + min;
    let count = 0

    $.ajax({
        type: "POST",
        url: "/api/random_show",

함수들이 실행 random_show를 예로 들면 함수가 실행되면서 ajax 통신을 요청

url: "/api/random_show",

로 post 통신을 하게됨 

@app.route("/api/random_show", methods=['POST'])
def show_random():
    book_list = []
    count = int(request.form['count_give'])
    book = list(db.bookmark.find({}, {'_id': False}).sort('like', -1))
    for count_ in book[count:count + 12]:
        book_list.append(count_)
    return jsonify({'book': book_list})

 

이러면 서버에서 db 에서 알맞은 값들을 받아서 json 형식으로 리턴하고 다시 이를 받아서 

 success: function (response) {
            let book = response['book']
            for (let i = 0; i < book.length; i++) {

                // let j = i + 10
                let title = book[i]['comment']
                let img = book[i]['image']
                // let title2 = rest[j]['title']
                // let img2 = rest[j]['img']


                let temp_html = `        
                    <div class = "sub-item" >
                    <div class = "sub-item-user" >
                     ${img}"></a>
                <div class="sub-item-text">
                    <p class="sub-item-name">${title}</p>
                    <p class="sub-item-follower">${title}님을 팔로우합니다</p>
                </div>
            </div>
                <p class="sub-item-button">따라가기</p>
            </div>`

                //   let temp_html_story = `
                //      <div class="story-wrapper">
                //     <div class="story-off">
                //         <img src="${img2}"/>
                //     </div>
                //     <p>${title2}</p>
                // </div>`

                $('#sub-icon-wrapper').append(temp_html)
                // $('#story-container').append(temp_html_story)

                count += 10;
            }
        }
    })

}

sub-icon-wrapper에 원하는 값을 붙여서 html에 뿌려줄 수 있음

 

중간에 MongoDB를 이용한다는 언급이 있었는데 추가 설명하자면 

from pymongo import MongoClient

import certifi

ca = certifi.where()
app = Flask(__name__)
client = MongoClient('mongodb+srv://AKBARI:sparta@cluster0.jujbu.mongodb.net/cluster0?retryWrites=true&w=majority',
                     tlsCAFile=ca)
db = client.dbakbari

등의 설정을 하여 db를 특정 지어서 해당 db의 값에 접근 할 수 있습니다.

 

- 기존 코멘트 입력과 같은 기능 구현이 되어있는 것을 수정할 필요성이 있음

 

* 프로젝트 관련된 문서를 읽고 기존 만들어놓은 것을 보완 수정하는 것에 시간을 많이 썼다.

한가지 느낀점은 처음 Database의 구성을 면밀하고 기능의 흐름대로 잘해놓아야한다는 것을 

느끼게 되었다.

 

그렇지 못하여서 다 작업이 된 페이지를 다시 작업하고 comment관련된 DB 흐름을 다시 만들어야하는 

문제가 생겼다.

 

내일 할 일

1. 프로젝트 피드 페이지 구성 변경하여 완성

 

2. 비밀번호 변경 페이지 만들기

 

3. DB 추가 구성 - 랜덤 카드 칼럼 출력에 사용

 

4. 비밀번호 변경 페이지 구성하기

 

5. 웹 프로젝트 3 마무리 - 지연중

 

6. 파이썬 알고리즘 강의 2주 차 완료하기 - 지연중

 

7. Git 기초강의 3주 차까지 완강 - 지연중