社区首页 >专栏 >Flask与Vue分页功能实现

Flask与Vue分页功能实现

原创

晓松

发布于 2024-12-26 08:22:19

12800

代码可运行

运行总次数：0

代码可运行

在本篇文章中，我们将实现一个简单的分页功能，后端使用 Flask 提供数据，前端使用 Vue.js 显示数据，并且通过 Element UI 进行分页组件的交互。具体实现包括 Flask 视图函数的分页逻辑、Vue 前端分页组件的实现和前后端数据交互。

1. 后端：Flask分页实现

首先，确保你的 Flask 环境已经设置好，并安装了相关依赖：

pip install flask flask-sqlalchemy

视图函数 `operation_log_view`

Flask 中使用 paginate 方法来实现分页查询。我们将在视图函数中处理分页的逻辑，接受来自前端的分页参数，然后返回分页数据。

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///logs.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

class OperationLog(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    user_id = db.Column(db.Integer, nullable=False)
    operation_time = db.Column(db.DateTime, nullable=False)
    operation_type = db.Column(db.String(50), nullable=False)

@app.route('/operation_log_view', methods=['POST'])
def operation_log_view():
    """操作日志分页接口"""
    page_number = request.json.get('page_number')
    page_count = request.json.get('page_count')

    if not all([page_number, page_count]):
        return jsonify({'status': 'error', 'data': '参数不能为空'})

    page_number = int(page_number)
    page_size = int(page_count)

    # 查询操作日志并进行分页
    operation_logs_pagination = (
        OperationLog.query.order_by(OperationLog.operation_time.desc())
        .paginate(page_number, page_size, False)
    )
    # 获取分页数据
    operation_logs = operation_logs_pagination.items
    # 获取分页信息
    total_pages = operation_logs_pagination.pages
    # 获取当前页码
    current_page = operation_logs_pagination.page

    # 返回操作日志列表
    message = [
        {
            'operation_time': log.operation_time,
            'operation_type': log.operation_type,
        } for log in operation_logs
    ]

    return jsonify({'status': 'ok', 'data': message, 'total_pages': total_pages, 'current_page': current_page})

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

2. 前端：Vue + Element UI分页实现

在前端，我们使用 Vue.js 和 Element UI 来创建分页组件，并与后端进行交互，获取分页数据。

首先，确保你的项目中已经安装了 Vue 和 Element UI。如果没有安装，可以通过以下命令安装：

npm install element-ui axios

Vue 组件代码

Vue 组件中，handleCurrentChange 方法会在用户切换页码时触发，发送请求给后端，获取对应的分页数据。

<template>
  <div>
    <!-- 操作日志表格 -->
    <el-table :data="operationRecord">
      <el-table-column prop="operation_time" label="操作时间" width="180">
      </el-table-column>
      <el-table-column prop="operation_type" label="操作类型" width="120">
      </el-table-column>
      <!-- 你可以根据需要继续添加其他列 -->
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-count="totalPages"
        :page-size="pageCount"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {    
    return {
      operationRecord: [],  // 存储操作日志数据
      currentPage: 1,  // 当前页码
      pageCount: 15,   // 每页显示的记录数
      totalPages: 1,   // 总页数
    };
  },
  methods: {
    // 页码变化时触发，重新请求数据
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getOperationRecord();
    },

    // 获取操作日志数据
    getOperationRecord() {
      const params = {
        page_number: this.currentPage,
        page_count: this.pageCount,
      };

      axios.post('/operation_log_view', params)
        .then((response) => {
          const { data } = response;
          if (data.status === 'ok') {
            this.operationRecord = data.data;  // 更新操作记录数据
            this.totalPages = data.total_pages;  // 更新总页数
          }
        })
        .catch((error) => {
          console.error('获取数据失败', error);
        });
    },
  },
  created() {
    // 组件创建时自动请求第一页数据
    this.getOperationRecord();
  },
};
</script>

<style scoped>
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>

3. 路由配置

在 Flask 中，我们通过路由将视图函数与 URL 绑定。operation_log_view 视图函数已经通过 @app.route('/operation_log_view', methods=['POST']) 绑定到了 /operation_log_view 路径。前端通过 axios.post 向该路径发送请求。