如何通过 Flask 将表数据（SQLite 中的）传递到 Svelte 页面

Question

我使用命令创建一个名为“table-test”的精简项目。命令：

npm create svelete@latest

，然后

npm install

。

初始页面运行良好。我在路由器下添加一个“table”文件夹，然后添加三个文件（+page.svelte、Table.svelte 和 data-store.js）。该页面运行良好。 +page.svelte 从 data-store.js 文件导入数据，然后传递到 Table.svelte 并显示在页面上。现在我在“table-test”中创建一个 server.py 并打开 SQLite 数据库文件，然后从中读取一个表。我的问题是如何将这些数据传递到表格页面？

“table”文件夹下的+page.svelte：

<script>
    import Table from './Table.svelte';
    import { studentsArray, colors } from './data-store.js';
    
    let redStyle = "redTable";
    let blueStyle = "blueTable";
</script>

<Table tableData={$studentsArray} style={redStyle}/>
<Table tableData={$colors} style={blueStyle}/>

“table”文件夹下的Table.svelte：

<script>
    export let tableData;
    export let style;
</script>

<table class={style}>
    <!-- <thead>
        <tr>
            {#each Object.keys(tableData[0]) as columnHeading}
                <th>{columnHeading}</th>
            {/each}
        <tr/>
    </thead> -->
    <tbody>
        {#each Object.values(tableData) as row}
            <tr>
                {#each Object.values(row) as cell}
                    <td>{cell}</td>
                {/each}
            </tr>
        {/each}
    </tbody>
</table>

<style>
    table, th, td {
        border: 1px solid;
        border-collapse: collapse;
        margin-bottom: 10px;
    }
    
    table.redTable {
        border: 2px solid #A40808;
        background-color: #EEE7DB;
        width: 100%;
        text-align: center;
        border-collapse: collapse;
    }
    table.redTable td, table.redTable th {
        border: 1px solid #AAAAAA;
        padding: 3px 2px;
    }
    table.redTable tbody td {
        font-size: 13px;
    }
    table.redTable tr:nth-child(even) {
        background: #F5C8BF;
    }
    table.redTable thead {
        background: #A40808;
        background: -moz-linear-gradient(top, #bb4646 0%, #ad2020 66%, #A40808 100%);
        background: -webkit-linear-gradient(top, #bb4646 0%, #ad2020 66%, #A40808 100%);
        background: linear-gradient(to bottom, #bb4646 0%, #ad2020 66%, #A40808 100%);
    }
    table.redTable thead th {
        font-size: 19px;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        border-left: 2px solid #A40808;
    }
    table.redTable thead th:first-child {
        border-left: none;
    }

        table.blueTable {
        border: 1px solid #1C6EA4;
        background-color: #EEEEEE;
        width: 100%;
        text-align: left;
        border-collapse: collapse;
    }
    table.blueTable td, table.blueTable th {
        border: 1px solid #AAAAAA;
        padding: 3px 2px;
    }
    table.blueTable tbody td {
        font-size: 13px;
    }
    table.blueTable tr:nth-child(even) {
        background: #D0E4F5;
    }
    table.blueTable thead {
        background: #1C6EA4;
        background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        border-bottom: 2px solid #444444;
    }
    table.blueTable thead th {
        font-size: 15px;
        font-weight: bold;
        color: #FFFFFF;
        border-left: 2px solid #D0E4F5;
    }
    table.blueTable thead th:first-child {
        border-left: none;
    }
</style>

table文件夹下的data-store.js：

import { writable } from 'svelte/store';
    
export let studentsArray = writable([
    {
        "Name" : "Maria",
        "Favorite Subject" : "Math",
        "Age" : 14
    },
    {
        "Name" : "Jose",
        "Favorite Subject" : "Science",
        "Age" : 13
    }
]);

export let colors = writable([
    {
        "Name" : "Cyan",
        "HEX" : "#00FFFF"
    },
    {
        "Name" : "Yellow",
        "HEX" : "#FFFF00"
    },
    {
        "Name" : "Blue",
        "HEX" : "#0000FF"
    },
    {
        "Name" : "Lime",
        "HEX" : "#00FF00"
    },
    {
        "Name" : "Red",
        "HEX" : "#FF0000"
    },
    {
        "Name" : "White",
        "HEX" : "#FFFFFF"
    },
    {
        "Name" : "Black",
        "HEX" : "#000000"
    },
])

SQLite中的表：[('业主', '本公司'), ('用户', '商场'), ('客户', '男性成人')]

server.py代码：

from flask import Flask, send_from_directory
import sqlite3

from flask import Flask, send_from_directory
import sqlite3

app = Flask(__name__)

# Path for our main Svelte page
@app.route("/")
def base():
    return send_from_directory('/src/routes/table', '+page.svelte')

# Path for all the static files (compiled JS/CSS, etc.)
@app.route("/<path:path>")
def home(path):
    return send_from_directory('/', path)

@app.route("/table")
def show_table():
    database = sqlite3.connect("Toilet.db")
    databasecur = database.cursor()
    selectedtable = 1140
    table_name = "table_" + str(selectedtable)
    sql_check = "SELECT * FROM " + table_name
    databasecur.execute(sql_check)
    check_result = databasecur.fetchall()
    database.close()


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

Answer 1

在

+page.js

/

ts

文件中，使用

load

函数 来

fetch

来自相应端点的数据。它将被传递到页面的

data

属性（请参阅链接的文档）。

（从 python 服务器提供单个

+page.svelte

源文件似乎毫无意义，您可能想要一个独立的 SvelteKit 应用程序（带有单独的 Python 驱动的 API 服务）或使用 static 适配器 来编译它到可以作为 Python 后端一部分的静态前端组件。）