TWIL_스파르타코딩 웹개발 플러스 1주차

웹개발 종합반 듣고 좀 쉬다가 플러스 수강
학습이 기본적으로 코드를 복붙하는 방식이지만 그래도 대충 기억은 나서 다행...

1 서버-클라이언트 연결

서버 쪽 (app.py) 데이터 전부 조회

@app.route('/부르는 주소', methods=['GET'])
def ... ():
    data = list(db.데이터베이스명.find({}, {'_id': False}))
    return jsonify({'all_data': data})

조회한 데이터를 반복문을 통해 클라이언트(index.html)에 붙여넣음

function listing() {
	$.ajax({
		type: "GET",
		url: "/부르는 주소",
		data: {},
		success: function (response) {
			let data = response['all_data']

			for (let i = 0 ; i<data.length ; i++) {
				let var1 = data[i]['데이터 저장할 때 쓴 이름']
				...

				let temp_html = ` ... ${var1} ...`

				$('#붙일 곳 id').append(temp_html)
			}
		}
	})
}

페이지를 켤 때 실행

$(document).ready(function () {
	listing()
})

2 데이터 저장

클라이언트에서 데이터 저장을 하니 이번엔 index.html 부터
이미지를 ajax로 업로드 하는 경우는 FormData()가 필요하다고 한다

function posting() {
	let title = $('#title').val()
	let content = $("#content").val()
	let file = $('#file')[0].files[0]
	let form_data = new FormData()

	form_data.append("title_give", title)
	form_data.append("content_give", content)
	form_data.append("file_give", file)

	$.ajax({
		type: "POST",
		url: "/diary",
		data: form_data,
		cache: false,
		contentType: false,
		processData: false,
		success: function (response) {
			alert(response["msg"])
			window.location.reload()
		}
	});
}

각 값을 받아 db에 저장
이미지는 이름 충돌을 막기 위해 업로드 시간을 파일명으로 사용

@app.route('/diary', methods=['POST'])
def save_diary():
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']
    file = request.files["file_give"]
    
    extension = file.filename.split('.')[-1]

    today = datetime.now()
    mytime = today.strftime("%Y-%m-%d_%H-%M-%S")
    mydate = today.strftime("%Y. %m. %d.")

    filename = f'file-{mytime}'

    save_to = f'static/{filename}.{extension}'
    file.save(save_to)

    doc = {
        'title': title_receive,
        'content': content_receive,
        'file': f'{filename}.{extension}',
        'date': mydate
    }

    db.diary.insert_one(doc)

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

3 기타

파이썬에서 f를 문자열 '' 앞에 두면 문자열과 변수 값의 결합을 + 로 할 필요 없이
f'...{변수명}...' 으로 출력 가능