前端页面分页操作

网页分页操作

前端-vue 后端-springboot 连接-axios

实际展示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

说明:

  • 首页时没有上一页
  • 中间页有上一页和下一页
  • 尾页没有下一页
  • 点击可跳转

部分配置

spring.application.name=travels
//数据库
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/travels?serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull&autoReconnect=true&useSSL=false&failOverReadOnly=false&allowPublicKeyRetrieval=true
spring.datasource.username=root
spring.datasource.password=1234

#mapper路径
mybatis.mapper-locations=classpath:com/hhf/travels/mapper/*.xml
#实体类别名
mybatis.type-aliases-package= com.hhf.travels.entity
1.前端代码
  • 依赖
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
  • html代码
    • 内容展示
  <tr v-for="province in provinces" :key="province.id">
                    <td v-text="province.id"></td>
                    <td v-text="province.name"></td>
                    <td v-text="province.tags"></td>
                    <td v-text="province.placecounts"></td>
                    <td>
                        <a href="javascript:;" type="button" @click="deleteProvince(province.name)">删除省份</a>
                        <a :href="'../viewspot/viewspotlist.html?id='+province.id">景点列表</a>
                        <a :href="'./updateprovince.html?id='+province.id">修改省份</a>
                    </td>
  </tr>
    • 分页
 <div id="pages">
                <!--上一页,                          只有当前所在页数>1才会显示-->
                <a href="javascript:;" class="page" v-if="page > 1" @click="findAll(page - 1)">&lt;上一页</a>
                <!--页面,                           页码标签遍历-->
                <a href="javascript:;" class="page" v-for="index in totalPage" @click="findAll(index)" v-text="index"></a>
                <!--下一页,                          只有当前所在页数<总页数才会显示-->
                <a href="javascript:;" class="page" v-if="page < totalPage" @click="findAll(page + 1)">下一页&gt;</a>
  </div>
  • javascript代码
<script>
    const app = new Vue({
        el: "#app",
        data: {
            provinces: [],
            page: 1,
            rows: 4,
            totalPage: 0,
            totals: 0,
        },
        methods: {
           
            findAll(indexpage) { // 查询某一页的数据
                if (indexpage) {
                    this.page = indexpage;
                }
                // 保存当前对象, 用于下面的作用域   这句是什么意思
                _this = this; 
                
                //调用的controller方法
                axios.get("http://localhost:8989/province/findByPage?page=" + this.page + "&rows=" + this.rows).then((res) => {
                    //res是调用controller返回的结果
                    //可能会用的数据
                    _this.provinces = res.data.provinces;
                    _this.page = res.data.page;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
           
        //一打开这个页面就执行的方法,查询这个页面需要的数据
        created() {
            this.findAll();
        }
    })

</script>


2.后端代码
  • controller代码
  @GetMapping("findByPage")
										//参数为,开始页当前页和每页条数
    public Map<String,Object> findByPage(Integer page, Integer rows){
        page = page == null ? 1 : page;
        rows = rows == null ? 4 : rows;

        HashMap<String, Object> map = new HashMap<>();
        //分页处理  分页的内容
        List<Province> provinces = provinceService.findByPage(page, rows);

        //计算总页数
        //总信息数
        Integer totals = provinceService.findTotals();
        //总页数
        Integer totalPage = totals%rows == 0 ? totals/rows : totals/rows+1;
        map.put("provinces",provinces);
        map.put("totals",totals);
        map.put("totalPage",totalPage);
        map.put("page",page);
        return map;
    }
  • service
//参数一当前页   参数二  每页记录数
    List<Province> findByPage(Integer page,Integer rows);

    //查询总条数
    Integer findTotals();
  • serviceImpl

    • 注解:@Service @Transactional

      - ```java
              @Autowired
                private ProvinceDao provinceDao;
            
                @Override
                public List<Province> findByPage(Integer page, Integer rows) {
                    //这里我不明白
                    int start = (page - 1) * rows;
            
                    return provinceDao.findByPage(start, rows);
                }
            
                @Override
                public Integer findTotals() {
                    return provinceDao.findTotals();
                }
          ```
      
  • Dao层

List<T> findByPage(@Param("start") Integer start,@Param("rows") Integer rows);

Integer findTotals();
  • DaoMapper
<!--    分页查询所有需要的表的所有信息-->
    <select id="findByPage" resultType="Province">
        SELECT * FROM travels.t_province
        ORDER BY placecounts
        LIMIT #{start},  #{rows}
    </select>

<!--    查询总条数-->
    <select id="findTotals" resultType="Integer">
        select count(id) from travels.t_province
    </select>
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值