您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

一些细节和样式的优化(laravel11基于inertia响应分页与关联模型分页、排序)

发布时间：2024-11-12 15:13:25编辑：雪饮阅读（）

一些细节就是之前项目列表也没有分页。
那么项目列表当时是区分两种，一种是当前用户一种是所有用户，那么一种是通过hasMany获取的，一种是直接获取的。
另外一种是没有id降序的，一种是有id降序的。
那么这里就来实现下根据关联模型进行排序与分页。
由于之前封装于ProjectRepository中的index方法中
但我觉得形参可以直接用Request的实例就可以了。
所以总体来重新封装index实现如
public function index($request)
{
    $pageSize=$request->input("pageSize",2);
    $type=$request->input("type",0);
    $uid=$request->user()->id;
    if($type){
        $projects=Project::with(["user","category"])->orderBy('id',"desc")->paginate($pageSize);
    }
    if(!$type){
        $projects=User::with([
            "projects" => function ($query) {
                $query->orderBy('id', 'desc');
            },
            "projects.user",
            "projects.category"
        ])->find($uid)->projects()->orderBy('id',"desc")->paginate($pageSize);
    }
    return $projects;

}
这里可以看到，当使用hasMany获取projects之前仅仅只是属性调用方式，这里则是方法调用方法，区别就是方法调用方式就可以以Eloquent的Query对象继续连缀其它方法，如排序，如分页。
那么之前的index.vue这个项目列表中关于projects属性需要修改使用的时候以projects.data。
特别像是
Project list (total:{{projects.total}})
以及
<template v-for="(project,index) in projects.data" :key="project.id">
    <div style="display: flex;justify-content: space-between;gap:1rem;">
        <Project :project="project"/>
        <div>
            <PrimaryButton class="ms-4" style="height:30px;" @click="EditProject(index)">Edit</PrimaryButton>
            <PrimaryButton class="ms-4" style="height:30px;" @click="Delete(index)">Delete</PrimaryButton>
        </div>

    </div>

</template>
最后引入分页组件
<div style="display: flex;justify-content: flex-end;">
    <div class="example-pagination-block">
        <el-pagination layout="prev, pager, next" :total="projects.total" :page-size="projects.per_page" :default-current-page="projects.current_page" @change="pageChange"/>
    </div>
</div>
但这里的分页就是反而用inertia的响应更方便，因为单分页的缘故。
所以这里也可以使用inertia的手动访问来实现页码改变事件
const pageChange=(newPageNum)=>{
    let visitObject={
        method: 'get',
        data: {
            page:newPageNum,
            type:props.type
        },
        replace: false,
        preserveState: false,
        preserveScroll: false,
        only: [],
        headers: {},
        errorBag: null,
        forceFormData: false,
        onCancelToken: cancelToken => {},
        onCancel: () => {},
        onBefore: visit => {},
        onStart: visit => {},
        onProgress: progress => {},
        onSuccess: page => {},
        onError: errors => {},
        onFinish: visit => {},
    };
    router.visit(route('project.index'),visitObject)
}

 
本期词汇
Repository 贮藏室，仓库
Pagination 标记页数；页码
Relationships 人际关系；生物间的关系