layui-vue + Flask 实现 Table 排序显示

本文介绍: 在编写使用 Vue + layui 的中后台系统时，table页面通常是必不可少的。要在 Vue 中实现基于某一列的排序，我们需要更新 columns 数组中相应列的定义，以便包含排序的逻辑。，我们需要在后端设置一个能够接收排序参数并根据这些参数返回排序后数据的接口。举例：在代码中，我希望基于 “类型” 这一列进行排序。，我们可以创建一个简单的后端服务来处理带有排序参数的请求，并根据这些参数返回排序后的数据。前端，我们需要创建一个函数，它会向后端发送一个包含排序参数的请求。这个函数将接收排序字段（

在编写使用 Vue + layui 的中后台系统时，table页面通常是必不可少的。要在 Vue 中实现基于某一列的排序，我们需要更新 columns 数组中相应列的定义，以便包含排序的逻辑。

举例：在代码中，我希望基于 “类型” 这一列进行排序。则可以通过添加一个 sortable: true 属性来实现这一点。

const columns = [
  // ... 其他列的定义
  {
    title: '类型',
    width: '180px',
    customSlot: 'type',
    key: 'type',
    sortable: true // 添加此属性以启用排序
  },
  // ... 其他列的定义
]

此外，还需要在 lay-table 组件中处理排序事件。为此，可以修改 change 方法以包含对排序参数的响应。

const change = ({ current, limit, sort }: any) => {
  if (sort) {
    // 如果存在排序信息，则按照排序信息获取数据
    // sort.field 是排序字段，sort.order 是排序顺序（'asc' 或 'desc'）
    queryDataWithSort(sort.field, sort.order);
  } else {
    // 正常的分页逻辑
    layer.msg('current:' + current + ' limit:' + limit)
  }
}

const queryDataWithSort = (field, order) => {
  // 实现您的排序逻辑，例如调用 API 获取排序后的数据
  // 模拟的 API 调用示例
  queryAllDataSortedBy(field, order).then(res => {
    dataSource.value = res.data;
  }).catch(err => console.log(err));
}

要实现一个 queryAllDataSortedBy API，我们需要在后端设置一个能够接收排序参数并根据这些参数返回排序后数据的接口。以下是一个基本的实现步骤指南，分为前端和后端部分。

在 Vue 前端，我们需要创建一个函数，它会向后端发送一个包含排序参数的请求。这个函数将接收排序字段（field）和排序顺序（order），然后使用这些参数构造一个请求。假设使用 Axios 进行 HTTP 请求，如下所示：

import axios from 'axios';

const queryAllDataSortedBy = async (field, order) => {
  try {
    const response = await axios.get('/api/data', {
      params: {
        sortField: field,
        sortOrder: order
      }
    });
    return response.data;
  } catch (error) {
    console.error('Error fetching sorted data:', error);
    throw error;
  }
};

使用 Flask 和 SQLite，我们可以创建一个简单的后端服务来处理带有排序参数的请求，并根据这些参数返回排序后的数据。以下是一个实现的示例：

from flask import Flask, request, jsonify
import sqlite3

app = Flask(__name__)

def get_sorted_data(sort_field, sort_order):
    # 连接到 SQLite 数据库
    conn = sqlite3.connect('example.db')
    cursor = conn.cursor()

    # 安全地构建查询，避免 SQL 注入风险
    # 由于 SQLite 的参数化查询不支持列名和排序方向，这里需要进行一些验证
    valid_sort_fields = ['column1', 'column2', 'column3']  # 替换为您的列名
    valid_sort_orders = ['ASC', 'DESC']

    if sort_field not in valid_sort_fields:
        sort_field = 'column1'  # 默认排序字段
    if sort_order.upper() not in valid_sort_orders:
        sort_order = 'ASC'  # 默认排序方向

    # 执行查询
    query = f"SELECT * FROM your_table ORDER BY {sort_field} {sort_order}"
    cursor.execute(query)
    results = cursor.fetchall()

    cursor.close()
    conn.close()
    return results

@app.route('/api/data', methods=['GET'])
def data():
    sort_field = request.args.get('sortField', default='column1', type=str)
    sort_order = request.args.get('sortOrder', default='ASC', type=str)
    
    sorted_data = get_sorted_data(sort_field, sort_order)
    return jsonify(sorted_data)

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