vue+node分页功能实现

实现思路

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

前端（vue）

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

后端（node）

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

前端实现

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

vue组件中代码：

先声明变量：

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();
}