미니프로젝트(3) - db에서 데이터 가져와서 보여주기

app.py 폴더를 만들었다.

db에 데이터를 저장하기 위해 만든 파일에서 진행했으면 좋았을 것 같지만 헷갈리니 그냥 새로운 파일을 만들었다.

 

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('mongodb url')

db = client.dbsparta

@app.route('/')

def home():

    return render_template('index.html')

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

def mars_get():

    music_data = list(db.music.find({},{'_id':False}))

    return jsonify({'result':music_data})

if __name__ == '__main__':

    app.run('0.0.0.0', port=5000, debug=True)

백엔드 서버를 만들어주고, 저장한 db파일을 가져와야 해서 pymongo도 연결 해주었다.

@app.route('/')

def home():

    return render_template('index.html')

html도 가져와줌!

 

 

 

 

 

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

def mars_get():

    music_data = list(db.music.find({},{'_id':False}))

    return jsonify({'result':music_data})

db에서 music안에 들어있는 리스트들을 music_data 라는 통에 담고, 그것을 result라는 값으로 html에 보낸다.

 

 

 

 

 

 

 

 

 

<script>

        $(document).ready(function () {

            show_order();

        });

        function show_order() {

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

                let rows = data['result']

                $('.card').empty()

                rows.forEach((a)=>{

                    let title = a['title']

                    let rank = a['rank']

                    let artist = a['artist']

                    let temp_html = `<div class="card-body">

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

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

                                    </div>`

                    $('.card').append(temp_html)

                })

            })

        }

    </script>

 

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

                let rows = data['result']

받아온 데이터 result를 한 개씩 돌면서 출력하고 변수 rows에 담는다.

데이터를 한 개씩 뽑는데 그 중에서도 필요한 정보인 title, rank, artist만 가져오고

$('.card').empty()

                rows.forEach((a)=>{

                    let title = a['title']

                    let rank = a['rank']

                    let artist = a['artist']

                    let temp_html = `<div class="card-body">

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

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

                                    </div>`

                     $('.card').append(temp_html)

'card'라는 곳(자리)에 temp_html ``의 형식으로 차곡차곡 붙일것이다.

 

$('.card').empty()

새로운 데이터만 붙도록 기존의 데이터는 깔끔하게 지워주기.

 

 

 

 

 

 

 

css로 글자를 가운데 정렬하여 위와 같이 간단하게 크롤링해 붙여보았다.

끄읕~~~~~~~~~~~~