Flask 및 HTMx - 오픈 소스 샘플

안녕하세요 코더 여러분!

이 문서는 간단한 Bootstrap 5 한 페이지 디자인을 사용하여 Flask and HTMLx으로 제작된 오픈 소스 샘플을 제공합니다. 초보자를 위해 Flask는 Python으로 구동되는 선도적인 웹 프레임워크이며 HTMLx는 HTML에서 직접 AJAX, CSS 전환, WebSockets 및 Server-Sent Events에 액세스할 수 있는 경량 JS 유틸리티 라이브러리입니다. This simple stack might help beginners 프런트엔드 계층에 대한 JS 전문가가 아니어도 전체 스택 프로젝트를 코딩합니다.

Thanks for reading!

👉 Flask HTMLx Sample - 소스코드

👉 이메일 및 Support을 통한 무료 Discord .

✨샘플 사용법

기계에서 응용 프로그램을 시작하려면

Python3 - 설치 지침을 진행하기 전에 python3 및 highr=er가 시스템에 설치되어 있는지 확인하십시오.

Git - Git.OSX 및 Linux를 다운로드하고 설치하면 Git이 사전 설치됩니다. 아직 설치되지 않은 경우 Windows 시스템에 Git을 다운로드하여 설치합니다.

Pip - pip를 사용하여 프로젝트에서 사용할 필수 패키지를 설치합니다.

👉 Step 1 - cloning the repository.

$ git clone https://github.com/app-generator/sample-flask-htmlx.git

👉 Step 2 - Prepare Environment (create virtual environment)

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate

👉 Step 3 - Install Dependencies

$ # Install requirements
$ pip3 install -r requirements.txt

👉 Step 4 - Create Database & Tables

$ flask shell    # launch Flask Shell
>>> 
>>> from app import db
>>> db.create_all()

👉 Step 5 - Start the APP

$ flask run

앱이 주소http://localhost:5000에서 실행 중이어야 합니다.

✨ HTMLx

앱에서 관리하는 모든 양식은 HTMLx 지시문을 사용합니다. 다음은 로그인 양식 소스 코드와 사용된 HTMLx 지시문입니다.

hx-swap

hx-post

hx-target

    <form  hx-swap="outerHTML" 
           hx-post="{{ url_for('auth.signin') }}" 
           hx-push-url="true" 
           hx-target=".content" 
           class="p-5 bg-white shadow mh-100 col-sm-8 col-md-6 col-lg-4" novalidate >

        <p class="h3 text-center p-2">SignIn</p>

        <!-- Truncated content -->

        <div class="form-input p-1">
            {{form.email.label}}
            {{form.email(class_="form-control")}}
        </div>

        <div class="form-input p-1">
            {{form.password.label}}
            {{form.password(class_="form-control")}}
        </div>

        <button class="btn p-2 px-3 rounded btn-primary h1" type="submit">Sign In</button>
    </form>

Thanks for reading! For more resources, feel free to access:

👉 Flask Charts.JS via Flask-RestX - 샘플 포함

👉 Django Charts via DRF - 단계별 튜토리얼