LabEx
로그인무료 가입

Flask 템플릿 생성

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 Flask 에서 템플릿을 생성하고 사용하는 방법을 배웁니다. 템플릿은 웹 애플리케이션의 중요한 부분입니다. 템플릿을 사용하면 로드될 때마다 다른 데이터를 표시할 수 있는 동적 HTML 페이지를 생성할 수 있습니다. Flask 와 함께 번들로 제공되는 Jinja2 템플릿 엔진을 사용합니다.

참고: 코드 파일을 직접 생성하고 환경에서 실행해야 합니다. Web 5000 에서 Flask 서비스 상태를 미리 볼 수 있습니다.

기본 레이아웃 생성

첫 번째 단계는 모든 페이지에 사용될 기본 레이아웃을 만드는 것입니다. 이 기본 레이아웃에는 탐색 모음 및 페이지 제목과 같이 애플리케이션의 공통 요소가 포함됩니다.

<!-- flaskr/templates/base.html -->
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<nav>
  <h1>Flaskr</h1>
  <ul>
    {% if g.user %}
    <li><span>{{ g.user['username'] }}</span></li>
    <li><a href="{{ url_for('auth.logout') }}">Log Out</a> {% else %}</li>

    <li><a href="{{ url_for('auth.register') }}">Register</a></li>
    <li>
      <a href="{{ url_for('auth.login') }}">Log In</a>
      {% endif %}
    </li>
  </ul>
</nav>
<section class="content">
  <header>{% block header %}{% endblock %}</header>
  {% for message in get_flashed_messages() %}
  <div class="flash">{{ message }}</div>
  {% endfor %} {% block content %}{% endblock %}
</section>

등록 템플릿

다음으로, 등록 페이지에 대한 템플릿을 생성합니다. 이 템플릿은 기본 레이아웃을 확장하고 이 페이지에 대한 특정 콘텐츠를 채웁니다.

<!-- flaskr/templates/auth/register.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Register{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">Username</label>
  <input name="username" id="username" required />
  <label for="password">Password</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="Register" />
</form>
{% endblock %}

로그인 템플릿

마찬가지로, 로그인 페이지에 대한 템플릿을 생성합니다. 이 템플릿 역시 기본 레이아웃을 확장하고 이 페이지에 대한 특정 콘텐츠를 채웁니다.

<!-- flaskr/templates/auth/login.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Log In{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">Username</label>
  <input name="username" id="username" required />
  <label for="password">Password</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="Log In" />
</form>
{% endblock %}

요약

이 랩에서는 Flask 에서 템플릿을 생성하고 사용하는 방법을 배웠습니다. 애플리케이션의 공통 요소를 포함하는 기본 레이아웃을 생성한 다음, 이 기본 레이아웃을 확장하고 특정 콘텐츠를 채우는 등록 및 로그인 페이지에 대한 특정 템플릿을 생성했습니다. 이를 통해 코드를 DRY(Don't Repeat Yourself, 중복 방지) 하게 유지하여 유지 관리성을 높이고 오류 발생 가능성을 줄일 수 있습니다.