vue+node分页功能实现

实现思路

分页的基础是基于sql语言中的limit实现

前端(vue)

1.创建一个分页组件
2.通过点击分页组件的按钮获取分页的信息,post请求到后端获取数据

后端(node)

1.获取前端传递参数,使用limit传递给数据库

前端实现

1.分页组件使用element-ui的Pagination 分页
https://element.eleme.cn/#/zh-CN/component/pagination

vue组件中代码:

 <el-pagination
              background
              layout="prev, pager, next"
              :current-page="cur_page"
              :page-size="pageNum"
              :total="totalCount"
              @current-change="handleCurrentChange3"
            ></el-pagination>

先声明变量:

cur_page: 1, //默认在第一页
pageNum: 3, //默认每页显示3条数据
totalCount: 1 //默认总
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
1. 数据库查询分页 首先需要在后端通过数据库查询获取到所有数据,然后再根据前端传来的分页参数进行分页处理,最后将分页后的数据返回给前端。 例如使用MySQL数据库,在Node.js中可以使用mysql模块连接数据库,然后通过LIMIT和OFFSET关键字进行分页查询。 ``` const mysql = require('mysql'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'test' }); // 获取总记录数 function getCount(callback) { const sql = 'SELECT COUNT(*) AS total FROM table_name'; connection.query(sql, (error, results) => { if (error) throw error; callback(results[0].total); }); } // 分页查询 function getList(pageNum, pageSize, callback) { const offset = (pageNum - 1) * pageSize; const sql = `SELECT * FROM table_name LIMIT ${pageSize} OFFSET ${offset}`; connection.query(sql, (error, results) => { if (error) throw error; callback(results); }); } ``` 2. 前端分页 前端分页是指在前端将所有数据加载完毕后,通过JS来进行分页处理,最终将分页后的数据呈现在页面上。 例如使用Vue.js,可以在组件中定义一个列表,然后使用computed属性计算分页数据。 ``` <template> <div> <table> <thead> <tr> <th>id</th> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr v-for="item in paginatedList" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> <div> <button @click="prevPage">上一页</button> <span>{{ currentPage }} / {{ pageCount }}</span> <button @click="nextPage">下一页</button> </div> </div> </template> <script> export default { data() { return { list: [], // 所有数据 pageSize: 10, // 每页显示条数 currentPage: 1 // 当前页码 }; }, computed: { pageCount() { return Math.ceil(this.list.length / this.pageSize); // 总页数 }, paginatedList() { const startIndex = (this.currentPage - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; return this.list.slice(startIndex, endIndex); // 分页后的数据 } }, methods: { prevPage() { if (this.currentPage > 1) { this.currentPage--; } }, nextPage() { if (this.currentPage < this.pageCount) { this.currentPage++; } } }, mounted() { // 获取所有数据 // ... } }; </script> ``` 需要注意的是,前端分页虽然不需要进行数据库分页查询,但是在数据量较大时仍然会存在性能问题。因此,建议在数据量较大时使用后端分页查询方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值