vue3 分页插件总结【代替 模板引擎】

<ul class="pagination"  >

<#--        <#list 1..pagination.totalPage as page>-->
            <li v-for="page in pages" :class="[page==curPage?'active':'']"><a href="javascript:void(0);" onclick="return false">{{ page }}</a></li>
<#--        </#list>-->

    </ul>

           

<script>
        const app = Vue.createApp({
            data() {
                return {
                    list:[
                        {
                            id:1,
                            note:'hello world'
                        }
                    ],
                    curPage:1,
                    totalPage:8,
                    size:1,
                    totalCount:1
                }
            },
            created() {
                let app = this;
                $.ajax({
                    type:'GET',
                    url:'searchCode?q=',
                    success: (data) => {
                        console.log(data)
                        const {list, curPage, totalPage,size,totalCount} = data;
                        app.list = list;app.curPage = curPage;app.totalPage = totalPage;app.size = size ; app.totalCount = totalCount;

                    }
                })
            },
            computed:{
                pages() {
                    const c = this.curPage
                    const t = this.totalPage
                    if (t<10) {
                        let a = [];
                        for (let i=1;i<= this.totalPage;++i) a.push(i);
                        return a;
                    }
                    if (c <= 5) {
                        return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t]  //第一种情况
                    } else if (c >= t - 4) {
                        return [1, '...', t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t] //第二种情况
                    } else {
                        return [1, '...', c-3, c-2, c-1, c, c+1, c+2, c+3, '...', t]  //第三种情况
                    }





                }
            }
        })
        const vm = app.mount('#root')

    </script>
           

后台代码：

@GetMapping("/searchCode")
    @ResponseBody
    public PageInfo<CodeDemo> codeDemo(@RequestParam(defaultValue = "") String q,@RequestParam(required = false,defaultValue = "1") Integer page) {
        return PageInfo.of(
          codeDemoRepository.findAllByTitleContaining(q, PageRequest.of(page-1,5))
        );
    }

           

package com.lyr.easymybatis.pojo.dto;

import lombok.Data;
import lombok.experimental.Accessors;
import org.springframework.data.domain.Page;

import java.util.List;

/**
 * @Author lyr
 * @create 2020/12/16 18:16
 */
@Data
@Accessors(chain = true)
public class PageInfo<T> {

    private Integer totalPage;
    private Integer curPage;
    private Integer size;
    private Long totalCount;

    private List<T> list;

    public static <T> PageInfo<T> of(Page<T> ipage) {
        PageInfo<T> pageInfo = new PageInfo<>();
        pageInfo.curPage = ipage.getNumber() + 1;
        pageInfo.size = ipage.getSize();
        pageInfo.totalCount = ipage.getTotalElements();
        pageInfo.list = ipage.getContent();
        pageInfo.totalPage = ipage.getTotalPages();
        return pageInfo;
    }

}