Flask에서 템플릿 사용하기

1. 템플릿 파일 디렉토리 구조
기존 방식
변경된 방식

Flask는 템플릿을 사용하여 웹 페이지를 동적으로 렌더링할 수 있다.

템플릿은 HTML 파일과 유사하지만 그 안에서 파이썬 코드(Jinja2 템플릿 언어)를 사용하여 데이터를 동적으로 삽입하고 제어

1. 템플릿 파일 디렉토리 구조

/project_name
    |-- app.py
    |-- config.py
    |-- models.py
    |-- templates/
        |-- categories.html
        |-- products.html
        |-- users.html
    |-- test.db

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to the Home Page</h1>
    <p>Click below to see the categories, products, or users:</p>
    <ul>
        <li><a href="/get_categories">View Categories</a></li>
        <li><a href="/get_products">View Products</a></li>
        <li><a href="/get_users">View Users</a></li>
    </ul>
</body>
</html>

templates/categories.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Categories</title>
</head>
<body>
    <h1>Categories</h1>
    {% if categories %}
        <ul>
            {% for category in categories %}
                <li>{{ category.name }}</li>
            {% endfor %}
        </ul>
    {% else %}
        <p>No categories available.</p>
    {% endif %}
</body>
</html>

templates/products.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Products</title>
</head>
<body>
    <h1>Products</h1>
    {% if products %}
        <ul>
            {% for product in products %}
                <li>{{ product.name }} - ${{ product.price }} (Category: {{ product.category.name }})</li>
            {% endfor %}
        </ul>
    {% else %}
        <p>No products available.</p>
    {% endif %}
</body>
</html>

templates/users.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Users</title>
</head>
<body>
    <h1>Users</h1>
    {% if users %}
        <ul>
            {% for user in users %}
                <li>{{ user.username }} - {{ user.email }}</li>
            {% endfor %}
        </ul>
    {% else %}
        <p>No users available.</p>
    {% endif %}
</body>
</html>

app.py

from flask import Flask, jsonify, render_template
from models import db, Product, User, Category
import config
from flask_migrate import Migrate

app = Flask(__name__)
app.config.from_object(config)

# ORM 초기화
db.init_app(app)

# Flask-Migrate 초기화
migrate = Migrate(app, db)


@app.route('/')
def index():
    # 기본 메인 페이지 렌더링
    return render_template('index.html')

@app.route('/add_category')
def add_category():
    # 새로운 Category 객체를 생성하고 DB에 추가
    new_category = Category(name="Electronics")
    db.session.add(new_category)
    db.session.commit()
    return "Category added!"

@app.route('/add_product')
def add_product():
    # 새로운 Product 객체를 생성하고 DB에 추가
    # 이미 존재하는 Category ID를 할당하여 Product에 연결
    category = Category.query.first()  # 첫 번째 카테고리 가져오기 (예시로)
    new_product = Product(name="Laptop", price=999.99, category_id=category.id)
    db.session.add(new_product)
    db.session.commit()
    return "Product added!"



@app.route('/add_user')
def add_user():
    # 새로운 User 객체를 생성하고 DB에 추가
    new_user = User(username="sample_user", email="user@example.com")
    db.session.add(new_user)
    db.session.commit()
    return "User added!"


@app.route('/get_categories')
def get_categories():
    # DB에서 모든 Category 조회
    categories = Category.query.all()
    return render_template('categories.html', categories=categories)

@app.route('/get_products')
def get_products():
    # DB에서 모든 Product 조회
    products = Product.query.all()
    return render_template('products.html', products=products)


@app.route('/get_users')
def get_users():
    # DB에서 모든 User 조회
    users = User.query.all()
    return render_template('users.html', users=users)



if __name__ == '__main__':
    app.run(debug=True)

기존 방식

모든 라우트와 기능이 app.py 한 곳에 모여 있었고 비즈니스 로직(데이터베이스 CRUD 작업)과 템플릿 렌더링이 모두 혼합 됨

변경된 방식

routes 폴더: CRUD 작업을 다루는 라우트를 관리하는 폴더
- 여기서 주로 API 관련 라우트들이 정의 됨
- 데이터베이스의 Product, Category, User 모델에 대한 CRUD
- ex) /api/get_products, /api/add_product, /api/update_category
views 폴더: 템플릿 렌더링과 관련된 라우트를 관리하는 폴더
- 주로 GET 요청을 처리, HTML 페이지를 렌더링하는 역할
- 비즈니스 로직을 처리하지 않고 데이터를 템플릿으로 전달하여 UI를 보여주는 역할
- ex) /get_categories (카테고리 목록을 조회하여 HTML로 렌더링)

https://github.com/seongjju/flask/tree/main/views

https://github.com/seongjju/flask/tree/main/routes

flask/routes at main · seongjju/flask

flask-practice. Contribute to seongjju/flask development by creating an account on GitHub.

github.com

저작자표시 변경금지

'🐼 백앤드 > Flask' 카테고리의 다른 글

flask with ORM (0)	2025.03.27
Flask 웹 애플리케이션의 구조와 동작 원리 (0)	2025.03.26

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Flask에서 템플릿 사용하기

1. 템플릿 파일 디렉토리 구조

기존 방식

변경된 방식

'🐼 백앤드 > Flask' 카테고리의 다른 글

1. 템플릿 파일 디렉토리 구조

기존 방식

변경된 방식

'🐼 백앤드 > Flask' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역