Flask 데이터 테이블 - 오픈 소스 샘플

안녕하세요 코더입니다!

이 기사에서는 Vanilla JS 라이브러리인 Flask and Simple-DataTables을 사용하여 정보에 페이지를 매긴 액세스를 제공하는 오픈 소스 프로젝트를 제공합니다. 정보는 데이터베이스에서 로드, API에 의해 노출, 파일 시스템에서 로드의 세 가지 방법으로 액세스할 수 있습니다. sources can be downloaded from Github (MIT 라이센스) 등록 잠금이 없고 상업적 프로젝트 또는 eLearning 활동에 사용됩니다.

Thanks for reading! Content provided by App Generator

👉 Flask Datatables - 소스 코드

🎁 무료Support 이메일(문제 추적기) 및 Discord(1k+ 커뮤니티)

✨ 작동 원리

CSV 형식으로 제공된 정보는 사용자 정의 Flask CLI 명령을 통해 로드되고 데이터베이스에 저장됩니다. 이 시점부터 앱은 다양한 기술을 사용하여 정보를 제공합니다.

컨트롤러(경로)에 의해 Data 테이블에서 로드됨

/api/data API 노드에서 제공하고 JS에서 사용

파일에서 처리 없이 로드됨:

app/static/datatables/data.json

✨ 프로젝트 기능

Simple-DataTables (Vanilla) JS

에서 관리하는 데이터 테이블

Stack : Flask, SqlAlchemy, Flask-Migrate, Flask-RestX

Implementations :

컨트롤러(경로)에 의해 Data 테이블에서 로드됨

/api/data API 노드에서 제공하고 JS에서 사용

파일에서 처리 없이 로드됨:

app/static/datatables/data.json

Search 데이터

UI 키트: 테마스버그의 볼트 대시보드(무료 버전)

Deployment : Docker, Gunicorn/Nginx, HEROKU

✨ 빠른 시작

아마도 가장 쉬운 방법은 소스 코드와 함께 제공된 Docker 설정을 사용하고 최소한의 작업으로 프로젝트를 시작하는 것입니다.

Get the code

$ git clone https://github.com/app-generator/flask-volt-datatables.git
$ cd flask-volt-datatables

Start the app in Docker

$ docker-compose up --build 

브라우저에서 http://localhost:85를 방문하십시오. 앱이 실행 중이어야 합니다.

✨ 구현

입력 파일은 지속성을 위해 사용되는 테이블(모델)에 미러링됩니다.

Input file Sample (truncated content)

product_code,product_info,value,currency,type
Nike_Air,Nike Air More Uptempo,105,usd,transaction
Nike_Club,Nike Club Joggers BB,55,usd,transaction
Nike_Uptempo,Nike Uptempo (Gs) 415082,130,usd,transaction
Nike_SportSwear,Nike SportSwear Club Tee,25,usd,transaction
Nike Dry, Nike Dry Park VII Junior,39,usd,transaction

Model That saves the data

class Data(db.Model):

    __tablename__ = 'data'

    id = db.Column(db.Integer, primary_key=True)

    code     = db.Column(db.String(64))   # product code 
    name     = db.Column(db.String(128))  # product name
    value    = db.Column(db.Integer)      # numeric
    currency = db.Column(db.String(10))   # string: usd, euro
    type     = db.Column(db.String(64))   # transaction
    ts       = db.Column(db.Integer, default=datetime.utcnow().timestamp())

The API Node (powered by Flask-RestX)

@rest_api.route('/api/data')
class Items(Resource):

    def get(self):

        data = []

        for item in Data.query.all():
            data.append( item.toDICT() ) 

        response = app.response_class(
            response=json.dumps(data),
            status=200,
            mimetype='application/json'
        )

        return response

이 간단한 프로젝트는 더 많은 기능으로 (곧) 업데이트됩니다:

인라인 편집

로드된 정보에서 생성된 다른 차트:

선, 파이 및 막대 차트

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

✨ Free Dashboards Django, Flask 및 React로 제작

✨ Admin Dashboards - 제품과 함께 거대한 색인