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

使用属性获取器来加载默认图片、已完成和未完成Task数目【数据Count的几种操作】

发布时间：2024-11-10 18:51:01编辑：雪饮阅读（）

使用属性获取器来加载默认图片，这个其实我的存储方式里面是直接存储为路径的。
不过再次之前我们先解决上篇中遗留的一个小问题，就是当你的登录状态丢失后，那么接口就是呈现为未授权状态。
所以我们还需要根据分页请求获取未授权状态消息，然后以此为依据进行跳转到登录前。
所以上篇中Dashboard.vue中我们在接收到分页请求后的响应后需要先处理下如
if(typeof(response.message)!="undefined"){
    if(response.message=="Unauthenticated"){
        location.href="/login";
    }
}
然后这里所谓的属性获取器，我觉得可以这样来用，当某个project没有avatar的时候，我们可以加载一个默认的avatar，则project模型中实现如
public function getAvatarAttribute($value)
{
    if($value){
        return $value;
    }
    return "/images/1.gif";
}
这里面get和Attribute中间部分就是属性名称，首字母要大写。
已完成和未完成Task数目【数据Count的几种操作】
要完成这个任务，我们首先需要在原来user_task表中增加uuid字段
ALTER TABLE `user_task` ADD `uuid` CHAR(100) NULL;
然后需要在原来的UserTaskRepository.php中的update方法中重新调整以增加uuid
原来的核心代码的调整如
//删除原来的job
if($id){
    if($userTask->job_id){
        Jobs::find($userTask->job_id)->delete();
    }
    //兼容处理原来的数据没有job_id
    $job54=Jobs::orderBy("id","desc")->first();
    $userTask->job_id=$job54->id;
    $userTask->uuid=$this->getJobUUid($userTask->job_id);
}

if(!$id){
    $job60=Jobs::orderBy("id","desc")->first();
    $userTask->job_id=$job60->id;
    $userTask->uuid=$this->getJobUUid($userTask->job_id);
}
$userTask->save();
DB::commit();
这里可见的是增加了getJobUUid方法，因为laravel11中默认的uuid是在字段payload中以字符串结构的json里面存储的。所以该方法的实现如
public function getJobUUid($id){
    $job=Jobs::find($id);
    $job->payload=json_decode($job->payload,true);
    return $job->payload["uuid"];
}
那么接下来我则需要根据job_id和uuid分别在关联jobs表与failed_jobs表进行查询统计已完成task与未完成task（laravel11这里涉及就有点恶心了。。。为什么不存储于一个表呢，并且jobs表中的uuid为什么不提升到主字段呢。。。）。
public function statistics(Request $request){

    $finishUserTask= \App\Models\UserTask::where(function($query){
        $jobIds=Jobs::pluck("id");
        $query->whereNotIn('id', $jobIds);
    })->count();

    $unfinishedUserTask=\App\Models\UserTask::where(function($query){
        $jobids=Jobs::pluck("id");
        $query->whereIn('job_id', $jobids);
    })->orWhere(function($query){
        $jobUuids=FailedJobs::pluck("uuid");
        $query->whereIn('uuid', $jobUuids);
    })->count();

    return [
        "finishUserTask"=>$finishUserTask,
        "unfinishedUserTask"=>$unfinishedUserTask
    ];
}
那么加于web.php中auth组中的路由是自不必少了
Route::get('/dashboard/statistics', [DashboardController::class, 'statistics'])->name('dashboard.statistics');
前端Dashboard.vue中需要定义存储这两种状态的统计数据
const statisticsData=ref({});
封装并调用这两种统计数据
const getStatistics=()=>{
    axios.get(route('dashboard.statistics'))
        .then(response => {
            console.log("getstatistics response.data",response.data);
            statisticsData.value=response.data;
        })
        .catch(error => {

        });

}
getStatistics();
显示的效果，我就用element plus中的Badge徽章来呈现。
<div class="p-6 text-gray-900 dark:text-gray-100">
    <div style="display: flex;gap:1rem;">
        <el-badge :value="statisticsData.finishUserTask" class="item">
            <el-button>finish user task</el-button>
        </el-badge>
        <el-badge :value="statisticsData.unfinishedUserTask" class="item">
            <el-button>unfinished user task</el-button>
        </el-badge>
    </div>

</div>
最终呈现的前端效果

所谓数据库的几种count操作？其实千变万变都是一种，主要是前置条件不同，例如不同的where。当然，你也可以查询出数据后整体再由程序侧进行计算。
本期词汇
Badge 徽章，奖章
Universally 随时随地，在各种情况下
Identifier 标识符，认同者