关于前端的vue3框架遇到的一些问题.前后端分页和js,ts进行编写时的区别-526互联

分页有两种形式,一种是前端进行分页,一种是后端进行分页

前端分页:

1. 在普通js写法中,需要有默认函数,在函数内进行编写功能实现比如以下代码:

export default {
    data() {
        return {
            tableData: [],
            page: 1,
            limit: 10,
            total: 0,
        }
    },
    created() {
        axios.get("/t-animal/rank")
            .then(res => {
                console.log(res)
                this.tableData = [...res.data.data.records]
                this.total = res.data.data.total
            })
    },
    methods: {
        //当前条数
        handleSizeChange(val) {
            this.limit = limit
        },
        //当前页数
        handleCurrentChange(val) {
            this.page = val
        }
    }
}

在组件上面我使用的是v-for循环,并使用slice()函数实现分页点击

                <el-col v-for="(item, index) in tableData.slice((page - 1) * limit, 
　　　　　　　　　　page * limit)" :span="6">

2. 在TS中需改变写法,因为ts的一些特性,比如setup语法糖的自动return等,在ts中任何组件内自行命名都要写在脚本块中,进行声明,才可以在组件中使用这样,以上的代码就要变成以下代码形式:

const tableData = ref([])
const page = ref(1)
const limit = ref(10)
const total = ref(0)

indexInfo().then(res => {clg(res)}

二.后端分页的实现

后端分页一般都使用的是MybatisPLus的分页,这里需要特别注意一下,在创建Ipage对象时,也就是使用分页功能时需要配置MyBatisPlus的配置文件,才能正常使用分页功能:

package com.zj.union.config;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.OptimisticLockerInnerInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
 
@Configuration
@MapperScan("com.zj.union.mapper") //可以将启动类中的注解移到此处
public class MybatisPlusConfig {
    /**
     *
     * 1 怎么来配置mybatis-plus中的插件？
     *   这里所需要的类型是MybatisPlusInterceptor，这是mybatis-plus的一个拦截器，用于配置mybatis-plus中的插件。
     * 2 为什么要使用拦截器MybatisPlusInterceptor呢？
     *    这里边的原理和mybatis分页插件的功能是一样的，工作流程如下 ：
     *   （1）第一步：执行查询功能。
     *   （2）第二步：拦截器对查询功能进行拦截。
     *   （3）第三步：拦截器对查询功能的基础上做了额外的处理，达到分页的效果（功能）。
     * 3 对比配置mybatis中的插件？
     *   用的也是拦截器的方式。
     *
     * @return MybatisPlusInterceptor
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //添加：分页插件
        //参数：new PaginationInnerInterceptor(DbType.MYSQL)，是专门为mysql定制实现的内部的分页插件
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        //添加：乐观锁插件
        interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());
        return interceptor;
    }
}