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 //默认总条数为一条

操作当前页:

 handleCurrentChange3: function(val) {
      this.cur_page = val;

      this.getPackData3(); //确定当前页面后刷新页面
    },

数据操作

 getPackData3: function() {
      //获取分页信息
      let param = new URLSearchParams();
      param.append("start", (this.cur_page-1)*this.pageNum);
      param.append("stop", (this.cur_page)*this.pageNum);
      axios({
        method: "post",
        url: "http://localhost:3000/appoInfoDeali",
        data: param
      })
        .then(res => {
          var data = res;
          if (data && data.status == 200) {
            //200: '服务器成功返回请求的数
            this.appoInfo = data.data;
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    }

总条数获取:

totalPageNum3:function(){
      //获取总页数信息
      let param = new URLSearchParams();
      axios({
        method: "get",
        url: "http://localhost:3000/appoInfoDealiTotal"
      })
        .then(res => {
          var data = res;
          if (data && data.status == 200) {
            //200: '服务器成功返回请求的数
            this.totalCount=parseInt(data.data[0].total/this.pageNum)
            
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    }

后端实现

路由设计

router.post('/appoInfoDeali', function (req, res) {
    DB.appoInfoDeali(req.body,function (err, data) {
        if (err) {
            res.status = 500
            res.send('数据库查询错误,请联系数据库操作人员')
        } else {
            res.header("Access-Control-Allow-Origin", "*");
            res.status = 200
            res.send(JSON.stringify(data))
        }
    })
})

router.get('/appoInfoDealiTotal', function (req, res) {
    DB.appoInfoDealiTotal(function (err, data) {
        if (err) {
            res.status = 500
            res.send('数据库查询错误,请联系数据库操作人员')
        } else {
            res.header("Access-Control-Allow-Origin", "*");
            res.status = 200
            res.send(JSON.stringify(data))
        }
    })
})

数据库设计


exports.appoInfoDeali = function (data,callback) {
    //1.连接数据库
    connection = connect();
    //2.设置查询语句

    commit ="SELECT * FROM customer_view_all_appoint_info "+"LIMIT "+data.start+","+data.stop+";"
    connection.query(commit, function (error, results, fields) {

        if (error) {
            console.log("error" + error)
            callback(error, null)
        } else {
            if (results.length >= 1) {
                callback(null, results)
            }
        }
    });
    connection.end();
}


exports.appoInfoDealiTotal = function (callback) {
    //1.连接数据库
    connection = connect();
    //2.设置查询语句

    commit ="SELECT COUNT(*) AS total FROM customer_view_all_appoint_info;"
    connection.query(commit, function (error, results, fields) {

        if (error) {
            console.log("error" + error)
            callback(error, null)
        } else {
            if (results.length >= 1) {
                callback(null, results)
            }
        }
    });
    connection.end();
}


展开阅读全文
©️2020 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值