하루에 한번씩 적으려고 했던 TIL이 해결하지 못한 문제 때문에 하루 밀리게 되었다.
2일차 3일차에는 python을 이용한 서버 구축과 C(create)R(read)U(update)D(delete) 그리고 메인페이지 작업을 진행했다.
일단 현재까지 진행 된 프론트엔드 레이아웃과 디자인이다. 팀원들과 이야기하며 조금 더 수정해 나갈 예정이다.
메인페이지에서는 CRUD를 구축하지 않고 상세페이지에서 구축하기 위해서 작업을 진행했다.
POST 사용(데이터 저장하기)
@app.route("/dbucket", methods=["post"])
def d_bucket_post():
bucket_receive = request.form['bucket_give']
comment_list = list(db.teambucket.find({},{'_id':False}))
count = len(comment_list) + 1
doc={
'bucket': bucket_receive,
'num': count
}
db.teambucket.insert_one(doc)
return jsonify({'msg': '기록 완료!'})코드를 입력하세요첫번째, 버킷리스트에 글을 써서 mongodb에 저장하는 api
POST문을 이용해서 입력되는 글에 대해서 list 형식으로 mongodb 데이터 베이스로 보낸다.
넘어가는 데이터는 버킷리스트로 작성된 한줄이면 충분하지만
num 값을 부여해주면서 추후 DELET에 사용할 수 있게 변수를 지정해주었다.
function save_bucket() {
let bucket = $('#bucket').val();
let num = $('#num').val();
let formData = new FormData();
formData.append("bucket_give", bucket);
formData.append("num_give", num);
fetch('/dbucket', { method: "post", body: formData, }).then((res) => res.json()).then((data) => {
alert(data["msg"])
window.location.reload();
});
}JSP도 json을 통해서 서버에 데이터를 보내줄 수 있게 구축했다.
웹 프론트에서 입력되는 글을 bucket에 담아서 서버로 보내주는데
보내주는 과정에서 num_give를 통해서 변수 값이 자동 부여되어 넘어가게 된다.(변수인 num은 데이터를 삭제할때 필요하다.)
넘어가는 데이터의 num 값은 1씩 상승한다.
데이터를 입력하고 기록하기 버튼을 누르면 기록완료라고 나오고 데이터는 서버에 저장된다.
기록완료!라고 정상적으로 작동한다.
글을 작성함과 동시에 하단에 저장된 데이터를 불러와서 어떤 버킷리스트를 작성하였는지 확인 할 수 있게끔 만들어야한다.
@app.route("/dbucket", methods=["GET"])
def d_bucket_get():
all_bucket = list(db.teambucket.find({},{'_id':False}))
return jsonify({'result': all_bucket})이 부분이 정말 어려웠다. 같은 팀원들과 함께 꼬박 하루를 걸려서 만들어 냈던것 같다. 우리 프로젝트 팀장님이 아니었다면 아마 글을 쓰는 이 순간에도 방법을 찾고 있었을것이다.(개발자 인생에 처음 큰 벽을 만났다,)
function show_bucket() {
$.ajax({
type: 'GET',
url: '/dbucket',
data: {},
success: function (response) {
let rows = response['result']
$('#bucketlist').empty();
for (let i = 0; i < rows.length; i++) {
let bucket = rows[i]['bucket']
let num = rows[i]['num']
let temp_html = ` <div class="bucketprame" id="bucketlist">
<div class="bucketcard">
<div class="bucketcomment">
<div>
<tr>
<td>${bucket}</td>
<td><button class="del" onclick="delete_bucket(${num})" type="button">삭제</button></td>
</tr>
</div>
</div>
<div>
</div>`
$('#bucketlist').append(temp_html)
}
}
})
}ajax 콜백 함수를 사용했다.
GET API를 통해서 mongodb의 bucket 값만 가져오고 num 값은 삭제 버튼에 부여가 되어야한다.하지만 이때 변수 값은 표시되지 않게끔 만들어야했다.(그래야 깔끔하니까)
mogodb에 저장된 리스트 중에 bucket으로 입력된 내용만 표시가 되고, 프론트페이지에서는 보이지 않지만 첫번째 적었던 글은 1번, 두번째 적은 글은 2번의 num 값이 부여됐다
function delete_bucket(num) {
if (confirm("삭제 하시겠습니까?")) {
$.ajax({
type: 'POST',
url: '/dbucket/delete',
data:{
'delete_give' : num
},
success: function (response) {
alert(response['msg']);
window.location.reload();
}
});
}
}@app.route('/dbucket/delete', methods=['post'])
def d_bucket_delete():
delete_receive = request.form['delete_give']
db.teambucket.delete_one({'num': int(delete_receive)})
return jsonify({'msg':'삭제 완료!'})post함수를 이용해서 삭제버튼을 구현했다.
삭제 버튼을 누르면 삭제하시겠습니까라는 컨펌박스가 나오고 확인을 누르면 삭제 완료! 라는 알림과 함께 웹 프론트와 mongodb의 데이터 값이 삭제 되는것을 확인 할 수 있다.
이상 POST GET DELETE를 사용한 CR(U)D 구현 완료~
