前端页面分页操作

网页分页操作

前端-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>