[도쿄의 사계] #2021/1/22 개발일지

What I did

<Mytripbox 페이지>

• Slick 옵션 변경 (3장씩 보이도록)
• 버튼 누르면 모달창 등장하게 하기
• 모달창에 메모 기능 넣기
• 메모를 저장하면 데이터베이스에 저장 및 모달안에 표시시키기

🎈 app.py

#메모 저장하기 코드

@app.route('/memo', methods=['POST'])
def saving():
    title_receive = request.form['title_give']
    comment_receive = request.form['comment_give']

doc = {
    'title': title_receive,
    'comment': comment_receive,
}
db.articles.insert_one(doc)
# 데이터 베이스의 콜렉션 이름은 articles
return jsonify({'result': 'success', 'msg': '메모 저장 완료!'})

#메모 조회해서 화면에 불러오기 코드

*articles라는 키 값으로 articles 정보를 클라이언트에 보내주기

@app.route('/memo', methods=['GET'])
def listing():
    # 서버 쪽 GET의 할 일은 db에 있는 모든 데이터 찾아서 불러오기 뿐. 콜렉션 이름에 주의. find는 조건없음{},_id값 없이 불러오기!
    articles = list(db.articles.find({}, {'_id': False}))
    return jsonify({'result': 'success', 'articles': articles})

🎈 CSS

#모달 (팝업창)

 .modal {
        display: none;
        height: 100vh;
        position: fixed;
        top: 0;
        width: 100%;
    }

    .modal__bg {
        background: rgba(0, 0, 0, 0.8);
        height: 100vh;
        position: absolute;
        width: 100%;
    }

    .modal__content {
        background: #fff;
        left: 50%;
        padding: 45px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40%;
    }

#모달안의 메모 박스

    #cards-box {
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: space-evenly;
    }

🎈 JS

#슬릭 옵션

        $(function () {
            $('.slider').slick({
                dots: true,  //下の丸ぽっち（インジケーター）を表示 아래 동그라미 버튼
                autoplay: true,  //自動再生 자동재생
                autoplaySpeed: 5000,  //自動再生の速度 자동재생 속도
                arrows: true,  //左右矢印を表示する 양 옆에 화살표 붙이기
                slidesToShow: 3,  //スライダーの表示数 보여줄 슬라이드 수
                {#slidesToScroll: 2,#}
            });
        });

🎈슬릭 참고 사이트
https://kenwheeler.github.io/slick/

https://mckee-pro.com/%E3%80%90slick%E3%80%91

#모달 버튼 클릭하면 표시되고 엑스 버튼이나 바깥쪽 누르면 사라지게 하기

    $(function () {
        $('#js-modal-open').on('click', function () {
            $('.js-modal').fadeIn();
            return false;
        });
        $('.js-modal-close').on('click', function () {
            $('.js-modal').fadeOut();
            return false;
        });
    });

#모달안의 메모 박스 작성 및 데이터베이스에 저장하기

    function postArticle() {
        // jQuery로 데이터 가져오기 input 코드의 id와 textarea(코멘트)의 id를 붙여 넣고 변수에 넣어주기
        let title = $('#post-title').val();
        let comment = $('#post-comment').val();

        if (title == "") {
            alert("제목을 입력해 주세요");
            $("#post-title").focus();
            return;
        } else if (comment == "") {
            alert("코멘트를 입력해 주세요");
            $("#post-comment").focus();
            return;

        }

        $.ajax({
            type: "POST",
            url: "/memo",
            data: {title_give: title, comment_give: comment},
            success: function (response) { // 성공하면
                if (response["result"] == "success") {
                    alert(response["msg"]);
                    window.location.reload();
                    // 위의 함수가 다 실행된 후에 자동 새로고침 하기 코드
                }
            }
        })
    }

#모달안에서 작성한 모달창 밑의 화면에 불러오기

function showArticles() {
           $.ajax({
               type: "GET",
               url: "/memo",
               data: {},
               success: function (response) {
                   if (response["result"] == "success") {
                       let articles = response['articles']
                       console.log(articles);
                       // 서버의 return jsonify({'result': 'success', 'articles': articles})에 'articles'키 값을 던져주기
                       for (let i = 0; i < articles.length; i++) {
                           let title = articles[i]['title'];
                           let comment = articles[i]['comment'];
                           makeCard(title, comment)
                           // 밑에 있는 function makeCard() 함수에 불려서 카드 붙여주기가 실행됨
                       }
                   }
               }
           })
       }

    function makeCard(title, comment) {
        let temp_html = `  <div class="card">
                                            <div class="card-body">
                                                <a class="card-title" style="color: darkslateblue; font-size: 18px">${title}</a>
                                                <p class="card-text comment">${comment}</p>
                                            </div>
                                        </div>`
        $('#cards-box').append(temp_html);
    }

Doing..

・　 localStorage 알아보기 (구글링,동영상)
・　 이것 저것 즐겨찾기 코드 넣어보기
・　 도쿄 관광 공식사이트 코드 확인해보기

What to do

1. 클릭했을 때 북마크 추가 및 해제 여부 바로 뜨는 것 (그 자리에서 북마크 색깔이 클릭 여하에 따라 바로 바로 바뀜)
2. 회원가입/로그인 없이 각각의 유저가 자신만의 북마크를 구현
3. 매칭 결과에서 북마크를 클릭하면 Mytripbox의 페이지의 slick을 이용한 슬라이드에 자동 이동 저장시키기
4. Mytripbox의 페이지의 메모를 각각의 유저가 자신만의 메모로 저장할 수 있게 구현