Home 화면 만들기

5073 단어 Python3Flask파이썬sqlite3sqlalchemy


소개



Flask를 사용하여 1에서 응용 프로그램을 만들고 필요한 기술을 배울 수 있도록 정리하고 있습니다.
  • flask로 간단한 앱 만들기
  • Home 화면을 작성해 본다 ← ★현재 여기
  • 인증 기능 만들기
  • 데이터베이스 처리
  • CRUD 기능 만들기

    • Home 화면 만들기



    MTV 프레임워크란?



    Flask는 크게 나누어 Model, Template, View의 3개로 구성된 MTV 프레임워크로 구성되어 있다.

    예를 들어 사용자로부터 요청이 있을 때 Flask는 다음과 같이 처리됩니다.
    1. ユーザがあるURLに大してアクセス(リクエスト)する
2. アクセスされたURLを読み取り、あらかじめ定義された、URLに紐づいた処理を実行する。（View）
3. 処理の中で必要に応じて、モデルと呼ばれるオブジェクトを通してデータベースにアクセスする(Model)
4. 処理の最後にユーザに表示するHTMLなどのテンプレートを返す（Template）
5. ユーザは返されたHTMLファイルを閲覧する

    지금까지는 요청에 큰 문자열을 반환했지만 실제로 사용자가 웹 브라우저에서 탐색하는 것은 html 파일입니다.
    그래서 html 파일을 돌려주도록 합니다.

    html 파일 렌더링



    HTML 파일을 브라우저에 전달

    adapters/controllers/entry.py
    from src import app
from flask import render_template

@app.route('/')
def index():
    return render_template('index.html')
  • template 를 지정하고 있지 않습니다만, 이것은 flask 에서는 templates 디렉토리 이하에 자동으로 html 파일이 있다고 인식해 주기 때문입니다.
  • flask에서 html 파일은 templates 디렉토리에 생성된다는 것을 기억하십시오.

    • Templetes 파일 만들기



    src 디렉토리에 templates 디렉토리를 만듭니다. templates 디렉토리 안에 entries 디렉토리를 만들고 index.html 파일을 만듭니다.
  • Bootstrap에 의한 디자인
    이번에는 CSS의 라이브러리인 Bootstrap을 사용하여 html 파일의 모양을 잘 할까 생각합니다.

    • Bootstrap 가져오기 문입니다.
    다음 4줄을 추가합니다.
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

    templates/entries/index.html
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">
    <title>Flask App</title>
</head>
<body>
    <div　class="container">
        <nav class="navbar navbar-expand-lg navbar-lighy bg-light">
            <a class="navbar-brand" href="/">Flask Blog</a>
        </nav>
    </div>

    <div class="blog-body">
        投稿がありません。
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" 
            crossorigin="anonymous"></script>
</body>
</html>

    앱을 시작하면 다음과 같다고 생각합니다.
    flask로 간단한 앱 만들기
    인증 기능 생성 만들기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage