Python---Flask--02-템플릿

9210 단어
업무 논리와 표현 논리를 혼합하면 코드가 이해되고 유지보수되기 어렵다.대형 테이블을 위한 HTML 코드를 구축하려면 테이블의 데이터가 데이터베이스에서 읽은 데이터와 필요한 HTML 문자열로 연결된다고 가정하십시오.표현 논리를 템플릿으로 옮기면 프로그램의 유지보수성을 높일 수 있다.
템플릿은 응답 텍스트를 포함하는 파일로, 점위 변수로 표시되는 동적 부분을 포함하며, 구체적인 값은 요청한 상하문에서만 알 수 있습니다.실제 값으로 변수를 바꾸고 최종적으로 얻은 응답 문자열을 되돌려줍니다. 이 과정을 렌더링이라고 합니다.Flask는 템플릿을 렌더링하기 위해 Jinja2라는 강력한 템플릿 엔진을 사용했습니다.
Flask 기본 템플릿 파일은templates 디렉토리 아래에 저장됩니다.

템플릿 생성


teamplates/index를 만듭니다.html 템플릿

Hello Flask


teamplate/user를 만듭니다.html 템플릿

{{ name }}


템플릿 렌더링

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/)
def index():
    return render_template('index.html')

@app.route('/user')
def user():
    return render_template('user.html', name='Flask')


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

템플릿 변수


템플릿에 사용되는 {{{name}}} 구조는 변수를 나타냅니다. 이것은 템플릿 엔진에게 이 위치의 값을 렌더링 템플릿에 사용할 데이터에서 얻을 수 있도록 하는 특수한 자리 차지 문자입니다.Jinja2는 목록, 사전, 대상 등 모든 종류의 변수를 식별할 수 있으며, 심지어는 복잡한 유형도 식별할 수 있다.템플릿에서 사용되는 변수의 예는 다음과 같습니다.

A value from a dictionary: {{ mydict['key'] }}.

A value from a list: {{ mylist[3] }}.

A value from a list, with a variable index: {{ mylist[myintvar] }}.

A value from an object's method: {{ myobj.somemethod() }}.


필터를 사용하여 변수를 수정할 수 있으며 필터 이름은 변수 이름 뒤에 추가되고 중간에 세로로 구분됩니다.예를 들어, 다음 템플릿은 변수 name의 값을 대문자로 표시합니다.
Hello, {{ name|capitalize }}

에서는 Jinja2에서 제공하는 일반적인 필터 섹션을 나열합니다.Jinja2 변수 필터
필터 이름
분명히 말하다
safe
값을 렌더링할 때 이스케이프되지 않음
capitalize
값의 자모를 대문자로 바꾸고, 다른 자모는 소문자로 바꾸다
lower
값을 소문자로 변환하다
upper
값을 대문자로 변환하다
title
값 중의 모든 단어의 자모를 대문자로 바꾸다
trim
값의 맨 끝 공백을 없애다
striptags
렌더링하기 전에 값의 모든 HTML 태그를 지웁니다.
safe
필터는 특별히 설명할 가치가 있다.기본적으로 Jinja2는 보안상의 이유로 모든 변수를 이스케이프합니다.예제
예를 들어 변수의 값이'

Hello

이면 Jinja2는'

Hello h1>'브라우저는 이 h1 요소를 표시할 수 있지만 설명을 하지 않습니다.변수에 저장된 HTML 코드를 표시해야 하는 경우가 많은데, 이때safe 필터를 사용할 수 있다.

제어 구조

로 렌더링됩니다.
Jinja2는 템플릿의 렌더링 프로세스를 변경할 수 있는 다양한 제어 구조를 제공합니다.간단한 예를 들어 그 중에서 가장 유용한 제어 구조를 소개하다.다음 예에서는 템플릿에 조건 제어문을 사용하는 방법을 보여 줍니다.
{% if user %}
 Hello, {{ user }}!
{% else %}
 Hello, Stranger!
{% endif %}

또 다른 흔히 볼 수 있는 요구 사항은 템플릿에 요소 그룹을 렌더링하는 것이다.다음 예에서는 for 순환을 사용하여 이러한 요구를 실현하는 방법을 보여 줍니다.
    {% for comment in comments %}
  • {{ comment }}
  • {% endfor %}

