Flask HTMLX Material Kit - 오픈 소스 샘플

안녕하세요 코더 여러분!

이 기사는 현대적인 Flask 디자인 위에 HTMLX 및 Bootstrap 5로 제작된 open-source sample을 제시합니다. 모든 양식( 로그인 , 등록 및 연락처)은 HTML에서 직접 AJAX, CSS 전환, WebSockets 및 서버 전송 이벤트에 액세스할 수 있는 경량 JS 유틸리티 라이브러리인 HTMLX에서 관리합니다.

Thanks for reading!

👉 Flask HTMLX Material Kit - 소스코드

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

✨ 디자인 정보

Material Kit은 버튼, 입력, 탐색 모음, 탐색 탭, 카드 또는 경고와 같은 60개 이상의 프런트엔드 개별 요소로 구성되어 선택하고 결합할 수 있는 자유를 제공합니다. 모든 구성 요소는 다양한 색상을 가질 수 있으며 SASS 파일 및 클래스를 사용하여 쉽게 수정할 수 있습니다.

이Bootstrap 5 Design System는 사전 구축된 디자인 블록과 함께 제공되므로 개발 프로세스가 매끄럽고 페이지에서 실제 웹사이트로 전환하는 것이 매우 쉽습니다.

영감을 얻거나 고객에게 직접 무언가를 보여주고 싶다면 사전 구축된 예제 페이지로 개발을 바로 시작할 수 있습니다. 웹 프로젝트의 기본 구조를 빠르게 설정할 수 있습니다.

✨샘플 사용법

수동 빌드를 사용하여 머신에서 애플리케이션을 시작하려면

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

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

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

누구든지 선호하는 경우Docker 제품은 필요한 모든 스크립트와 함께 제공되며 단일(Docker) 명령을 사용하여 이 간단한 스타터를 시작할 수 있습니다.

👉 Step 1 - Cloning the repository.

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

👉 Step 2 - Start on Docker.

$ docker-compose up --build 

위의 명령이 실행되면 앱이 시작되어 실행 중이어야 합니다.

✨ 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 - 단계별 튜토리얼