1. 클라이언트와 서버 연결 확인하기

2. 서버부터 만들기

3. 클라이언트 만들기

4. 완성 확인하기

 

 

1. 클라이언트와 서버 연결 확인하기

/api/list 라는 주소에서 get타입으로 요청을받는 api

sample_give를 받아서 msg라는 메시지를 내려줌

 

index.html에 가보면 showstar라는 함수에서 요청

 

로딩이 되면 자동으로 요청하게 하는 코드
새로고침하면 연결이 잘되어있음을 확인 가능

2. 서버부터 만들기

서버에서 해야할일 ?

Robo 3T에 가지고 갔던 데이터들을 쭉 내려주면 됌

 

 

우선 dbprac을 가지고 온후에 필요한 코드를 복사  (여러개 찾기)

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
 
#insert / find / update / delete
 
# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)
 
# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})
 
# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
same_ages = list(db.users.find({'age':21},{'_id':False}))
 
# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
 
# 지우기 - 예시
db.users.delete_one({'name':'bobby'})
 cs
1. 클라이언트로부터 받을 데이터가 없고 내려주기만 하면 되기 때문에 날려주기
2. dbprac에서 가져온 코드 넣기

3. aaa부분은 내 맘대로 맞춰주기만 하면됌, users부분을 robo3t에서 맞는 파일 위치로 바꿔주고, msg를 내려주는게 아니기 때문에 다른 아무거나로 바꿔줌

 

 

 

※ 위 예시 프로젝트는 like순 내림차순으로 데이터를 내려주어야 하기 때문에 .sort('like', -1) 붙여줌(구글링)

# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
    movie_star = list(db.mystar.find({},{'_id':False}).sort('like', -1))
    return jsonify({'movie_stars': movie_star})
 cs

서버쪽 끝

index.html에서

 function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['monie_stars']
                        console.log(mystars)
 cs

 

response에 movie_stars 잘 들어왔는지 찍어보기

 

for문 쓰고 console.log찍어보기

function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['monie_stars']
                        for (let i = 0; i < mystars.length; i++){
                            let name = mystars[i]['name']
                            let img_url = mystars[i]['img_url']
                            let recent = mystars[i]['recent']
                            let url = mystars[i]['url']
                            let like = mystars[i]['like']
 
                            console.log(name,img_url,recent,url,like)
               
 cs

temp_html로 카드 만들어주기

 

 

function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['movie_stars']
                        for (let i = 0; i < mystars.length; i++){
                            let name = mystars[i]['name']
                            let img_url = mystars[i]['img_url']
                            let recent = mystars[i]['recent']
                            let url = mystars[i]['url']
                            let like = mystars[i]['like']
 
                            let temp_html = `<div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <figure class="image is-48x48">
                                                                <img
                                                                        src="${img_url}"
                                                                        alt="Placeholder image"
                                                                />
                                                            </figure>
                                                        </div>
                                                        <div class="media-content">
                                                            <a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
                                                            <p class="subtitle is-6">${recent}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <footer class="card-footer">
                                                    <a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">
                                                        위로!
                                                        <span class="icon">
                                              <i class="fas fa-thumbs-up"></i>
                                            </span>
                                                    </a>
                                                    <a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger">
                                                        삭제
                                                        <span class="icon">
                                              <i class="fas fa-ban"></i>
                                            </span>
                                                    </a>
                                                </footer>
                                            </div>`
                            $('#star-box').append(temp_html)
                        }
                    }
                });
            }
 cs

이건 필요가 없으니 삭제

<body>
        <section class="hero is-warning">
            <div class="hero-body">
                <div class="container center">
                    <h1 class="title">
                        마이 페이보릿 무비스타😆
                    </h1>
                    <h2 class="subtitle">
                        순위를 매겨봅시다
                    </h2>
                </div>
            </div>
        </section>
        <div class="star-list" id="star-box">
        </div>
    </body>
 cs

 

데이터 바꾸기

오른쪽 클릭

 

'백엔드 > DB만들기 (데이터 쌓기)' 카테고리의 다른 글

DB만들기 (데이터 쌓기) 준비  (0) 2022.06.19

1. 준비

 

크롤링 예시 코드

import requests
from bs4 import BeautifulSoup
 
from pymongo import MongoClient
 
client = MongoClient('localhost', 27017)
db = client.dbsparta
 
 
# DB에 저장할 영화인들의 출처 url을 가져옵니다.
def get_urls():
    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('https://movie.naver.com/movie/sdb/rank/rpeople.nhn', headers=headers)
 
    soup = BeautifulSoup(data.text, 'html.parser')
 
    trs = soup.select('#old_content > table > tbody > tr')
 
    urls = []
    for tr in trs:
        a = tr.select_one('td.title > a')
        if a is not None:
            base_url = 'https://movie.naver.com/'
            url = base_url + a['href']
            urls.append(url)
 
    return urls
 
 
