[강의] 스파르타 코딩클럽 웹개발 풀스택 5주차_버킷리스트

5주차 학습내용: flask를 이용한 서버 만들기

1. AWS 가입

2. 가상환경 설정

3. POST
   1) API 만들고 사용하기 - 버킷리스트 기록 API(Create->POST)
   2) 데이터 명세
   3) 클라이언트와 서버 연결 확인하기
   4) 서버부터 만들기
   입력받은 것을 DB에 저장하는 것

   app.py(pymongo 연결 및 저장)

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.safzmwr.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    doc = {
        'bucket' : bucket_receive
    }
    db.bucket.insert_one(doc)
    return jsonify({'msg': 'POST 연결 완료!'})

5) 클라이언트 만들기

index.html

function save_bucket() {
        let bucket = $('#bucket').val()

        let formData = new FormData();
        formData.append("bucket_give", bucket);

6) 완성 확인하기 

몽고DB 저장된 화면

4. GET
   로딩이 완료되면 화면에 붙여서 출력하게 해주자
   1) API만들고 사용하기 - 버킷리스트 조회 API
   2) 서버 만들기
   

@app.route("/bucket", methods=["GET"])
def bucket_get():
    all_buckets = list(db.bucket.find({},{'_id':False}))
    return jsonify({'result': all_buckets})

ㅇ
3) 클라이언트 만들기

function show_bucket() {
	fetch('/bucket').then(res => res.json()).then(data => {
    	let rows = data['result']
        $('#bucket-list').empty()
        rows.forEach((a)=>{
        	let bucket = a['bucket']
            let temp_html = `<li>
            					<h2>✅ ${bucket}</h2>
                             </li>`
            $('#bucket-list').append(temp_html)
        })
    })
}

/
4) 완성 확인하기