메뉴 여닫기
개인 메뉴 토글
로그인하지 않음
만약 지금 편집한다면 당신의 IP 주소가 공개될 수 있습니다.

Flask

데브카페

Flask 설치

pip install Flask

샘플 프롤그램

  • jquery+datatable 을 이용하여 엑셀 쉬트 형태의 테이블 뷰 조회 하는 프로그램
  • 샘플 프로그램 구조
/flask_root
├── app.py
├── templates
│   └── index.html
└── static
    └── jquery.dataTables.min.js

app.py

from flask import Flask, jsonify, render_template

app = Flask(__name__)

# 샘플 데이터 (JSON 형태)
data = [
    {"id": 1, "name": "Alice", "age": 24},
    {"id": 2, "name": "Bob", "age": 30},
    {"id": 3, "name": "Charlie", "age": 29}
]

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

@app.route('/data', methods=['GET'])
def get_data():
    return jsonify(data)

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

templates/index.html

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask + DataTables Example</title>

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables CSS & JS CDN -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<body>

    <h2>User Data</h2>
    <table id="userTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        $(document).ready(function() {
            $('#userTable').DataTable({
                ajax: {
                    url: "/data",
                    dataSrc: ""
                },
                columns: [
                    { data: "id" },
                    { data: "name" },
                    { data: "age" }
                ]
            });
        });
    </script>

</body>
</html>

실행

python app.py
  • 실행 후 웹페이지 조회

http://127.0.0.1:5000/

Comments