# 출처 url로부터 영화인들의 사진, 이름, 최근작 정보를 가져오고 mystar 콜렉션에 저장합니다.
def insert_star(url):
    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')
 
    name = soup.select_one('#content > div.article > div.mv_info_area > div.mv_info.character > h3 > a').text
    img_url = soup.select_one('#content > div.article > div.mv_info_area > div.poster > img')['src']
    recent_work = soup.select_one(
        '#content > div.article > div.mv_info_area > div.mv_info.character > dl > dd > a:nth-child(1)').text
 
    doc = {
        'name': name,
        'img_url': img_url,
        'recent': recent_work,
        'url': url,
        'like': 0
    }
 
    db.mystar.insert_one(doc)
    print('완료!', name)
 
 
# 기존 mystar 콜렉션을 삭제하고, 출처 url들을 가져온 후, 크롤링하여 DB에 저장합니다.
def insert_all():
    db.mystar.drop()  # mystar 콜렉션을 모두 지워줍니다.
    urls = get_urls()
    for url in urls:
        insert_star(url)
 
 
### 실행하기
insert_all()
 cs

파일명은 상관없음
RUN을 해보면 크롤링이 되는걸 확인 가능

Robo3T로 가서 자료들이 DB에 데이터들이 잘 들어갔는지 확인

 

2. 뼈대 준비

 

app.py와 index.html 파일 세팅

templates 안에 index.html

index.html 예시 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>마이 페이보릿 무비스타 | 프론트-백엔드 연결 마지막 예제!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"/>
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
        <style>
            .center {
                text-align: center;
            }
 
            .star-list {
                width: 500px;
                margin: 20px auto 0 auto;
            }
 
            .star-name {
                display: inline-block;
            }
 
            .star-name:hover {
                text-decoration: underline;
            }
 
            .card {
                margin-bottom: 15px;
            }
        </style>
        <script>
            $(document).ready(function () {
                showStar();
            });
 
            function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
            }
 
            function likeStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/like',
                    data: {sample_give:'샘플데이터'},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
            }
 
            function deleteStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/delete',
                    data: {sample_give:'샘플데이터'},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
            }
 
        </script>
    </head>
    <body>
        <section class="hero is-warning">
            <div class="hero-body">
                <div class="container center">
                    <h1 class="title">
                        마이 페이보릿 무비스타😆
                    </h1>
                    <h2 class="subtitle">
                        순위를 매겨봅시다
                    </h2>
                </div>
            </div>
        </section>
        <div class="star-list" id="star-box">
            <div class="card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <img
                                        src="https://search.pstatic.net/common/?src=https%3A%2F%2Fssl.pstatic.net%2Fsstatic%2Fpeople%2Fportrait%2F201807%2F20180731143610623-6213324.jpg&type=u120_150&quality=95"
                                        alt="Placeholder image"
                                />
                            </figure>
                        </div>
                        <div class="media-content">
                            <a href="#" target="_blank" class="star-name title is-4">김다미 (좋아요: 3)</a>
                            <p class="subtitle is-6">안녕, 나의 소울메이트(가제)</p>
                        </div>
                    </div>
                </div>
                <footer class="card-footer">
                    <a href="#" onclick="likeStar('김다미')" class="card-footer-item has-text-info">
                        위로!
                        <span class="icon">
              <i class="fas fa-thumbs-up"></i>
            </span>
                    </a>
                    <a href="#" onclick="deleteStar('김다미')" class="card-footer-item has-text-danger">
                        삭제
                        <span class="icon">
              <i class="fas fa-ban"></i>
            </span>
                    </a>
                </footer>
            </div>
        </div>
    </body>
</html>
 cs

 

app.py 예시 코드

from pymongo import MongoClient
 
from flask import Flask, render_template, jsonify, request
 
app = Flask(__name__)
 
client = MongoClient('localhost', 27017)
db = client.dbsparta
 
 
# HTML 화면 보여주기
@app.route('/')
def home():
    return render_template('index.html')
 
 
# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg': 'list 연결되었습니다!'})
 
 
@app.route('/api/like', methods=['POST'])
def like_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'like 연결되었습니다!'})
 
 
@app.route('/api/delete', methods=['POST'])
def delete_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'delete 연결되었습니다!'})
 
 
if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
 cs

 

localhost:5000으로 확인

'백엔드 > DB만들기 (데이터 쌓기)' 카테고리의 다른 글

get 연습  (0) 2022.06.19

+ Recent posts

티스토리툴바