分页显示逻辑

<div>
      <button v-on:click="s">上一页</button>
      <button v-on:click="x">下一页</button>
    </div>

export default {
  data() {
    return {
      goodsData: [],
      page: 1,
      num: 10,
      flag:true,
    };
  },
  created() {
    this.getData(this.page, this.num);
  },
  methods: {
    getData(page, num) {
      this.$axios
        .get("http://localhost:3000/book", {
          params: {
            page,
            num,
          },
        })
        .then((res) => {
          if(res.data.list){
            this.goodsData = res.data.list;
          }else{
            this.flag = false;
            this.page = this.page - 1;  
          }
        });
    },
    s() {
      this.page--;
      this.flag = true
      if (this.page <= 1) {
        this.page = 1;
      }
      this.getData(this.page, this.num);
    },
    x() {
      if(this.flag){
        this.page++;
        this.getData(this.page, this.num);
      }
    },
  },
};

后端app.js逻辑

app.get('/sale',function(req,res){
    let {page,num} = req.query;
    let sta=(page-1) * num
    // console.log(sta,page,num)
    let sql = "select * from qitian where biaoji='r' limit ?,?  "
    conn.query(sql,[sta,parseInt(num)],function(err,result){
        if (err){
            console.log('查询数据库失败');
        }else{
            // console.log(result);
            let data;
            if (result.length){
                data = {
                    code: 0,
                    list: result
                }
            }else{
                data = {
                    code: 1,
                    msg: '没有结果 '
                }
            }
            res.send(data)
        }
    })
})