实战Flask+BootstrapTable打造最简动态表头及数据

前端

2023-03-13 05:18:48

使用 Flask + BootstrapTable 实现动态表头和数据

简介

在 Web 开发中，展示动态数据至关重要。本文将指导你使用 Flask 和 BootstrapTable 实现动态表头和数据。通过这种方法，你可以轻松更新数据，而无需重新加载整个页面。

技术栈

Python 3.6+
pip
Flask
BootstrapTable

搭建环境

安装所需软件：

Python 3.6+
pip
Flask
BootstrapTable

创建 Flask 应用

使用命令：

flask new flask_bootstraptable

安装 BootstrapTable

使用命令：

pip install bootstrap-table

创建 HTML 模板

创建一个 HTML 文件 index.html：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
  <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
</head>
<body>
  <table id="table"></table>

  <script>
    $(function() {
      $('#table').bootstrapTable({
        url: '/data',
        method: 'get',
        columns: [],
        data: []
      });
    });
  </script>
</body>
</html>

创建 Flask 路由

在 app.py 中创建路由：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/data', methods=['GET'])
def data():
  headers = ['id', 'name', 'age']
  data = [
    {'id': 1, 'name': 'John Doe', 'age': 30},
    {'id': 2, 'name': 'Jane Smith', 'age': 25}
  ]

  return jsonify({'headers': headers, 'data': data})

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