웹개발 4주차 (2)

순서 

1. 데이터 명세

2. 클라이언트와 서버 확인하기

3. 서버부터 만들기

4. 클라이언트 만들기

5. 완성 확인하기

 

여기서 서버 먼저 만드는 게 중요

 

이제 뭔가 이해가 된다

 

html 

function posting() {

            let url = $('#url').val()

            let comment = $('#comment').val()

            let star = $('#star').val()

            let formData = new FormData()

            formData.append('url_give', url)

            formData.append('comment_give', comment)

            formData.append('star_give', star)

            fetch('/movie', { method: "POST", body: formData }).then(res => res.json()).then(data => {

                alert(data['msg'])

                window.location.reload()

            })

        }

프론트엔드에서 자료를 차곡차곡 모아서 백엔드(서버)로 보내줌.

어떻게??

위에 있는 함수를 가지고 설명하면 

변수들을 val로 문자열로 바꿔줌.

그 상태에서 데이터를 모아서 py로 보내줌.

 

py

@app.route("/movie", methods=["POST"])

def movie_post():

    url_receive = request.form['url_give']

    comment_receive = request.form['comment_give']

    star_receive = request.form['star_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')

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

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

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

    doc = {

        'image':ogimage,

        'title':ogtitle,

        'desc':ogdesc,

        'comment':comment_receive,

        'star':star_receive

    }

    db.movies.insert_one(doc)

    return jsonify({'msg':'포스팅 완료!'})

보내주면 ..._receive 들이 받아주고 그 받은 데이터들을

내가 입맛에 맞게 조절하는 거

크롤링도 들어갔는데 BeautifulSoup 이걸로 된거임.

그래서 soup.select_one 으로 내가 설정한 변수들에다가 넣어주고

그 변수들을 document로 해놓고

mongodb에 넣어줌.

그러고 난 다음 브라우저에 포스팅 완료라는 메시지가 뜰거임.

 

  fetch('/movie', { method: "POST", body: formData }).then(res => res.json()).then(data => {

                alert(data['msg'])

                window.location.reload()

 

 그런데 마지막으로 여기 fetch로 서버에서 html로 연결해서

data의 msg가 여기로 뜨는거임.

 

 

그 다음 클라이언트

 

html

function listing() {

            fetch('/movie').then((res) => res.json()).then((data) => {

                let rows = data ['result']

                $('#cards-box').empty()

                rows.forEach((a)=>{

                    let comment = a['comment']

                    let title = a['title']

                    let desc = a['desc']

                    let image = a['image']

                    let star = a['star']

                    let star_repeat = '⭐'.repeat(star)

                    let temp_html = `<div class="col">

                                        <div class="card h-100">

                                            <img src="${image}"

                                                class="card-img-top">

                                            <div class="card-body">

                                                <h5 class="card-title">${title}</h5>

                                                <p class="card-text">${desc}</p>

                                                <p>${star_repeat}</p>

                                                <p class="mycomment">${comment}</p>

                                            </div>

                                        </div>

                                    </div>`

                    $('#cards-box').append(temp_html)

                })

            })

        }

이 저장한 걸 보여주는 건 이해하는 데 어려움이 없음.

밑에 서버에서 result 값을 all_movies 라고 정해주면 

console 로 확인

그러고 확인했을 때 리스트로 뜨면 아 이거 반복문으로 돌려주고싶다.

생각하면 굿

그전에 기존에 있던 cards-box들 다 없애주고

그리고 변수들 잡아줌.

그러고 

사용자가 원하는 이미지, 제목, 설명 이런 거 넣을 수 있도록 함.

 

 

py

@app.route("/movie", methods=["GET"])

def movie_get():

    all_movies = list(db.movies.find({},{'_id':False}))

    return jsonify({'result':all_movies})

 

결론

 

이제는 뭔가 알 거 같은데

내가 뭔가를 만들라고 하면 힘들 거 같다.

그래도 알아 가는 거 같아서 

뭐 괜춘