Flask: 두 판 사이의 차이

2024년 10월 19일 (토) 14:04 판

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>

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

   <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>

User Data

ID	Name	Age

   <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

@@ 7번째 줄: / 7번째 줄: @@
 * 샘플 프로그램 구조
 <source lang=python>
-/flask_datatables
+/flask_root
 ├── app.py
 ├── templates