나홀로메모장 app.py뼈대
나홀로메모장 index.html
복붙
app.py run
localhost:5000
📢API 만들고 사용하기
📀포스팅API (Create → POST)💿
우리가 만들 API 두 가지
1️⃣✔ 포스팅API - 카드 생성 (Create) : 클라이언트에서 받은 url, comment를 이용해서 페이지 정보를 찾고 저장하기
2️⃣ 리스팅API - 저장된 카드 보여주기 (Read)
1️⃣ 클라이언트와 서버 연결 확인하기
2️⃣ 서버부터 만들기
3️⃣ 클라이언트 만들기
4️⃣ 완성 확인하기
1️⃣✔ 클라이언트와 서버 연결 확인하기
app.py에서 먼저 볼 것은 어떤 형태인가.
/memo에 post형식이다.
'sample_give'형태로 받는다.
postarticle이라는 함수에서 비교확인을 한다.
확인을 다 했으면 postaticle이라는 함수가 붙어있는 쪽으로 간다.
기사 저장 부분에 붙어있다.
(순서): 기사 저장을 누르면>postaticle 함수가 불리고>이게 불리면 ajax콜을 할 것이고>
app.py(창구)에서 post /memo형식이 맞고 sample_give를 잘 받으면>
msg로 'POST 연결되었습니다!'를 주면>alert으로 그 msg를 띄워준다.
기사저장을 누르니 POST 연결되었습니다!라는 문구가 뜬다.
잘 연결 되었다.
2️⃣✔ 서버부터 만들기
👩💼첫째,url하고 코멘트를 받아야한다.
(창구에서 민증 가져오라는 식)
url_receive = request.args.get('url_give')
comment_receive = request.args.get('comment_give')
둘째, 받은 url을 가지고
타이틀,이미지,디스크립션 크롤링 해와야한다.
크롤링코드 조각기능으로 짜놓은게 있다.
서버에 import되있는지 확인
탭으로 한 칸 띄워줘야 def listing 함수에 들어간다.
url_give로 받는 url_receive를
크롤링 해온 url주소 대신
url = url_receive로 바꿔치기 해도되지만
data에 있는 url대신 url_receive로 넣어준다.
(갖고온 url주소는 없애 버린다.)
url_receive 받아서 data에 들어가고 크롤링이 진행될 것이다.
그런데,지금은 print가 필요가 없다.
insert를 해줘야한다.(post니 정보를 받고있는 입장이다)
pythonprac폴더>dbprac을 끌어다 놓는다.
import가 app.py에도 있는지 본다.
저장해줄 목록을 하나씩 적어준다.
doc={'목록 이름':목록 내용물} 이런식
db.articles.insert_one(doc)
articles에 저장하기로 한다.
저장이 완료 되면 msg로 띄워줄것은 대충 '저장 완료!'라고 해둔다.
3️⃣✔ 클라이언트 만들기
url,comment를 가지고 app.py(창구)에 가야 한다.
let 가져가야할 것 = $('#해당 input-box id').val()
function postArticle() {
let url = $('#post-url').val()
let comment = $('#post-comment').val()
$.ajax({post랑 /memo형식 같고
data: {sample_give:'샘플데이터'},만 바꿔주면 된다.
app.py(창구)에서 어떤 방식으로 가져오라고 했냐면
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
url_give랑 comment_give방식으로 가져오라고 했다.
👉data: {url_give:url,comment_give:comment},
url,comment를 가져가서 app.py에서 잘 처리해주면
성공메시지로 저장완료!alert 띄우기
4️⃣ 완성 확인하기
브라우저에서 리로딩하고
포스팅박스열기>url작성>comment작성>기사저장>저장완료msg보기
그런데,저장완료!까지 떴는데 작성했던게 새로고침이 안됀다.새로고침을 해주자
alert아래에 window.location.reload() 작성해준다.
리로딩하고 다시작성 이제 기사저장하면 새로고침이 된다.
robo3T에서 확인해보기
