[강의] 웹개발 종합반 4주차

Flask라는 패키지를 다운받고 시작함.

파이썬을 이용해서 API를 만들 수 있도록 해주는 패키지인듯

 

너무너무 반복중이지만

데이터 전달 하는 GET과 POST의 차이 -> 쿼리로, 데이터 조회 vs key:value형태로, 생성, 변경, 삭제

 

meta tag : 

html파일 head안에 들어있음

카카오톡 공유 등에 간략화 해서 앞에서 보이게 공유될 수 있도록 적어놓음

라잌 디스 이거 재밌으니 한번씩 보세요

 

<모두의 책리뷰>

제목 저자 리뷰 받아서 POST로 보낸다. (html)

POST로 받은 값을 데이터 형식으로 만들어 db에 저장한다.(py)

 

지금까지 저장한 모든 데이터들을 GET으로 조회하여 웹 페이지에 보이게한다.

db에 저장된 모든 값을 list로 받아서 GET으로 전달한다.(py)

받아서 그 데이터에 있는 값들을 하나 하나 꺼내 형식에 맞춰 붙여준다.(html)

이걸 웹 페이지 로딩 때마다 한다.

 

<나홀로 메모장>

네이버 영화 사이트 url과 코멘트를 입력받아 POST로 보낸다. (html)

POST로 값을 받고, 받은 url을 크롤링하여 데이터 형식으로 만들어 db에 저장한다.(py)

 

지금까지 저장한 모든 데이터들을 GET으로 조회하여 웹 페이지에 보이게한다.

db에 저장된 모든 값을 list로 받아서 GET으로 전달한다.(py)

받아서 그 데이터에 있는 값들을 하나 하나 꺼내 카드 값으로 넣고 붙여준다.(html)

이걸 웹 페이지 로딩 때마다 한다.

이렇게 입력한 것마다 붙는다.

저번에 하던 그 진 맞음 그거 발전시킨 것

약간 이전 크롤링 + 이번 서버까지 합쳐진 코드였기에 첨부해본다.

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

            function postArticle() {
                let url = $('#post-url').val()
                let comment = $('#post-comment').val()

                $.ajax({
                    type: "POST",
                    url: "/memo",
                    data: {url_give : url, comment_give : comment},
                    success: function (response) { // 성공하면
                        alert(response["msg"]);
                        window.location.reload()
                    }
                })
            }

            function showArticles() {
                $.ajax({
                    type: "GET",
                    url: "/memo",
                    data: {},
                    success: function (response) {
                        let articles = response['all_articles']
                        for(let i = 0 ; i < articles.length ; i++){
                            let title = articles[i]['title']
                            let image = articles[i]['image']
                            let url = articles[i]['url']
                            let desc = articles[i]['desc']
                            let comment = articles[i]['comment']

                            let temp_html = `<div class="card">
                                                <img class="card-img-top" src="${image}" alt="Card image cap">
                                                <div class="card-body">
                                                    <a target="_blank" href="${url}" class="card-title">${title}</a>
                                                    <p class="card-text">${desc}</p>
                                                    <p class="card-text comment">${comment}</p>
                                                </div>
                                            </div>`
                            $('#cards-box').append(temp_html)
                        }
                    }
                })
            }

@app.route('/memo', methods=['GET'])
def listing():
    articles = list(db.articles.find({}, {'_id' : False}))
    return jsonify({'all_articles': articles})

## API 역할을 하는 부분
@app.route('/memo', methods=['POST'])
def saving():

    comment_receive = request.form['comment_give']

    url_receive = request.form['url_give']

    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url_receive, headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')

    title = soup.select_one('meta[property="og:title"]')['content']
    image = soup.select_one('meta[property="og:image"]')['content']
    desc = soup.select_one('meta[property="og:description"]')['content']

    doc = {
            'title' : title,
            'image' : image,
            'desc' : desc,
            'url': url_receive,
            'comment': comment_receive
    }
    db.articles.insert_one(doc)

    return jsonify({'msg':'저장이 완료되었습니다.'})

DB의 모습

 

<과제 : 또 양초>

위와 방법은 같았따.