IT_World

[Flask] 얼굴 매칭 사이트 만들기 / 1. flask 패키지 설치 및 app.py 본문

Web framework, WF/Flask

[Flask] 얼굴 매칭 사이트 만들기 / 1. flask 패키지 설치 및 app.py

engine 2021. 8. 6. 16:33

환경

os : ubuntu 18.06

가상환경 생성 후 실행

cmd(명령 프롬포트) 창 실행

 flask 라는 이름의 가상환경 생성 :  create -n flask python=3.8

 flask 가상환경 실행 : cuda activate flask

플라스크 패키지 설치

 pip install flask

 

├─ app.py (실행하는 곳)
├─ templates (폴더 이름)
│     └─ index.html (html 작성)
└─ static (폴더 이름)
    ├─ js (폴더 이름)
    │   └─ main.js (javascript / 자바스크립트 작성하는 곳)
    └─ css (폴더 이름)
        └─ style.css (CSS ui 디자인 부분 작성하는 곳)

기초순서

  1. flask의 app.py를 만든다.
  2. templates폴더를 만든다.
  3. templates 안에 static 폴더를 만든다.
  4. templates 안에 html 생성
  5. html에서 서버로 데이터를 보내본다.

app.py  전체 코드 (가장 기초적인 코드)

# app.py
from flask import Flask, render_template

#Flask 객체 인스턴스 생성
app = Flask(__name__)

@app.route('/') # 접속하는 url
def index():
  return render_template('index.html')

if __name__=="__main__":
  app.run(debug=True)
  # host 등을 직접 지정하고 싶다면
  # app.run(host="127.0.0.1", port="5000", debug=True)

 

templates 폴더 안에 index.html 전체 코드 (가장 기초적인 코드)

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>메인 페이지</h1>
    <h2>안녕하세요.</h2>
</body>
</html>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

위 코드는 css style 을 가져오는 링크역할을 한다.

정적 파일을 참조할 때 {{ url_for('static', filename='정적파일') }} 식으로 작성한다.

 

static 폴더 - css 폴더 안에 style.css 전체 코드 (가장 기초적인 코드)

h1{
    color : blue;
}

 

 

이정도만 하면  메인페이지 안녕하세요. 가 뜨는 페이지를 보여줄 수 있다.

Comments