5월 8일 내일배움캠프(스파르타 코딩클럽) 미니 팀과제 1일차 시작
팀과제 내용
개인 사용자간 영화 추천 서비스 제작
기능
1. 관람평 등록 기능
index.html : body 데이터 입력
index.html : save 버튼 실행 ▶ 입력된 데이터 post방식으로 app.py로 전송
app.py 백엔드 : post 방식으로 받아서, mongdb에 저장됨
2. 관람평 출력 기능
mongdb에 모든 데이터 ▶ get 방식으로 app.py로 가지고 옴 ▶json방식으로 index.html로 보낸 후 출력함
app.py 백엔드
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.rsr8xyc.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/test", methods=["post"])
def test_post():
id_receive = request.form['id_give']
comment_receive = request.form['comment_give']
doc = {
'id': id_receive,
'comment' : comment_receive
}
db.comment.insert_one(doc)
return jsonify({'msg': '저장완료'})
@app.route("/mars", methods=["GET"])
def web_mars_get():
comment_data = list(db.comment.find({},{'_id':False}))
return jsonify({'result': comment_data})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
index.html 프론트 엔드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Document</title>
<script>
$(document).ready(function () {
show_order();
});
function show_order() {
fetch("/mars").then(res => res.json()).then(data => {
let rows = data['result']
rows.forEach((a) => {
let name = a['id']
let comment = a['comment']
let temp_html = `<p>ID : ${name} ---------- 관람평 : ${comment}</p>`
$('#page').append(temp_html)
})
})
}
function save() {
let id = $('#id').val()
let comment = $('#comment').val()
let formData = new FormData()
formData.append("id_give", id)
formData.append("comment_give", comment)
fetch("/test", { method: "post", body: formData }).then(res => res.json()).then(data => {
alert(data['msg'])})
}
</script>
</head>
<body>
<form method="get">
<label for="id">아이디 : </label>
<input type="text" id="id" name="id">
<label for="comment">관람평 : </label>
<input type="text" id="comment" name="comment"><br>
<button onclick="save()">등록</button>
</form>
<p id = "page">
</p>
</body>
</html>
'내일배움캠프 미니프로젝트1 > 미니 프로젝트 개발일지' 카테고리의 다른 글
| 5월 12일 미니 팀과제 5일차 마지막 (1) | 2023.05.12 |
|---|---|
| 5월 10일 미니 팀과제 3일차 최종점검파일 (1) | 2023.05.11 |
| 5월 9일 미니 팀과제 2일차 (0) | 2023.05.09 |
댓글