[Flask] Bootstrap 사용하기 (로그인)

Bootstrap

CSS, JS, HTML로 구성된 UI 프레임워크 중 하나

간단한 코드를 사용하면 bootstrap 프레임워크 안에서 디자인해 줌 

https://getbootstrap.com/docs/5.3/examples/

Bootstrap 페이지에 접속하여 Examples > Download examples을 통해 여러 템플릿을 사용할 수 있다.

압축을 풀고 원하는 템플릿의 index.html파일을 본인의 workspace/templates에 복사해오면 된다.

 

해당 HTML을 띄워보자.

login_test.py

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

@app.route('/login')
def login():
    id = request.args.get('id')
    pwd = request.args.get('pwd')

    if id == 'Sso':
        return_data = {'auth': 'success'}
    else:
        return_data = {'auth': 'failed'}
    return jsonify(return_data)

# HTML 렌더링
@app.route('/BS_test')
def bootstrap_html():
    return render_template('BS_login.html')

if __name__ == '__main__':
    app.run(host="127.0.0.1", port="8080")

Flask는 Jinja2 템플릿엔진을 사용한다.

render_template를 import하면 HTML을 렌더링할 수 있다.

 

이 때 렌더링 할 HTML 파일(templates 폴더 밑에 위치해야 함)과 login_test.py의 폴더 구조는 다음과 같다.

localhost://8080/BS_test로 접속해 보자

뭔가 제대로 출력되지 않는다.

HTML 파일을 확인해보자.

<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="sign-in.css" rel="stylesheet">

<img class="mb-4" src="../assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">

위와 같이 현재 작업 중인 폴더에는 없는 경로들이 있기 때문이다.

 

이처럼 동일한 웹 서버에서 가져와야되는 다른 파일들이 있다면 현재 작업중인 login_test.py가 있는 곳에 하위 폴더로 복사해오면 된다.

그 후 경로를 수정해주면 된다.

폴더 경로는 위와 같다.

 

다시 login_test.py 코드를 보자.

from flask import Flask, jsonify, request, render_template
app = Flask(__name__, static_url_path='/static')

@app.route('/login')
def login():
    id = request.args.get('id')
    pwd = request.args.get('pwd')

    if id == 'Sso':
        return_data = {'auth': 'success'}
    else:
        return_data = {'auth': 'failed'}
    return jsonify(return_data)

@app.route('/BS_test')
def bootstrap_html():
    return render_template('BS_login.html')

if __name__ == '__main__':
    app.run(host="127.0.0.1", port="8080")

app = Flask(__name__, static_url_path='/static')

위 코드가 추가하여 정적 파일 위치를 변경하였다.

 

이 후 HTML 코드도 경로를 수정해준다.

 

ex)

변경 전 : <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

변경 후 : <link href="/static/dist/css/bootstrap.min.css" rel="stylesheet">

 

다시 실행해보자.

 

구현하고 싶은건 sign in을 눌렀을 때 /login 라우터가 실행되는 것이다.

따라서 HTML파일에 가서 from 태그를 아래와 같이 수정해야 한다.

method = "get"을 추가해도 된다 (default는 get이라서 적어주지 않아도 get방식으로 동작함)

또한 변수명이 다르기 때문에 아래처럼 수정했다.

 

localhost:8080/BS_test로 접속한 후 

ID : Sso, pwd : 1234를 입력한 후 결과이다.