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

编辑保存项目的逻辑(laravel里的两种数据绑定)

发布时间：2024-11-04 14:24:07编辑：雪饮阅读（）

说到项目的编辑，其实之前都是项目的创建，而编辑无外乎多了一个项目id的加入。
那么首先我们需要在项目列表页面中加入id访问到项目创建页面，但其实我们现在已经修改为模态框的形式进行项目创建了，所以和项目列表页面是在同一个界面的，对于此其实更应该实现于一个独立的模态框组件中，但这里做完了才发现的。
首先是分类这里需要优化下，之前分类是直接显示出来模拟的下拉框就自动展开的。我们需要手动，这样才符合逻辑，我的实现是默认不展开，点击下才展开，再点击下就关闭，以及选择某个条目上面点击下再次也关闭。
所以首先就是默认关闭，点击下展开，再点击下关闭的实现
                                                      <button type="button" class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm/6" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click="CategoryListSwitch">
<span class="flex items-center">
<span class="ml-3 block truncate">{{getSelectedCategoryName()}}</span>
</span>
                                                          <span class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
  <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
    <path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" />
  </svg>
</span>
                                                      </button>
这里用的方法CategoryListSwitch 的实现如：
const CategoryListSwitch=()=>{
    state.showCategory=!state.showCategory;
}
根据上面CategoryListSwitch方法的实现，我们则需要给state子属性多加一个定义了。
const state = useForm({
    state:false,
    showCategory:false
});
那么对于默认没有选择的情况下，我们也需要兼容下选中分类的回显
const getSelectedCategoryName=()=>{
    for(var i in props.categories){
        if(props.categories[i].id==form.category){
            return props.categories[i].name;
        }
    }
    return "please choice category";
}
那么接下来就是对是否需要展开时候的下拉展示进行处理
         <template v-if="state.showCategory">
                                                            <template  v-for="(category,index) in categories">
                                                                <li :class="getMouseOverClassByCategory(index)" @mouseover="mouseOverCategory(index)" @mouseout="mouseOutCategory" id="listbox-option-0" role="option" @click="categorySelected(index)">
                                                                    <div class="flex items-center">
                                                                        <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
                                                                        <span class="ml-3 block truncate font-normal">{{category.name}}</span>
                                                                    </div>
                                                                    <span :class="getClassBySelectCategory(index)">
                                                                    <template v-if="getCategoryIsActivated(index)">
                                                                        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
  </svg>
                                                                    </template>

</span>
                                                                </li>
                                                            </template>
                                                        </template>
同样的，对于选中某项后是需要关闭下拉的
const categorySelected=(index)=>{
    form.category=props.categories[index].id;
    state.showCategory=false;
}
接下来就是正式的项目编辑了，我们需要给每个项目加一个编辑按钮
<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
    <template v-for="(project,index) in projects" :key="project.id">
        <div style="display: flex;justify-content: space-between;gap:1rem;">
            <Project :project="project"/>
            <PrimaryButton class="ms-4" style="height:30px;" @click="EditProject(index)">Edit</PrimaryButton>
        </div>

    </template>

</div>
可以看到这里用EditProject方法实现了打开项目编辑的模态框。
则其实现如
const EditProject=(index)=>{
    form.category=props.projects[index].category?.id;
    form.name=props.projects[index].name;
    form.avatar=props.projects[index].avatar;
    form.id=props.projects[index].id;
    state.state=true;
}
根据其实现，所以我们的form对象中也需要添加id了。
const form = useForm({
    name: user.name,
    avatar: null,
    src:null,
    category:null,
    id:0
});
post请求的时候则是同样
function submit() {
    router.post(`/project`, {
        _method: 'patch',
        avatar: form.avatar,
        name:form.name,
        category:form.category,
        id:form.id
    },{
        onSuccess:()=>{
            state.state=false;
        },
        onError:(errors)=>{
            console.log("errors",errors);
            form.errors.name=errors.name;
        }
    })
}
那么最后就是项目控制器中的update的进一步实现，根据是否有id（同样是save，但不所属宿主对象不同，所以数据绑定到不同的宿主对象，这也是laravel中的两种数据绑定，一种是有id时候通过从数据库里面get后进行进一步绑定，一种是直接new之后进行绑定，最后统一save），进行不同的处理，同样的头像如果是从数据库取出又重新提交上来时并没有选择新的文件时则只是旧的记录只是一个字符串表示的访问路径。
所以update的实现如：
public function update(ProjectUpdateRequest $request):RedirectResponse
{
    $this->log(var_export($request->user(),true));
    $this->log("uid:".$request->user()->id);
    $id=$request->input("id");

    $project=new Project();
    if($id){
        $project=Project::find($id);
    }
    $file=$request->file('avatar');
    if($file){
        $path=$file->store('','public');
        $url = Storage::url($path);
        $project->avatar=$url;
    }
    if(!$file){
        $project->avatar="/images/1.gif";
        //考虑到没有文件上传的时候，但从编辑之前的数据记录来的旧图片
        $avatar=$request->input("avatar");
        if($avatar){
            $project->avatar=$avatar;
        }
    }


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

    return Redirect::route('project.index');
}
最后的效果如