Laravel 8开发关于我们页面图文重复及交替布局实现咨询

问题根源说明 #

你当前遇到重复显示的核心原因有三点：

• 两个布局区块都复用了同一组字段（image/description/sentence），没有调用表结构里存储第二组图文的对应字段
• 后端更新逻辑错误，把第二组的photo/paragraph/segment字段写死为字符串required，没有正确存储提交的内容
• 控制器查询返回了所有记录的集合，没有取单条关于页配置数据

修复步骤 #

1. 修复后端更新逻辑 #

修正字段赋值错误，新增第二组图片photo的上传处理逻辑：

$this->validate($request,[
    'title' => 'required',
    'description' => 'required',
    'sentence' => 'required',
    'image' => 'image|mimes:png,jpg,jpeg|max:4048',
    'photo' => 'image|mimes:png,jpg,jpeg|max:4048',
    'paragraph' => 'required',
    'segment' => 'required',
]);

$about = About::findOrFail($request->id);

// 处理第一组主图image
if($request->hasFile('image')){
    $image_path = public_path('images/abouts/').$about->image;
    if(File::exists($image_path)){
        unlink($image_path);
    }
    $file = $request->image;
    $imageName = time()."_".$file->getClientOriginalName();
    $file->move(public_path("images/abouts/"), $imageName);
    $about->image = $imageName;
}

// 新增处理第二组图片photo
if($request->hasFile('photo')){
    $photo_path = public_path('images/abouts/').$about->photo;
    if(File::exists($photo_path)){
        unlink($photo_path);
    }
    $file = $request->photo;
    $photoName = time()."_".$file->getClientOriginalName();
    $file->move(public_path("images/abouts/"), $photoName);
    $about->photo = $photoName;
}

// 修正更新字段赋值
$about->update([
    'title' => $request->title,
    'description' => $request->description,
    'sentence' => $request->sentence,
    'image' => $about->image,
    'photo' => $about->photo,
    'paragraph' => $request->paragraph,
    'segment' => $request->segment,
]);

2. 修复控制器查询逻辑 #

关于页为单条配置，直接取第一条记录即可：

public function index()
{
    return view('about')->with([
        'about' => About::first(),
    ]);
}

3. 修复前端模板布局 #

第二组左文右图区块调用对应第二组字段即可，避免复用第一组数据：

<!-- 第一组：左图右文 -->
<div class="site-section">
  <div class="container">
    <div class="row align-items-center mr-5">
      <div class="col-lg-6 py-5 px-5">
        <img src="{{asset($about->image)}}" class="img-fluid rounded" style="width:500px;height:500px;">
      </div>
      <div class="col-lg-6 pl-lg-5 ">
        <h3 class="mt-0 font-weight-bold py-2">{{$about->title}}</h3>
        <p class="text-justify pt-0 mr-5">{{$about->description}}</p>
        <p class="text-justify pt-0 mr-5">{{$about->sentence}}.</p>
     </div>
    </div>
  </div>
</div>

<!-- 第二组：左文右图 -->
<div class="site-section">
  <div class="container">
    <div class="row align-items-center mr-5">
      <div class="col-lg-6 pl-lg-5 ">
        <p class="text-justify pt-3 mr-5">{{$about->paragraph}}</p>
        <p class="text-justify pt-3 mr-5">{{$about->segment}}</p>
      </div>
      <div class="col-lg-6 py-5 px-5">
        <img src="{{asset($about->photo)}}" alt="" class="img-fluid rounded" style="width:500px;height:500px;">
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user12371426