Flask에서 템플릿 사용하기

🐼 백앤드/Flask

Flask에서 템플릿 사용하기

계란소년 2025. 3. 29. 21:06

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

저작자표시 변경금지