程序人生网站首页 程序人生

unique rule的进一步限定与项目分类悬浮状态条效果实现(laravel11的子关联模型调用)

发布时间：2024-11-03 13:01:01编辑：雪饮阅读（）

unique rule的进一步限定

其实关于unique的进一步限定，我们上次限定了name为unique并且进一步限定了project的id为当前id时则是例外，这种也就是我们进一步限定了。

那么这里我们需要另外完善的是创建项目页面的avatar头像选择后的预览。

然后在Index.vue编写实现方法如

然后对input的事件调用上面的方法

<input type="file" @input="fileChange($event)" />

图片预览

可以看到form加入了src属性，所以form也要定义下

const form = useForm({
    name: user.name,
    avatar: null,
    src:null
});

项目分类悬浮状态条效果实现

这个所谓的悬浮状态条的效果我也不是很清楚，不过我们目前是有项目分类，但是项目创建的时候没有选择分类的地方。

这是要实现的地方。

那么既然要实现项目的分类，则项目表也需要新增一个分类自段

alter table project add column `category` int NOT NULL;

然后我们之前的项目模型对于项目分类暂时我这里认为应该是做一个项目属于一个分类的一对一关系。暂时不考虑一个项目有多个分类的情况。

所以项目模型中需要实现hasOne如

public function category(): HasOne
{
return $this->hasOne(project_category::class,"id","category");
}

那么咱们的项目控制器的update方法中自然也需要将项目分类的前端数据同步创建于数据表中。

/**
* Update the user's project information.
*/
public function update(ProjectUpdateRequest $request):RedirectResponse
{
    $this->log(var_export($request->user(),true));
    $this->log("uid:".$request->user()->id);

    $file=$request->file('avatar');
    $path=$file->store('','public');
    $url = Storage::url($path);

    $uid=$request->user()->id;
    $name=$request->input("name");
    $category=$request->input("category");
    $project=new Project();
    $project->uid=$uid;
    $project->name=$name;
    $project->avatar=$url;
    $project->category=$category;
    $project->save();

    return Redirect::route('project.index');
}

那么在项目列表的回显对应的项目控制器的index方法中也应该将分类回显回去

public function index(Request $request):Response
{
    $projects=User::with("projects.category")->find($request->user()->id)->projects;
    $categories=project_category::get();
    return Inertia::render('Project/Index', [
        'projects' => $projects,
        'categories'=>$categories
    ]);
}

可以看到这里用with，这个with不仅能查询关联模型，还能查询关联模型的关联模型，比如这里的projects.category，就表示每个project里面又包含category的hasOne关联。

那么对于前端来说之前的项目详情组件中也应该回显到项目分类。

<div>
<label>project category:</label><span class="text-gray-800">{{ project.category?.name }}</span>
</div>

可以看到这里项目分类名称也是二级json对象的调用，因为关联模型这里是没有直接提到和主模型同一级别，应该是可以的，只是这里暂时不讨论这个了。

那么接下来我们要实现创建项目时候分类的下拉选择。

则index.vue完整如：