vue+node+elementUI实现分页功能

简介: vue+node+elementUI实现分页功能

第1===》收集当前页码 和 每页显示条数  


第2==》发送ajax请求页码 和 每页显示条数发送给后端


第3===》接收后端返回的数据总条数 total 和 当前页码的数据 data

 

第3===》如果当前页没有数据 且 排除第一页,防止出现删除当前页后出现页面没有数据


<div style="margin-top: 20px; text-align: left;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 3, 5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
// 数据
 data() {
   return {
     currentPage: 1, // 当前页
     total: 0, // 数据总条数
     pageSize: 3 // 每页条数
   };
 },
methods:{
   // 按照分页显示数据的函数
    getAccountListByPage() {
      // 收集当前页码 和 每页显示条数
      let pageSize = this.pageSize;
      let currentPage = this.currentPage;
      // 发送ajax请求 把分页数据发送给后端
      this.axios
        .get("http://127.0.0.1:666/account/accountlistbypage", {
          params: {
            pageSize,
            currentPage
          }
        })
        .then(response => {
          console.log("对应页码的数据:", response.data);
          // 接收后端返回的数据总条数 total 和 对应页码的数据 data
          let { total, data } = response.data;
          // 赋值给对应的变量即可
          this.total = total;
          this.accountTableData = data;
          // 如果当前页没有数据 且 排除第一页
          if (!data.length && this.currentPage !== 1) {
            // 页码减去 1
            this.currentPage -= 1;
            // 再调用自己
            this.getAccountListByPage();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 每页显示条数改变 就会触发这个函数
    handleSizeChange(val) {
      // 保存每页显示的条数
      this.pageSize = val;
      // 调用分页函数
      this.getAccountListByPage();
    },
    // 当前页码改变 就会触发这个函数
    handleCurrentChange(val) {
      // 保存当前页码
      this.currentPage = val;
      // 调用分页函数
      this.getAccountListByPage();
    },
}
后端用node写的代码
/*
  按分页显示账号列表的路由 /accountlistbypage
*/
router.get("/accountlistbypage", (req, res) => {
  // 接收前端参数
  let { pageSize, currentPage } = req.query;
  // 默认值
  pageSize = pageSize ? pageSize : 3;
  currentPage = currentPage ? currentPage : 1;
  // 构造sql语句 (查询所有数据 按照时间排序)
  let sqlStr = `select * from account order by ctime desc`;
  // 执行sql语句
  connection.query(sqlStr, (err, data) => {
    if (err) throw err;
    // 计算数据总条数
    let total = data.length;
    // 分页条件 (跳过多少条)
    let n = (currentPage - 1) * pageSize;
    // 拼接分页的sql语句
    sqlStr += ` limit ${n}, ${pageSize}`;
    // 执行sql语句 (查询对应页码的数据)
    connection.query(sqlStr, (err, data) => {
      if (err) throw err;
      // 把数据返回给前端 两个数据 数据总条数 total 和 对应页码的数据 data
      res.send({
        total,
        data
      });
    });
  });
});


1425695-20190530232234543-1097162177.jpg




相关文章
|
3月前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
279 59
|
3月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
97 2
|
2月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
45 4
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
3月前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
289 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
4月前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
67 1
|
3月前
|
JavaScript 前端开发 API
|
3月前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
62 1
|
3月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
4月前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
70 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