当前位置：首页 > news >正文

Python Flask service provide data list and retrieve and display in chrome via html and javascript

news 2026/3/26 22:07:49

//flask
from flask import Flask,jsonify,send_from_directory
from flask_cors import CORS
import uuid
import time
import os
import pandas as pd
import csv
from datetime import datetime
import jsonbooks_list=[]
arr=range(1,1000001)
for a in arr:books_list.append({"Id":a,"Name":f'Name_{a}',"ISBN":f'ISBN_{a}_{uuid.uuid4().hex}',"Author":f'Author_{a}',"Content":f'Content_{a}',"Summary":f'Summary_{a}',"Title":f'Title_{a}',"Topic":f'Topic_{a}'}) 
print(f'{datetime.now()}  has {len(books_list)} rows data!')app=Flask(__name__)
CORS(app)idx=0@app.route('/')
def index():return send_from_directory('.','Index_csv.html')    @app.route('/get_books_list')def get_books_list():global idxtimestamp=int(time.time())temp_data_list=books_list[idx:idx+20]jsonStr=json.dumps(temp_data_list)print(jsonStr)idx+=20return jsonify({'data':jsonStr,'timestamp':timestamp})if __name__=="__main__":app.run(debug=True,port=5000,host='0.0.0.0')//html,Index_csv.html

 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>books list</title> <style> body { align-items: center; min-width: 1200px; } .container { text-align: center; font-size: 20px; } table { width: 100%; margin: 20px auto; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } #fetchBtn { font-size: 20px; min-width: 1200px; } </style> </head> <body align-items="center"> <div class="container"> <div> <button id="fetchBtn">Fetch Data</button> </div> <table id="dataTable"> <tr> <th>Id</th> <th>Name</th> <th>ISBN</th> <th>Author</th> <th>Content</th> <th>Summary</th> <th>Title</th> <th>Topic</th> </tr> </table> </div> <script> document.getElementById('fetchBtn').addEventListener('click', fetchBooksData); function fetchBooksData() { const dataTable = document.getElementById('dataTable'); const btn = document.getElementById('fetchBtn'); while (dataTable.rows.length > 1) { dataTable.deleteRow(1); } btn.disabled = true; btn.textContent = 'Fetching...'; fetch('http://localhost:5000/get_books_list') .then(res => { if (!res.ok) { throw new Error(`HTTP error! status:${res.status}`); } return res.json(); }) .then(result => { try { if (!result || !result.data) { throw new Error('No data received from server'); } alert(`${result.data}`); const books = typeof result.data === 'string' ? JSON.parse(result.data) : result.data; alert(`Received ${books.length} books`); <!-- books.forEach(bkArray => { --> <!-- const rowHtml = ` --> <!-- <tr> --> <!-- <td>${bkArray[0]}</td> --> <!-- <td>${bkArray[1]}</td> --> <!-- <td>${bkArray[2]}</td> --> <!-- <td>${bkArray[3]}</td> --> <!-- <td>${bkArray[4]}</td> --> <!-- <td>${bkArray[5]}</td> --> <!-- <td>${bkArray[6]}</td> --> <!-- <td>${bkArray[7]}</td> --> <!-- </tr> --> <!-- `; --> <!-- dataTable.insertAdjacentHTML('beforeend', rowHtml); --> <!-- }); --> //遍历数据并添加到表格 books.forEach(book=>{ const row=dataTable.insertRow(); row.innerHTML=` <td>${book.Id}</td> <td>${book.Name}</td> <td>${book.ISBN}</td> <td>${book.Author}</td> <td>${book.Content}</td> <td>${book.Summary}</td> <td>${book.Title}</td> <td>${book.Topic}</td> `; }); } catch (error) { console.error('Parse data failed: ', error); alert('data format error ' + error.message); } }) .catch(ex => { console.error('Request failed:', ex); alert('Fetch data failed ' + ex.message); }) .finally(() => { btn.disabled = false; btn.textContent = 'Fetching Data'; }); }; </script> </body> </html>