팀원들이랑 기능 추가 연습을 했다.
- 버킷리스트 페이지에 취소 버튼 추가하기
: done 값을 다시 0으로 되돌려준다
function cancel_bucket(num) {
$.ajax({
type: "POST",
url: "/bucket/cancel",
data: {num_give:num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}@app.route("/bucket/cancel", methods=["POST"])
def bucket_cancel():
num_receive = request.form['num_give']
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 0}})
return jsonify({'msg': '취소 완료!'})- 버킷리스트 페이지에 수정 기능 추가하기
: 수정할 수 있는 input 박스와 버튼을 추가하고, db에 업데이트 해준다
=> 수정을 누르면 기존 버킷리스트를 숨기고 input 박스가 뜨게 만들고 싶었는데, 코드를 많이 수정해야할 것 같아서 일단 버킷리스트 입력 박스를 대체하는 식으로 작성했다. 다시 짜보기!
function ammend_bucket(num) {
let temp_html = `<li class="ammend-bucket">
<tr>
<input id="ammend-bucket" class="form-control form-control-sm" type="text" placeholder="enter" aria-label=".form-control-sm example">
<buttontoken interpolation">${num})" type="button" class="btn btn-outline-info">이거얌</button>
</tr>
</li>`
$('#enter_box').replaceWith(temp_html)
} function replace_bucket(num) {
let bucket = $('#ammend-bucket').val()
$.ajax({
type: "POST",
url: "/bucket/ammend",
data: {num_give: num, bucket_give: bucket},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}@app.route("/bucket/ammend", methods=["POST"])
def bucket_ammend():
num_receive = request.form['num_give']
bucket_receive = request.form['bucket_give']
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'bucket': bucket_receive}})
return jsonify({'msg': '수정 완료!'})- 버킷리스트에 지우기 기능 추가하기
: 사실상 가장 간단한 기능이였는데, delete_one() 함수를 사용할때 폴더명 입력하는 걸 깜빡해서 헤맸다.
=> 복붙할땐 항상 꼼꼼히 확인하기,,
function delete_bucket(num) {
$.ajax({
type: "POST",
url: "/bucket/delete",
data: {num_give:num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}@app.route("/bucket/delete", methods=["POST"])
def bucket_delete():
num_receive = request.form['num_give']
db.bucket.delete_one({'num': int(num_receive)})
return jsonify({'msg': '삭제 완료!'})- 버킷리스트 추가할때 내용이 없으면 내용 입력하라는 알림 띄우기
: input 박스가 항상 string으로 넘어가기 때문에 책에서 배운 typeof() !== 'string' 조건 활용이 불가능했다. 공백 길이를 지운 후의 길이가 0이면 내용이 없는 것!
=> 수정하기 기능도 고쳐봐야겠다
function save_bucket() {
let bucket = $('#bucket').val()
if (bucket.trim().length === 0) {
alert("내용을 입력해주세요")
window.location.reload()
} else {
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give:bucket},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
}- 인생 영화 기록 페이지에 예고편으로 연결해주는 버튼 추가하기
: 처음 리뷰를 기록할때 url 값이 db에 저장이 안되게 해두었기 때문에 아예 웹 스크레이핑 시 예고편 링크까지 저장하게 만들었다. 처음엔 try except로 작성하지 않았는데, 여러 영화로 테스트 하다보니 예고편이 없는 영화들도 있었다. 그럴땐 아예 크롤링 부분에서 먹통이 되기 때문에 에러가 나면 teaser 값을 빈칸으로 두게 했다. 매번 네이버 영화 페이지 들어가기 귀찮아서 연결되는 버튼도 따로 만들었다.
=> 메인 예고편이 없다면 다른 예고편을, 그것도 없다면 빈칸을 teaser 값에 넣는 식으로 수정해보면 좋을듯
try:
teaser = "https://movie.naver.com" + soup.find('a', {'title': '메인 예고편'}).get('href')
except AttributeError:
teaser = ''function teaser_open(teaser) {
if (teaser.trim().length !== 0) {
window.open(teaser)
} else {
alert("메인 예고편 음슴")
}
} function find_movie() {
window.open('https://movie.naver.com/')
}=> ajax의 url 부분이 어떻게 구성되는지 공부해야겠다. 대충 하긴 했는데 정확히 뭔지 모름.
=> 웹 배포까지 했는데 첨엔 잘 되다가 중간에 연결이 끊어졌다. 이 부분 해결하기!
=> 다른 팀원이 만든 코드 뜯어보기!!
