Laravel Vuejs 实战：开发知乎 （11）实现选择话题整个流程

修改QuestionController.php如下：

1.处理Topic：

/**
 * @param array $topics
 * @return array
 */
private function normalizeTopics(array $topics)
{
    //返回topic的id序列，如果不是数字，则强制认为是数据库中的topic的id，
    //这样虽然会漏掉用户如果设置的topic就是数字的情况，但是因为是测试，所以暂时忽略
    $normalizedTopics = collect($topics)->map(function ($topic) {
        if (is_numeric($topic))//是数字
        {
            //在数据库中找id
            $num_topic = Topic::query()->find($topic);
            if (isset($num_topic) && $num_topic->count() > 0) //在数据库中找得到id
            {
                //因为是找到了 且是从question处提交，其内部的question_count应该增加1个
                $num_topic->increment('questions_count');
                //返回id
                return (int)$num_topic->id;
            }
        }
        //否则创建一个新的topic
        //再之前先判断是否找得到，因为有时候重复提交，select2在提交的数据中不为数字，但是实际上数据库中已经有值
        $already = Topic::query()->select('id', 'name')->where('name', '=', $topic);

        if ($already->count() > 0) {
            //因为是找到了 且是从question处提交，其内部的question_count应该增加1个
            $already->increment('questions_count');
            //返回id
            return $already->first()->id;
        }
        $data_of_topic = [
            'name' => $topic,//目前view中topic只有一个选择框，没有设置content的输入框
            'questions_count' => 1,//因为是找到了 且是从question处提交，其内部的question_count应该初始化为1个
        ];
        //入库
        $newTopic = Topic::create($data_of_topic);
        //返回id
        return $newTopic->id;
    })->toArray();

    return $normalizedTopics;
}

2.更新关联：

 /**
     * @param QuestionStoreRequest $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function store(QuestionStoreRequest $request)//依赖注入QuestionStoreRequest实例
    {
        //
//        $data = $request->validate([
//            'title' => 'required|min:8',
//            'content' => 'required|min:28',
//        ]);
        //存储topics
        $topics = $this->normalizeTopics($request->get('topics'));
        //初始化question要用到的数据
        $data = $request->all();
        $data['user_id'] = auth()->user()->id;

        $question = Question::create($data);
        //使用我们再question model里面添加的topics方法获得 topics关联，再使用attach方法

        $question->topics()->attach($topics);

        return redirect()->route('questions.show', $question);
    }

参考模型关联的官方文档：我们使用了attach方法，更多关于attach，detach，sync方法的介绍可以看：Laravel 模型关联attach,save,sync方法参数类型验证 及 laravel 多对多关联 attach detach sync 。

代码：$question->topics()->attach($topics); 解析：

根据Question.php模型下的topics方法，关联信息的表是questions_topics，如果不设置，会有一个默认值

public function topics()
{
    return $this->belongsToMany(
        Topic::class,
        'questions_topics' //表名我设置的是questions_topics，可能不是系统自动解析的question_topic
    )->withTimestamps();//withTimestamps操作questions_topics表中create_at及updated_at字段的
}

操作questions_topics表，使用attach方法，向表中添加question_id 对应的 $topics数组里的id数组值。如图：

由于当前显示的页面中不够完善，我们想看到添加的question的topics信息，所以在QuestionController.php的show方法更改如下以提供view需要的数据：

/**
 * @param Question $question
 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
 */
public function show(Question $question)
{
    //使用关系关联加载，with方法会将分类之下的商品一起查询出来，而且不会出现N+1影响性能的问题
    $question->with('topics')->get();

    return view('questions.show', compact('question'));
}

关于with方法的介绍：

预加载

Laravel的Eloquent ORM 关联关系中的with用法

然后修改show.blade.php文件如下：

@extends('layouts.app')

@section('content')

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md offset-2">
                <div class="card">
                    <div class="card-header">
                        {{ $question->title }}
                        @forelse($question->topics as $topic)
                            <button class="btn btn-secondary float-md-right m-1">{{ $topic->name }}</button>
                        @empty
                            <p class="text text-warning float-md-right"> "No Topics"</p>
                        @endforelse
                    </div>
                    <div class="card-body">
                        {!! $question->content !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        .card-body img {
            width: 100%;
        }
    </style>
@endsection

最后效果如下：