내일배움캠프 3일차_개발일지(4주차)

벌써 3일차!!!

왕초보반 할 때 11일동안 듣던 걸 3일만에 다 들으려니 멘탈이 바사삭....

그래도 그때 완전히 이해하지 못한 것들이 머릿속에 정리되는 느낌이다!!

오늘도 화이텡!

---

flask

• flask 기본 코드
  

  from flask import Flask, render_template
  app = Flask(__name__)
  
  @app.route('/')
  def home():
     return '나의 첫 서버!!'
  
  if __name__ == '__main__':
     app.run('0.0.0.0',port=5000,debug=True)​

• 서버를 열기 위해 필요한 프로그램이다.
• render_template: html 파일을 불러와서 보여준다.(return render_template('html 파일명'))

GET / POST

1. 클라이언트와 서버 확인하기

2. 서버부터 만들기

3. 클라이언트 만들기

4. 완성 확인하기

 

• POST

function makeReview() {

    let title = $('#title').val()
    let author = $('#author').val()
    let review = $('#bookReview').val()

    $.ajax({
        type: "POST",
        url: "/review",
        data: {title_give:title, author_give:author, review_give:review},
        success: function (response) {
            alert(response["msg"]);
            window.location.reload();
        }
    })
}

 

@app.route('/review', methods=['POST'])
def write_review():
    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']

    doc = {
        'title' : title_receive,
        'author' : author_receive,
        'review' : review_receive
    }

    db.bookreview.insert_one(doc)

    return jsonify({'msg': '저장 완료!'})

• GET

function showReview() {
    $.ajax({
        type: "GET",
        url: "/review",
        data: {},
        success: function (response) {
            let reviews = response['all_reviews']
            for (let i = 0; i < reviews.length; i++) {
                let title = reviews[i]['title']
                let author = reviews[i]['author']
                let review = reviews[i]['review']

                let temp_html = `<tr>
                                    <td>${title}</td>
                                    <td>${author}</td>
                                    <td>${review}</td>
                                 </tr>`

                $('#reviews-box').append(temp_html)
            }
        }
    })
}

 

@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({}, {'_id': False}))
    return jsonify({'all_reviews': reviews})

---

GET / POST 를 무한반복 중...

이제 조금씩 혼자서 할 수 있을 것 같다!!!!

진짜 인간승리ㅠㅠㅠㅠ

잘 까먹는거 위주로 적어놔야겠다!

---

alonememo_POST

@app.route('/memo', methods=['POST'])
def saving():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']

    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url_receive, headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')

    title = soup.select_one('meta[property="og:title"]')['content']
    image = soup.select_one('meta[property="og:image"]')['content']
    desc = soup.select_one('meta[property="og:description"]')['content']

    doc = {
        'title':title,
        'image':image,
        'desc':desc,
        'url':url_receive,
        'comment':comment_receive
    }

    db.articles.insert_one(doc)

    return jsonify({'msg':'기사가 저장되었습니다!'})

• 클라이언트로부터 url_receive, comment_receive 라는 이름으로 url_give, comment_give 를 받는다.
• 받은 url_receive를 가지고 크롤링을 해서 title, image, desc를 가져온다.
• doc을 만들고 가져온 값들을 db에 담는다.(db.articles.insert_one(doc))
• return 값으로 msg를 보낸다.

function postArticle() {
                let url = $('#post-url').val()
                let comment = $('#post-comment').val()

                $.ajax({
                    type: "POST",
                    url: "/memo",
                    data: {url_give:url, comment_give:comment},
                    success: function (response) { // 성공하면
                        alert(response["msg"]);
                        window.location.reload();
                    }
                })
            }

• url, comment 라는 이름으로 입력되는 값을 받는다.
• 입력된 값을 url_give, comment_give라는 이름으로 서버에 보낸다.
• 성공하면 msg를 받아온다.
• window.location.reload(); => 새로고침

alonememo_GET

@app.route('/memo', methods=['GET'])
def listing():
    articles = list(db.articles.find({}, {'_id': False}))
    return jsonify({'all_articles':articles})

• articles = 몽고디비 articles 안에 있는 데이터를 불러온다.
• all_articles라는 이름으로 불러온 articles를 return 한다.

function showArticles() {
                $.ajax({
                    type: "GET",
                    url: "/memo",
                    data: {},
                    success: function (response) {
                        let articles = response['all_articles']
                        for (let i = 0; i < articles.length; i++) {
                            let comment = articles[i]['comment']
                            let desc = articles[i]['desc']
                            let image = articles[i]['image']
                            let title = articles[i]['title']
                            let url = articles[i]['url']

                            let temp_html = `<div class="card">
                                                <img class="card-img-top"
                                                     src="${image}"
                                                     alt="Card image cap">
                                                <div class="card-body">
                                                    <a target="_blank" href="${url}" class="card-title">${title}</a>
                                                    <p class="card-text">${desc}</p>
                                                    <p class="card-text comment">${comment}</p>
                                                </div>
                                            </div>`

                            $('#cards-box').append(temp_html)

                        }
                    }
                })
            }

• 서버로부터 받아 온 all_articles를 articles로 받고 for문으로 돌려준다.
• 각 값을 각 이름으로 받은 후 temp_html로 찍어준다.
• $('#cards-box').append(temp_html)로 나타낸다.

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

• html 파일을 불러오는 코드