1. [화성 땅 공동구매] - POST 연습(주문 저장)
지난 시간에 화성 땅 공동구매 뼈대에 주문을 저장하는 기능을 넣으려고 합니다. 화성 땅 공동구매에서는 이름, 주소, 평수 3가지의 정보를 입력받아 저장을 해야 합니다.
먼저 app.py에서 시작을 합니다.
@app.route("/mars", methods=["POST"])
def web_mars_post():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
doc = {
'name': name_receive,
'address': address_receive,
'size': size_receive
}
db.mars.insert_one(doc)
return jsonify({'msg': '주문완료'})그 후 index.html에서 추가로 작업을 합니다.
function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
$.ajax({
type: 'POST',
url: '/mars',
data: {name_give: name, address_give: address, size_give: size},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
이름과 주소, 평수를 입력한 후 주문하기를 누르면 주문 완료 확인 창이 뜨는 것을 확인할 수가 있습니다. 서버에도 확인을 해봐야 하는데요.
서버에도 입력한 값들이 맞게 저장되어 있는 것을 볼 수 있습니다.
2.[화성 땅 공동구매] - GET 연습(주문 보여주기)
저장했으니 서버에서 다시 불러와서 화면에 보여주는 연습을 하였습니다.
app.py에서
@app.route("/mars", methods=["GET"])
def web_mars_get():
order_list = list(db.mars.find({}, {'_id': False}))
return jsonify({'orders': order_list})서버의 모든 자료를 받아오면 되기 때문에. find()를 이용하여 간단하게 되었습니다. 서버 id 값은 필요한 자료가 아니기 때문에 불러오지 않아 false 값을 주었습니다.
index.html에서
function show_order() {
$.ajax({
type: 'GET',
url: '/mars',
data: {},
success: function (response) {
let rows = response['orders']
for (let i = 0; i < rows.length; i++) {
let order_name = rows[i]['name']
let order_address = rows[i]['address']
let order_size = rows[i]['size']
console.log(order_name, order_address, order_size)
let temp_html = ``
temp_html =
`<tr>
<td>${order_name}</td>
<td>${order_address}</td>
<td>${order_size}</td>
</tr>`
$('#order_box').append(temp_html)
}
}
});
}실행 결과
서버의 내용들이 화면에 잘 나와있는 것을 확인할 수 있었습니다. 반복문 for 문을 이용해서 서버 전체의 자료를 읽어오고 그 값들을. append()를 이용해서 화면에 추가하게 하였습니다.
3.[스파르타피디아] - 프로젝트 세팅
앞서 만들어놓았던 스파르타피디아를 완성하는 시간입니다. 앞에서 만든 코드들이 있지만 스파르타코딩클럽에서 제공해 주는 뼈대 코드를 이용하는 것이 학습하는 데는 편리하였지만 역시나 조금 아쉬운 부분이였습니다.
폴더와 파일을 만들어주고 패키지를 설치하는 것 까지가 초기 세팅이었습니다.
그리고 새로운 것을 배우게 되었는데 'meta 태그 스크래핑 하기'였습니다.
import requests
from bs4 import BeautifulSoup
url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'
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,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']
disc =soup.select_one('meta[property="og:description"]')['content']
print(title, image, disc)
검사를 해서 요소를 확인해 보면 <head>에 <meta>를 볼 수가 있습니다. meta에 property가 각각 og:title, og:image, og:description 이면 읽어오는 것을 보았습니다.
4.[스파르타피디아] - POST 연습(포스팅하기)
스파르타피디아에는 5가지의 자료가 필요한데요. 크게는 url, 별점, 코멘트 3가지 데이터가 필요하고 더욱 세부적으로는 총 url에서 title, description, img 3가지 자료가 필요하기 때문에 총 5가지의 자료가 쓰이게 됩니다.
자료를 저장하는 것부터 연습을 하였습니다.
app.py에서
@app.route("/movie", methods=["POST"])
def movie_post():
url_receive = request.form['url_give']
star_receive = request.form['star_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, 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']
print(title, image, desc)
doc = {
'title':title,
'image':image,
'disc':desc,
'star':star_receive,
'comment':comment_receive
}
db.movies.insert_one(doc)
return jsonify({'msg':'저장완료'})index.html에서
function posting() {
let url = $('#url').val()
let star = $('#star').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/movie',
data: {url_give: url, star_give: star, comment_give: comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}실행 결과
영화 url에 주소를 넣고 별점을 선택한 후 코멘트를 적어 기록하기를 클릭하면 서버에 자료들이 맞게 저장되어 있는 것을 볼 수가 있습니다.
5.[스파르타피디아] - GET 연습(보여주기)
앞에 [화성 땅 공동구매]처럼 불러와서 화면에 표시하는 것도 연습을 하였습니다.
app.py에서
@app.route("/movie", methods=["GET"])
def movie_get():
movie_list = list(db.movies.find({}, {'_id': False}))
return jsonify({'movies':movie_list})index.html에서
function listing() {
$.ajax({
type: 'GET',
url: '/movie',
data: {},
success: function (response) {
let rows= response['movies']
for(let i = 0; i<rows.length; i++){
let title = rows[i]['title']
let image = rows[i]['image']
let disc = rows[i]['disc']
let star = rows[i]['star']
let starImg = '⭐'.repeat(star);
let comment = rows[i]['comment']
console.log(title,image,disc,star,comment)
let html_temp = ``
html_temp =
`<div class="col">
<div class="card h-100">
<img src= ${image}
class="card-img-top">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${disc}</p>
<p>${starImg}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>`
$('#cards-box').append(html_temp)
}
}
})
}실행 결과
후기
앞에서 만들었던 자료를 가지고 연습을 해서 이해하기가 조금 더 편했습니다.
'스파르타코딩클럽' 카테고리의 다른 글
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 5주차 1일 후기 (0) | 2023.01.05 |
|---|---|
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 4주차 마무리 & 숙제 (0) | 2023.01.04 |
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 4주 1일차 후기 (0) | 2023.01.04 |
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 3주차 마무리 & 숙제 후기 (0) | 2023.01.03 |
| [스파르타코딩클럽] 비개발자를 위한, 웹개발 종합반 3주차 1일 후기 (0) | 2023.01.03 |
댓글