4. 코드 작성 (언어 : Python, DB : MongoDB)💻
4.1 식물 리뷰 페이지 (리뷰 등록, 리뷰 조회, 리뷰 삭제)✍
- 리뷰 등록 하기⭐️
- client에서 요청
- 서버에서 받음
- db에 저장
- 서버에서 응답
1. client에서 요청하기📢
식물 이름과 리뷰는 input에 입력되는 값을 받아오고, 사진은 업로드 된 파일을 받아온다.
function posting() {
let name = $('#name').val()
let review = $("#review").val()
let file = $('#file')[0].files[0]파일을 보낼 때는 form_data에 실어서 보낸다.
let form_data = new FormData()
form_data.append("file_give", file)
form_data.append("name_give", name)
form_data.append("review_give", review)데이터를 등록하는 것이기 때문에 Post로 요청하고, 서버로부터 응답이 왔을 시 "msg"(메세지)를 띄워준다.
$.ajax({
type: "POST",
url: "/api/reg",
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}2. 서버에서 받기 📥
파일을 받을 때는 request 뒤에 .files를 붙여준다.
@app.route('/api/reg', methods=['POST'])
def save_reg():
name_receive = request.form['name_give']
review_receive = request.form['review_give']
file = request.files["file_give"]파일을 db에 저장할 때 파일이름 및 확장자 설정해 준다.
// 1. 확장자 설정
extension = file.filename.split('.')[-1]
// 2. 파일 이름 설정 (업로드 했을 때 시간)
today = datetime.now()
mytime = today.strftime('%Y-%m-%d-%H-%M-%S')
filename = f'file-{mytime}'
// 3. 설정한 파일 이름과 확장자 붙이기
save_to = f'static/{filename}.{extension}'
file.save(save_to)3. db에 저장하기 💾
db에 저장될 테이블과 어떤 데이터를 저장시킬지 설정해 주고, db에 저장시킨다.
doc = {
'name': name_receive,
'review': review_receive,
'file': f'{filename}.{extension}'
}
db.pet_plant.insert_one(doc)4. 서버 응답하기 📤
저장이 완료되면 client에게 'msg'를 보내준다.
return jsonify({'msg': '저장을 완료하였습니다.'})- 리뷰 조회 하기🧭
- client에서 요청
- 서버에서 처리
- client에서 보여주기
1. client에서 요청하기 📢
저장되어 있는 자료를 요청하는 것이기 때문에 Get으로 요청한다.
function listing() {
$.ajax({
type: "GET",
url: "/api/reg",
data: {},2. 서버에서 처리하기 📥📤
client로 부터 받은 Get 요청을 받으면 db에서 데이터를 찾은 후 다시 client에게 보내준다.
@app.route('/api/reg', methods=['GET'])
def show_reg():
plant = list(db.pet_plant.find({}, {'_id': False}))
return jsonify({'all_plants': plant})3. client에서 보여주기 📖
서버로부터 응답을 받으면 서버에서 넘어온 모든 데이터를 리뷰 페이지에 붙여준다.
success: function (response) {
let plant = response['all_plants']
for (let i = 0; i < plant.length; i ++) {
let name = plant[i]['name']
let review = plant[i]['review']
let file = plant[i]['file']
let temp_html = `<div class="reg_table">
<div style="border-right: solid lightgray"><img src="../static/${file}"></div>
<div>
<div class="reg_name">${name}</div>
<div class="reg_review">${review}</div>
<button type="button" class="btn btn-link"token interpolation">${name}')">삭제</button>
</div>
</div>`
$('#reg-box').append(temp_html)
}
}
})
}- 리뷰 삭제 하기✂️
- client에서 요청
- 서버에서 받음
- db에서 삭제
1. client에서 요청하기 📢
데이터의 변경을 줘야하기 때문에 Post로 요청하고, 서버로부터 응답이 왔을 시 "msg"(메세지)를 띄워준다.
function deleteReview(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}2. 서버에서 받기 📥
client에서 넘어온 'name_give'에 들어있는 데이터를 받는다.
@app.route('/api/delete', methods=['POST'])
def delete_review():
name_recieve = request.form['name_give']3. db에서 삭제하기 📁
'name_give'에 들어있는 데이터를 db에서 삭제하고, client에게 'msg'를 보내준다.
db.pet_plant.delete_one({'name': name_recieve})
return jsonify({'msg': '삭제가 완료되었습니다.'})
Macro Developer