1주차 과제: 로그인 페이지 만들기

1. python이 설치되어 있는관계로 간단하게 Flask를 사용할 예정
2. Flask에서 html탬플릿 엔진을 사용하기위한 방법 찾아보기


Flask 설치 준비

# 만일의 사태를 대비해 가상환경으로 진행
mkdir ~/flaskWAS
cd flaskWAS

# pip 설치
sudo apt install python3-pip

# 가상환경 패키지 설치
sudo apt install python3.10-venv

# 가상환경 생성
python3 -m venv flask01

# activate 심볼릭 링크생성
cd ~
ln ~/flaskWAS/flask01/bin/activate ~/activate

#가상환경 실행
source activate

좌측에 기입한 가상환경 이름이 보인다(flask01)

이제 패키지 충돌 걱정 없이 Flask 및 Template engine을 설치하면된다.


Flask 설치

# flask 설치
pip install flask

# 플라스크 설치 확인 
pip list

flask 3.0.0 설치 확인


# flask 소스 작성
cd flaskWAS
vi app.py

하기의 내용 기입 후종료

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!'

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

Flask에서 host를 기입 하지 않는다면 외부에서 접근이 불가능하고 localhost에서만 접근이 가능하다
ps.이것 때문에 3시간을 날렸다....
app.run(host='0.0.0.0', port=5000)

# flask 실행
python app.py

실행이 되었다면 Host에서 접근해 보자

VM에서 실행한 Flask를 Host에서 접근이 가능한 것을 볼 수 있다.

ctl + c를 사용하여 종료한다.


탬플릿 적용

확인해 본 결과 Flask에 html을 호출 할 수 있는 모듈이 존재 한다 (추가적으로 설치할 것이 없다)

# app.py와 동일한 위치에 templates 디렉토리를 생성한다. 
# 플라스크에서 사용하는 html의 기본 위치는 template가 된다.
mkdir templates
cd templates

# html을 작성하여 GET 방식의 데이터를 받아보자
# {{id}}는 탬플릿 엔진에서 받는 변수를 바인딩 한다.
vi login.html

---- 이하 파일 내용
<html>
        <form method="GET">
                <input name="id" type="text" />
        </form>

        <h1>id is {{id}}</h1>
</html>
-------------------

 

app.py에 login.html을 호출 할 수있는 라우터(Spring Controller) 설정을 해주어야한다.

cd ~/flaskWAS
vi app.py
--------이하 파일내용
from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/login')
def login_1():
    id = request.args.get('id')
    return render_template('login.html', id=id) 


if __name__ == '__main__': 
    app.run(host='0.0.0.0', port=5000)
--------------------

간단 설명

from flask import Flask, render_template, request

  • flask 모듈에서 renter_template, request를 import 받는다.

@app.route('/login')

  • ip:port/login 으로 들어오는 url에 대한 처리를 하는 함수를 지정한다.

id = request.args.get('id')

  • requst(요청)으로 받은 arguments 중 id값을 찾아 id 변수에 assign한다.

return render_template('login.html', id=id)

  • renter_template 처리 결과를 반환하며 사용할 html은 login.html
  • 랜더링 시 사용할 id라는 변수에 python에서 정의한 id를 할당한다.

저장 후 다시 python app.py를 실행하여 ip:5000/login으로 접속해보자.

 

url에 쿼리스트링이 없으므로 request.args.get('id')의 값은 None 이다.

input 태그에 아이디를 기입하고 엔터를 누르면

 

id가 동적으로 표기되는 것을 볼 수 있다.

 

다음 포스트는 GET 방식이아닌 POST 방식으로 데이터를 전달하고
특정 ID와 PW일 경우 로그인성공, 그 외는 로그인 실패 메시지를 표기할 수 있도록 수정하겠다.

 

최종 상태

~/devWeb/flaskWAS 파일 상태
~/devWeb/flaskWAS/tempaltes/login.html

 

~/devWeb/flaskWAS/app.py

+ Recent posts