티스토리 뷰

반응형

API 만들고 사용하기 - 포스팅API (Create → POST)

우리가 만들 API 두 가지

 

1) 포스팅API - 카드 생성 (Create) : 클라이언트에서 받은 url, comment를 이용해서 페이지 정보를 찾고 저장하기

2) 리스팅API - 저장된 카드 보여주기 (Read)

클라이언트와 서버 연결 확인하기

  • 여기서는 미리 적혀 있는 쌍으로 되어있는 서버-클라이언트 코드를 확인하고 갈게요.
  • 분홍 형광펜 부분이 서로 어떻게 매칭되는지 확인해보세요!

[서버 코드 - app.py]

@app.route('/memo', methods=['POST'])

def post_articles():

sample_receive = request.form['sample_give']

print(sample_receive)

return jsonify({'msg': 'POST 연결되었습니다!'})

 

[클라이언트 코드 - index.html]

function postArticle() {

$.ajax({

type: "POST",

url: "/memo",

data: {sample_give:'샘플데이터'},

success: function (response) { // 성공하면

alert(response['msg']);

}

})

}

<button type="button" class="btn btn-primary" onclick="postArticle()">기사저장</button>

 

동작 테스트

'기사저장' 버튼을 클릭했을 때, 'POST 연결되었습니다!' alert창이 뜨면 클라이언트 코드와 서버 코드가 연결 되어있는 것입니다.

서버부터 만들기

API 는 약속이라고 했습니다. 위에 미리 설계해 둔 API 정보를 보고 만들어보죠!

 

메모를 작성하기 위해 서버가 전달받아야하는 정보는 다음 두 가지 입니다.

- URL(url_give)

- 코멘트(comment_give)

 

그리고 URL를 meta tag를 스크래핑해서 아래 데이터를 저장(Create)합니다.

- URL(url)

- 제목(title)

- 설명(desc)

- 이미지URL(image)

- 코멘트(comment)

 

따라서 서버 로직은 다음 단계로 구성되어야 합니다.

1. 클라이언트로부터 데이터를 받기.

2. meta tag를 스크래핑하기

3. mongoDB에 데이터를 넣기

 

@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':'저장이 완료되었습니다!'})

 

클라이언트 만들기

API 는 약속이라고 했습니다. API를 사용할 클라이언트를 만들어보죠!

 

메모를 작성하기 위해 서버에게 주어야하는 정보는 다음 두 가지 입니다.

- URL (url_give) : meta tag를 가져올 url

- comment (comment_give) : 유저가 입력한 코멘트

 

따라서 클라이언트 로직은 다음 단계로 구성되어야 합니다.

1. 유저가 입력한 데이터를 #post-url과 #post-comment에서 가져오기

2. /memo에 POST 방식으로 메모 생성 요청하기

3. 성공 시 페이지 새로고침하기

 

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()

}

})

}

완성 확인하기

동작 테스트 https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539 ← 이 URL을 입력하고 기사저장을 눌렀을 때, '포스팅 성공!' alert창이 뜨는지 확인합니다. (우리는 스크래핑을 사용해 정보를 저장하고 있으니까, meta tag 가 있는 사이트만 저장이 제대로 되겠죠?)

 

참고!

지금은 카드가 보이지 않습니다. 아직 카드를 보여주는 리스팅 API 를 만들지 않았기 때문이죠.

반응형
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
링크
글 보관함