Jinja2는 또한 매크로를 지원합니다.매크로는 Python 코드의 함수와 유사합니다.예를 들면 다음과 같습니다.
{% macro render_comment(comment) %}
 
  • {{ comment }}
  • {% endmacro %}
      {% for comment in comments %} {{ render_comment(comment) }} {% endfor %}

    매크로를 재사용하려면 매크로를 별도의 파일에 저장한 다음 필요한 템플릿에서 가져올 수 있습니다.
    {% import 'macros.html' as macros %}
    
      {% for comment in comments %} {{ macros.render_comment(comment) }} {% endfor %}

    여러 곳에서 재사용해야 하는 템플릿 코드 세그먼트는 모든 템플릿에 포함된 별도의 파일을 작성하여 중복을 방지합니다.
    {% include 'common.html' %}

    코드를 반복해서 사용하는 또 다른 강력한 방법은 템플릿 계승이다. 이것은 Python 코드의 클래스 계승과 유사하다.우선 베이스라는 이름을 만듭니다.html의 기본 템플릿:
    
    
     {% block head %}
     {% block title %}{% endblock %} - My Application
     {% endblock %}
    
    
     {% block body %}
     {% endblock %}
    
    

    block 탭 정의 요소는 파생 템플릿에서 수정할 수 있습니다.이 예에서, 우리는 헤드, 타이틀, 바디라는 블록을 정의했다.제목이 헤드에 포함되어 있음을 주의하십시오.다음 예제에서는 기본 템플릿의 파생 템플릿입니다.
    {% extends "base.html" %}
    {% block title %}Index{% endblock %}
    {% block head %}
     {{ super() }}
     
    {% endblock %}
    {% block body %}
    

    Hello, World!

    {% endblock %}

    extends 명령은 이 템플릿이base에서 파생된 것을 설명합니다.html.extends 명령 이후 기본 템플릿의 세 블록이 다시 정의되어 템플릿 엔진이 적당한 위치에 삽입됩니다.새 정의된 헤드 블록을 주의하십시오. 기본 템플릿의 내용이 비어 있지 않기 때문에 슈퍼 () 를 사용하여 원래의 내용을 가져옵니다.이따가 이 통제 구조의 구체적인 용법을 보여 드리며 그것들의 작업 원리를 알아보도록 하겠습니다.

    Flask 사용bootstrap 확장


    Bootstrap(http://getbootstrap.com/) 트위터가 개발한 소스 프레임워크로 사용자 인터페이스 구성 요소를 제공하여 깔끔하고 매력적인 웹 페이지를 만들 수 있으며, 이 웹 페이지들은 모든 현대 웹 브라우저를 호환할 수 있다.Bootstrap은 클라이언트 프레임워크이기 때문에 서버와 직접 관련이 없습니다.서버에서 해야 할 일은 Bootstrap 스타일시트 (CSS) 와 자바스크립트 파일을 인용한 HTML 응답을 제공하고 HTML, CSS, 자바스크립트 코드에서 필요한 구성 요소를 실례화하는 것입니다.이러한 작업의 가장 이상적인 실행 장소는 바로 템플릿이다.프로그램에서 Bootstrap을 통합하려면 템플릿에 필요한 모든 변경 사항을 해야 합니다.그러나 더 간단한 방법은 Flask-Bootstrap이라는 Flask 확장을 사용하여 집적 과정을 간소화하는 것이다.

    설치하다.


    pip install flask_bootstrap

    사용


    Flask 초기화bootstrap
    from flask import Flask
    from flask_bootstrap import Bootstrap
    
    app = Flask(__name__)
    bootstarp = Bootstrap(app)

    templates/user.html: Flask-Bootstrap 템플릿 사용
    {% extends "bootstrap/base.html" %}
    {% block title %}Flasky{% endblock %}
    {% block navbar %}
    
    {% endblock %}
    {% block content %}
    
    {% endblock %}

    Jinja2의 extends 명령은Flask-Bootstrap에서bootstrap/base를 가져옵니다.html, 이로써 템플릿 계승을 실현한다.Flask-Bootstrap의 기본 템플릿은 웹 페이지 프레임워크를 제공하고Bootstrap의 모든 CSS와 템플릿 자바스크립트 파일을 도입합니다.기본 템플릿에는 파생 템플릿에서 재정의할 수 있는 블록이 정의되어 있습니다.Block과endblock 명령이 정의한 블록의 내용을 기본 템플릿에 추가할 수 있습니다.위에 이거user.html 템플릿은 title,navbar,content라는 세 개의 블록을 정의했다.이러한 블록은 기본 템플릿에서 사용할 수 있으며 파생 템플릿에서 재정의할 수 있습니다.title 블록은 렌더링된 HTML 문서의 헤더에 내용이 표시되고 태그에 배치되는 역할을 합니다.navbar과 콘텐츠 두 블록은 각각 페이지의 내비게이션 게이지와 주체 내용을 나타낸다.이 템플릿에서 navbar 블록은 Bootstrap 구성 요소를 사용하여 간단한 내비게이션 게이지를 정의합니다.콘텐츠 블록 중 개
    페이지 헤더를 포함하는 용기이전 버전의 템플릿에서 환영 메시지를 이 페이지의 머리 부분에 넣습니다.
    Flask-Bootstrap의 base.html 템플릿은 또한 많은 다른 블록을 정의하여 파생 템플릿에서 사용할 수 있다.표 3-2는 모든 사용 가능한 속도를 열거했다.Flask-Bootstrap 베이스 템플릿에 정의된 블록 | 블록 이름 | 설명 | | | | | --| --| | doc | 전체 HTML 문서 | | htmlattribs | 태그의 속성 | | html | 태그의 내용 | | head | 태그의 내용 | | title | 태그의 내용 | | | metas | 태그 그룹 | styles | 스타일시트 정의 | | | bodyattribs | 탭의 속성 | | body | 탭의 내용 | | navbar | 사용자 정의 내비게이션 게이지 | | content | 사용자 정의 페이지 내용 | | | | scripts | 문서 밑에 있는 자바스크립트 성명 | 표의 많은 블록은 Flask-Bootstrap에서 자체적으로 사용하는데 직접 다시 정의하면 문제가 발생할 수 있습니다.예를 들어, Bootstrap에 필요한 파일은 styles 및 scripts 블록에 선언됩니다.프로그램이 이미 내용이 있는 블록에 새 내용을 추가하려면 Jinja2에서 제공하는 슈퍼 () 함수를 사용해야 합니다.예를 들어, 파생 템플릿에 새 JavaScript 파일을 추가하려면 다음과 같이 scripts 블록을 정의해야 합니다.
    {% block scripts %}
    {{ super() }}
    


    여러 개의 루트를 가진 모든 프로그램은 내비게이션 게이지와 같은 다른 페이지를 연결할 수 있는 링크를 필요로 한다.
    템플릿에서 단순 라우팅의 URL 링크를 직접 작성하는 것은 어렵지 않지만, 가변 섹션을 포함하는 동적 라우팅의 경우 템플릿에 올바른 URL을 구축하는 것은 어렵습니다.또한 URL을 직접 작성하면 코드에 정의된 라우팅에 불필요한 종속성이 생길 수 있습니다.라우트를 재정의하면 템플릿의 링크가 비활성화될 수 있습니다.Flask는 이러한 문제를 방지하기 위해 urlfor() 보조 함수, 프로그램 URL 맵에 저장된 정보를 사용하여 URL을 생성할 수 있습니다.
    url_for () 함수의 가장 간단한 사용법은 보기 함수 이름 (또는 app.add url route () 으로 경로를 정의할 때 사용하는 단점 이름) 을 매개 변수로 삼아 해당하는 URL을 되돌려주는 것입니다.예를 들어 현재 버전의 Hello.py 프로그램에서 url 호출for ('index') 에서 얻은 결과는/입니다.url 호출for('index', external=True)는 절대 주소를 되돌려줍니다. 이 예에서는http://localhost:5000/.연결 프로그램 내의 서로 다른 루트에 대한 링크를 만들 때 상대적인 주소를 사용하면 충분하다.브라우저 외부에서 사용되는 링크를 생성하려면 전자 메일로 보낸 링크와 같은 절대 주소를 사용해야 합니다.
    url 사용for () 동적 주소를 생성할 때 동적 부분을 키워드 매개 변수로 전송합니다.예를 들어, urlfor('user', name='john', external=True)의 반환 결과는http://localhost:5000/user/john.
    전송 urlfor () 의 키워드 파라미터는 동적 루트의 파라미터에만 국한되지 않습니다.함수는 검색 문자열에 추가 매개 변수를 추가할 수 있습니다.예를 들어, urlfor('index', 페이지=2)의 반환 결과는/?page=2.


    웹 프로그램은 Python 코드와 템플릿으로만 구성되지 않습니다.대부분의 프로그램에서는 HTML 코드에서 참조하는 이미지, JavaScript 소스 파일, CSS와 같은 정적 파일도 사용합니다.
    이것은 정적 파일에 대한 인용이/static/이라는 특수한 경로로 여겨지기 때문이다.예를 들어, url 호출for('static', filename='css/styles.css', external=True)에서 얻은 결과는http://localhost:5000/static/css/styles.css.
    기본적으로 Flask는 프로그램 루트 디렉토리의 static이라는 하위 디렉토리에서 정적 파일을 찾습니다.필요하면 static 폴더에 하위 폴더를 사용하여 파일을 저장할 수 있습니다.서버가 앞의 URL을 받은 후 파일 시스템에서static/css/styles를 포함하는 응답을 생성합니다.css 파일의 내용입니다.
    프로그램의 기본 템플릿에favicon을 어떻게 설치합니까?ico 아이콘.이 아이콘은 브라우저의 주소 표시줄에 표시됩니다.templates/base.html: 즐겨찾기 아이콘 정의
    {% block head %}
    {{ super() }}
    
    
    {% endblock %}

    아이콘의 성명은 헤드 블록의 끝에 삽입됩니다.super () 를 사용하여 기본 템플릿에 정의된 블록의 원본 내용을 보존하는 방법을 주의하십시오.

    좋은 웹페이지 즐겨찾기