비개발자를 위한 웹개발 종합반 4주차

vscode 작업폴더 바꾸기: 파일>폴더열기>폴더 선택

프레임워크: 만들어져 있는 꾸러미(라이브러리와 유사)

 flask 프레임워크를 사용할 예정

가상환경 만들기 

 

-프로젝트 환경 준비-

1.원하는 폴더로 이동한다.

2. app.py를 만든다

3. 터미널을 켠다

4. 가상환경(프로젝트별로 라이브러리를 담아둠)을 잡는다 (터미널에 python -m venv venv 입력 -> 화면 우측 하단의 3.8.6 선택 -> 3.8.6 venv선택 -> 터미널을 껐다 켜서 (venv 뜨는 것 확인)

5. templates폴더 만들기 

 

pip install (프레임워크명) 입력 후 엔터 -> 가상환경에 다운로드 됨

 

flask 시작 코드

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

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

flask를 실행시킬 때 기본이 되는 파일 이름: app.py

 

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is my Home!'

@app.route('/mypage')
def mypage():
   return '<button>버튼입니다</button>'

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

localhost:5000:컴퓨터 주소 

-실행: 우클릭 -> 터미널에서 파이썬 실행/ 종료: ctrl+c

/mypage: (비유)창구

return '' 안에 html을 작성해 실행시키는 것이 가능 -> 하지만 작성하기 힘들다... -> 프론트엔드와 백엔드 연결하기!(프레임워크가 정해둔 규칙이 있음)

 

Flask에 HTML파일 주는 법

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

@app.route('/')
def home():
   return 'This is my Home!'

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

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

prac폴더에 templates폴더 만들기 -> 그 안에 index.html파일 작성 -> render_template 활용해서 index.html 파일 불러옴

 

API만들기

백엔드와 프론트엔드의 소통: 이 수업에서는 Fetch 사용

GET 방식과 POST 방식 있음 

GET: url로 전달, ? 사용/통상적으로 데이터 조회를 요청할 때 사용

POST: 컴퓨터만 알아볼 수 있는 방식으로 데이터가 이동/통상적으로 데이터를 조작할 때 사용

 

[미니프로젝트]화성땅 사기

준비: flask, pymongo, dnspython 라이브러리 인스톨

저장하기 - 불러오기 순으로 구현

pymongo 사용하기 위한 3줄

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.ki9erdu.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

이전에 사용한 코드 불러와서 붙여넣기

 

post-주문 저장하기

1)데이터 명세

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

3)서버부터 만들기

4)클라이언트 만들기

5)완성 확인하기

주문 저장하는 함수

function save_order() {
    let name = $("#name").val();
    let adress = $("#adress").val();
    let size = $("#size").val();

    let formData = new FormData();
    formData.append("name_give", name);
    formData.append("address_give", address);
    formData.append("size_give", size);

    fetch("/mars", { method: "POST", body: formData })
      .then((res) => res.json())
      .then((data) => {
        alert(data["msg"]);
      });
}

입력 후 저장하면 자동으로 페이지가 새로고침: fetch()함수 안에 아래 문장 삽입

window.location.reload();

 

get-주문 보여주기

주문을 보여주는 함수

function show_order() {
    fetch("/mars")
      .then((res) => res.json())
      .then((data) => {
        let rows = data["result"];
        $("#order-box").empty();
        rows.forEach((a) => {
          let name = a["name"];
          let address = a["address"];
          let size = a["size"];

          let temp_html = `<tr>
                            <td>${name}</td>
                            <td>${address}</td>
                            <td>${size}</td>
                          </tr>`;
          $("#order-box").append(temp_html);
        });
      });
 }

 

[미니 프로젝트] 스파르타피디아

wnsql: 폴더 이동하기~가상환경 만들기까지 실행

templates폴더 만들기 -> index.html파일 만들기

라이브러리 설치: flask,pymongo,dnspython, (크롤링)request, bs4 - pip install (라이브러리명) (라이브러리명)으로 한번에 깔 수 있음

 

모르는 것 -> 아는 것 순서로 구현

 

웹스크래핑 -> url에서 페이지 정보 가져오기: meta 태그를 활용!

meta 태그: 약속된 것, 미리 만들어 둔 것을 sns 등에서 공유할 때 보여주도록 함

meta태그

메타 태그를 이용해서 영화 정보를 가져오는 코드

import requests
from bs4 import BeautifulSoup

URL = 'https://movie.daum.net/moviedb/main?movieId=161806'
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')

ogtitle = soup.select_one('meta[property="og:title"]')['content']
ogimage = soup.select_one('meta[property="og:image"]')['content']
ogdesc = soup.select_one('meta[property="og:description"]')['content']
print(ogtitle,ogimage,ogdesc)

 

데이터 쌓기 -> 가져오기 순으로 구현!

 

post연습

1)데이터 명세

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

3)서버부터 만들기

4)클라이언트 만들기

let url = $('#url').val();
let comment = $('#comment').val();

.val(): jquery의 함수, 입력받은 value값을 가져오거나 원하는 value의 값으로 set 가능

 

5)완성 확인하기

 

get연습

1)데이터 명세

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

3)서버부터 만들기

4)클라이언트 만들기

5)완성 확인하기

 

4주차 숙제-스파르타피디아에 별점 추가하기

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

from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.ki9erdu.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

import requests
from bs4 import BeautifulSoup

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

@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']
    star_receive = request.form['star_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')

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

    doc = {
        'title':ogtitle,
        'desc':ogdesc,
        'image':ogimage,
        'comment':comment_receive,
        'star':star_receive
    }
    db.movies.insert_one(doc)

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

@app.route("/movie", methods=["GET"])
def movie_get():
    all_movies = list(db.movies.find({},{'_id':False}))
    return jsonify({'result':all_movies})

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