06-分页

前端分页

eggjs

'use strict';

const Controller = require('egg').Controller;

class ShujuController extends Controller {
//单页
  async index() {
    const { ctx } = this;
    let goodsList = await this.app.mysql.query(
        'select * from nideshop_goods'
    )
    const headers = {
        'Content-Type':'text/json',
        'token':'shujuk'
    }
    ctx.set(headers);
    ctx.set(headers);
   const data={
     "code":1,
     "msg":"请求商品数据成功!",
     "data":{
       "sliderlist":"",
       "goodsList":goodsList
     }
   }
   ctx.body = data;
  }
  //滑动加载
  async add() {
    const { ctx } = this;

    //接收哪一页
    var query = this.ctx.query;
    // query是访问的参数
     if(JSON.stringify(query)=='{}'){
         const data={
              "code":0,
         "msg":"请求page和pageNum不能为空"
         }
        ctx.body=data
     }else{
        let page     = query.page     //接收传递的页码
        let pageNum  = query.pageNum  //每页显示的条数
        //偏移量
        let offset = (page-1)*pageNum
        var sql='select primary_pic_url,name,id from nideshop_goods limit '+offset+','+pageNum+'';        
        let goodsList= await this.app.mysql.query(sql);
         //xxtea算法
         const headers = {
            'Content-Type': 'text/json',
            'token':'nihaoshijie'
          };
          ctx.set(headers)
          const data={
            "code":1,
            "msg":"请求商品数据成功!",
            "data":{
              "goodsList":goodsList
            }
          }
          ctx.body = data;
     }
  }
}
module.exports = ShujuController;

hbuidle

<template>
	<view class="content">
		<view class="list" v-for="(item,i) in goodsList">
			<view><img :src="item.primary_pic_url" width="50rpx" /></view>
			<view>{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				page: 1,
				pageNum: 10
			}
		},
		onLoad() {
			let that = this;
			uni.request({
				url: 'http://127.0.0.1:7001/shuju/add',
				method: 'GET',
				data: {
					page: that.page,
					pageNum: that.pageNum
				},
				success(res) {
					that.goodsList = res.data.data.goodsList
					 console.log(res.data.data.goodsList)
				}
			})

		},
		onReachBottom() {
			let that = this;
			uni.request({
				url: 'http://127.0.0.1:7001/shuju/add',
				method: 'GET',
				data: {
					page: that.page,
					pageNum: that.pageNum
				},
				success(res) {
					that.goodsList.push(...res.data.data.goodsList)
					 console.log(res.data.data.goodsList)
				}
			})
		}
	}
</script>

egg后端分页

goods.js

'use strict';

const Controller = require('egg').Controller;
//控制器
class GoodsController extends Controller {
  //方法
  async index() {
    const { ctx } = this;
    //接收get传参
    var query = this.ctx.query; //{} 接收get传参
    //console.log(query)
    //第一层 判断前端传过来的页码
    if(JSON.stringify(query)=="{}"){
       var nowpage = 1
    }else{
       var nowpage  = query.page  //当前的页码数 1 2 3 4 5 6 ...
    }

    let pageNum= 10           //每页显示的条数
    let offset = (nowpage-1)*pageNum //计算偏移量
    var sql='select * from nideshop_goods limit '+offset+','+pageNum+'';
    let goodsList= await this.app.mysql.query(sql);
    //第二层  查询数据库数据的条数
    var sql="select count(*) as total from nideshop_goods"
    let count = await this.app.mysql.query(sql);
    // console.log(count);	[ RowDataPacket { total: 239 } ]
    //总页数	
    let totalNum = Math.ceil(count["0"]["total"]/pageNum)
    //算法 分页
    await ctx.render('goods/index',{
      "goodsList":goodsList,
      "totalNum":totalNum
    })
  }
}

module.exports = GoodsController;

 <tbody>
   <% goodsList.forEach(function(item){%>
   <tr class="odd gradeX">
       <td><%= item.id %></td>
       <td><%= item.name %></td>
       <td><img src="<%= item.primary_pic_url %>"  width="50" /></td>
       <td class="center">4</td>
       <td class="center">X</td>
   </tr>
   <% }) %>  
</tbody>

<ul class="pagination">
    <% for(var i=1;i<=totalNum;i++){%>
    <li><a href="/goods/index?page=<%= i %>"><%= i %></a></li>
    <%  } %>
</ul>