目录

一、前言

二、flask框架中

三、flask实现

四、vue实现

五、接口联调

六、测试

七、总结

八、展望

---

一、前言

分页功能前端也可以通过插件实现，后端也可以通过插件实现，本文后端是自己实现，前端是element分页插件。

思路：想实现分页，后端接口返回以下几个参数即可。本文继承book项目

"page": 1, （第几页）

"pagesize": 5,（页面大小）

"total": 22（总数）

二、flask框架中

limit pageSize 
offset pageSize*(page-1)

limit常与offset(偏移) 结合使用
语法 :
模型类.query.limit(限制数).all()
示例 :
查询前两条数据 : Books.query.limit(2).all()
offset
语法 :
模型类.query.offset()
示例 :
查询第六到第十条数据: .query.offset(5).limit(5).all()

例子
分页

select id, title, author, read_status from books ORDER BY id ASC 
limit 5 OFFSET 5

查询总数

SELECT count(1) from books

三、flask实现

写分页查询方法：

def query_data_page(pagesize, page):
    pagesize = pagesize
    offset = pagesize*(page-1)
    book_list = []
    books = Books.query.offset(offset).limit(pagesize).all() # 分页查询语法
    for s in books:
        dic = {}
        dic['id'] = s.id
        dic['title'] = s.title
        dic['author'] = s.author
        dic['read_status'] = s.read_status
        book_list.append(dic)
    return book_list

写分页查询服务，供前端调用

 因为前端传值比较固定不是用户输入的，这里去掉了很多没有必要的校验。

# 前端通过传参pagesize、page实现分页查询
@app.route('/pagination_query', methods=['POST'])
def pagination_query():
    response_object = {'status': 'success'}
    if request.method == 'POST':
        post_data = request.get_json()
        print('调用query方传过来的参数是', post_data)
        pagesize = post_data.get('pagesize')
        page = post_data.get('page')
        books = select_data_all()
        total = 0
        for book in books:
            total = total+1 # 计算总数据
        books = query_data_page(pagesize, page)
        response_object['message'] = '图书查询成功!'
        response_object['data'] = books
        response_object['pagesize'] = pagesize
        response_object['page'] = page
        response_object['total'] = total
        return response_object

四、vue实现

element ui分页插件代码

			<el-pagination @size-change="handleSizeChange"
			               @current-change="handleCurrentChange"
			               :current-page="pagination.size"
			               :page-sizes="[5,10,20]"
			               layout="total, sizes, prev, pager, next, jumper"
			               :total="pagination.total">
			</el-pagination>

调用后台接口方法代码

handleSizeChange (val) {
        this.pagination.current = 1
        this.pagination.size = val
        this.pagination_query()
      	},
      	handleCurrentChange (val) {
        this.pagination.current = val
		this.pagination_query()
      },
	  //****************************调用分页接口方法 */
			pagination_query () {
					var that = this
					//网络请求获取数据axios
					 this.$axios.post("http://127.0.0.1:5001/pagination_query", {
						page: this.pagination.current,
						pagesize: this.pagination.size
					})
          			.then(res =>{ //请求成功，方法回调	
						//回调方法不能this
						that.bookInfo = res.data.data
						that.bookInfo = that.bookInfo.map(item=>{
						item.read_status = String(item.read_status)
						return item
						})
						this.pagination.total = res.data.total
					}).catch(function(err) { //请求失败
						console.log("失败了" + err)
					})
				
			}

在data()方法中return加入以下代码

				pagination: {
          			current: 1,
          			size: 5,
          			total: 0
        			}

五、接口联调

postman调试接口

请求参数

{"page":1,"pagesize":5}

 查询成功。

启动vue项目，查看分页

成功显示 

六、测试

看看数据库数据

1、切换条数，ok

 2、前往第几页，ok

 3、跳转第几页，ok

4、页面总数，ok

5、其他的测试场景自己补充

七、总结

分页组件虽然实现了，但是还是有bug。

1、默认显示了10条一页，页面数据只有5条

2、增加、编辑操作后，调用的是显示全部的方法，分页没有保持

3。。。

八、展望

功能实现不难，但是需要100%没问题还是需要点时间去调试的，哈哈哈。后续继续探索vue新大陆，增强element ui or element ui  admin开发能力。

20230621更新

 1、在后端(Flask)中实现API接口来获取分页数据

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

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://username:password@localhost/db_name'
db = SQLAlchemy(app)

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100))
    content = db.Column(db.Text)

@app.route('/posts', methods=['GET'])
def get_posts():
    page = int(request.args.get('page', 1))
    per_page = int(request.args.get('per_page', 10))
    posts = Post.query.paginate(page=page, per_page=per_page)
    result = {
        'total_pages': posts.pages,
        'current_page': posts.page,
        'per_page': per_page,
        'data': [
            {
                'id': post.id,
                'title': post.title,
                'content': post.content
            } for post in posts.items
        ]
    }
    return jsonify(result)

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

上面代码定义了一个Post模型表示文章，通过/posts接口获取分页数据。通过request.args.get方法获取前端传递的page和per_page参数来确定当前页和每页数量。使用paginate方法从数据库中获取对应分页数据，并将结果转换为字典格式返回。

2、在前端(Vue)中使用Axios发送请求并处理分页数据：

<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
      </li>
    </ul>
    <div>
      <button @click="prevPage">Previous</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      currentPage: 1,
      totalPages: 1,
    };
  },
  mounted() {
    this.fetchPosts();
  },
  methods: {
    fetchPosts() {
      axios.get('/posts', {
        params: {
          page: this.currentPage,
          per_page: 10, // 每页显示的数量
        },
      })
      .then(response => {
        this.posts = response.data.data;
        this.totalPages = response.data.total_pages;
      })
      .catch(error => {
        console.error(error);
      });
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage -= 1;
        this.fetchPosts();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage += 1;
        this.fetchPosts();
      }
    },
  },
};
</script>

在上述示例代码中，使用axios库发送GET请求来获取分页数据。通过调用fetchPosts方法来获取数据，并将返回的结果赋值给posts数组。在页面上展示每个文章的标题和内容。同时，我们还实现了prevPage和nextPage方法来切换上一页和下一页的数据，可以根据具体需求进行调整和扩展。