js(ajax , get , post 4주차 복습, switch문 활용하기)

이미지도 바꾸고~ (크리스마스도 지났고..)  get과 post를 이용해서 데이터를 저장하고 화면에 내용을 표시할 수 있도록 만들었습니다.

스파르타코딩 4주 차 강의를 복습한 후 내가 만든 웹페이지에 적용하기 연습!  (당연히 기본코드는 복사 붙여 넣기 )

1. 패키지 파일 flask , dnspython, pymongo를 먼저 깔아줍니다.

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

app.py 맨위에 import 필히 해줘야 하며 flask 도 만들어 줘 야 합니다. 

mongodb와도 연결을  해줘야 데이터가 저장되고 그 데이터를 화면에 표시시킬 수 있습니다.

 

지금의 웹페이지 상태 

기록하고 완료 메세지가 뜨고 해당 내용이 화면에 추가됩니다. 이모티콘도 감정이기록된 글자 바로 옆에 표시되도록 만들었죠. 사실.. 만들고 보니 감정이모티콘을 따로 표시할 메모박스가 없다는 걸 발견했고 생각을 바꿔 박스를 추가하는 대신에 그냥.. 글자 옆에 생기도록 만들었습니다.. 

2. app.py 코드 

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/diary', methods=['POST'])
def test_post():
   date_receive = request.form['date_give']
   comment_receive = request.form['comment_give']
   emoji_receive = request.form['emoji_give']

   doc = {
       "date" : date_receive,
       "comment" : comment_receive,
       "emoji" : emoji_receive
   }
   db.diarys.insert_one(doc)

   return jsonify({'msg': '기록 완료!'})

@app.route('/diary', methods=['GET'])
def test_get():
   diary_comment = list(db.diarys.find({},{'_id':False}))
   return jsonify({'diarys':diary_comment})

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

 

 뼈대는 만들어 져있는 것을 복사 붙여 넣어 내 코드에 맞게 변수와 내용들만 바꿉니다. (얼마나 쉽게 만든 것인가.. 하하하)

post에서 날짜와 감정기록, 그리고 이모티콘을 받아서 딕셔너리 데이터의 형태로 만들고 그 형태를 mongodb에 넘겨주면 msg '기록 완료!'가 화면에 뜹니다. (이 내용들은 app.py에서 실행된다.)

 

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

위 내용의 코드도 빼먹지 말고 app.py 코드에 추가하세요 ! 뼈대 코드를 가지고 있다면 상관없겠지만. 

 

3. html 코드

function write_box(){
    let date = $('#date').val()
    let comment = $('#comment').val()
    let emoji = $('#emoji').val()
    $.ajax({
        type: "POST",
        url: "/diary",
        data: {date_give: date, comment_give: comment,emoji_give: emoji},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    })
}
function listing() {
    $.ajax({
        type: "GET",
        url: "/diary",
        data: {},
        success: function (response) {
            let rows = response['diarys']
            for(i=0; i<rows.length;i++){
                let date = rows[i]['date']
                let comment = rows[i]['comment']
                let emoji = rows[i]['emoji']
                console.log(emoji)
                let emoji_img = ''
                switch (emoji) {
                    case 'smile':
                        emoji_img = '😀'
                        break;
                    case 'sad':
                        emoji_img = '😂'
                        break;
                    case 'awkward':
                        emoji_img = '🤔'
                        break;
                    case 'Despair':
                        emoji_img = '😱'
                        break;
                    default:
                        emoji_img = '🤬'
                        break;
                }


                let temp_html = `  <div class="card-header">${date}</div>
                                        <div class="card-body">
                                            <p class="card-text">${comment} ${emoji_img}</p>

                                   </div>`
                $('#comment_box').append(temp_html)

            }
        }
    })
}

 

 html에서 완성한 post와 get 

 

4. 이모티콘을 표시하기. 

이모티콘은 이모티콘의 그 형태로 db에 표시되지 않고

<option value="angry">🤬</option>

vlaue의 text값으로 표시되고 있습니다.  그래서 이 값으로 이모티콘을 넘겨야 하는데..

if문을 사용할까 하다가 구글링 해보니 switch과 더 좋을 것 같았습니다.

let emoji = rows[i]['emoji']

let emoji_img = ''
switch (emoji) {
    case 'smile':
        emoji_img = '😀'
        break;
    case 'sad':
        emoji_img = '😂'
        break;
    case 'awkward':
        emoji_img = '🤔'
        break;
    case 'Despair':
        emoji_img = '😱'
        break;
    default:
        emoji_img = '🤬'
        break;
}

emoji의 내용이 smile , sad 등의 내용에 따라 이모티콘을 emoji_img에 대입하여 그것을 출력하도록 했습니다.

let temp_html = `  <div class="card-header">${date}</div>
                        <div class="card-body">
                            <p class="card-text">${comment} ${emoji_img}</p>