Python Flask, Ajax 활용 예제 - 링크 따오기

개인 미니 프로젝트 제작 기록 & 복습 용

 

링크 가져오면, 좋아요, 삭제, 댓글, 댓글수 버튼을 함께 가져오는 부분 예제.

각각의 기능들은 따로 따로 구현해야함.

밑의 HTML과 PYTHON은 링크를 단순하게 가져오는 크롤링과 그것을 HTML에 어떻게 적용하느냐는 예제

 

[ HTML ]

        function showArticles(url) {
            $.ajax({
                type: "GET",
                url: "/memo",
                data: {},
                success: function (response) {
                    let list = response['list_receive']
                    for (let i = 0; i < list.length; i++) {
                        let title = list[i]['title']
                        let img = list[i]['img']
                        let url = list[i]['url']
                        let comment = list[i]['comment']
                        let like = list[i]['like']
                        let counter = list[i]['counter']

                        let temp_html = `
                             <div class="card" style="">
                    <img class="card-img-top"
                         src="${img}"
                         alt="Card image cap">
                    <div class="card-body">
                        <a target="_blank" href="${url}" class="card-title">${title}</a>
                        <p class="card-text">${comment}</p>

                        <div style="width:500px;">
                        <button type="button" class="btn btn-info" onclick="likeStar('${url}')" style="width:50px;">👍${like}</button>
                        <button type="button" class="btn btn-light" id="${url}_save" onclick="show90('${url}')" style="width:100px;">댓글 <span style = "color:red;">${counter} 개</span></button>
                        <button type="button" class="btn btn-dark" id="${url}_bts"  onclick="openClose2('${url}')" style="width:100px;">댓글 작성</button>
                        <button type="button" class="btn btn-danger" onclick="deleteStar('${url}')" style="width:50px;">삭제</button>
                        </div>

           <div id="${url}" class="form-post" style="display:none; margin-top:10px; margin-bottom:10px;">
            <div class="form-group">
                <label for="post-url">이름</label>
                <input class="form-control" placeholder="" id="${url}_name" style="width:70px;"></div>
            <div class="form-group">
                <label for="post-comment">댓글</label>
                <input class="form-control" rows="2" id="${url}_rev"></div>
            <button type="button" class="btn btn-primary" onclick="makeReview('${url}')")>댓글 저장</button>
           </div>

                  <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">이름</th>
                        <th scope="col">댓글</th>
                    </tr>
                    </thead>
                  <tbody id="${url}_box" class="9999">

                  </tbody>
                </table>
                      `
                        $('#cards-box').append(temp_html)
                    }
                }
            })
        }

GET으로 요청하여 가지고 온다.

list를 for(반복문)으로 돌린다.

 

여기서 중요한 것은 각각 Ajax에서 가져온 값을 $(url) 이런식으로 각각 붙여줄 수 있다는 것.

각각 가져온 $(url)은 나중에 다른 기능을 쓸 때 사용해 준다.

 

[Python]

@app.route('/memo', methods=['POST'])
def saving():
    url = 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, headers=headers)

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

    thumbnail = soup.select_one('meta[property="og:image"]')['content']
    title = soup.select_one('meta[property="og:title"]')['content']
    url = soup.select_one('meta[property="og:url"]')['content']
    comment_give = request.form['comment_give']

    doc = {'title' : title, 'img' : thumbnail, 'url': url, 'comment': comment_give, 'like' : 0, 'counter' : 0}
	
    ## counter은 댓글 수
    
    db.youtubes.insert_one(doc)

    return jsonify({'msg':'저장 완료!'})