一、创建数据表

生成话题模型

php artisan make:model Topic -m

生成话题和问题的关联表

php artisan make:migration create_questions_topics_table --create=question_topic

修改生成的 topics_table.php

public function up()
{
    Schema::create('topics', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->text('desc')->nullable();
        $table->integer('questions_count')->default(0);
        $table->integer('followers_count')->default(0);
        $table->timestamps();
    });
}

修改生成的 questions_topics_table.php

public function up()
{
    Schema::create('question_topic', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('question_id')->unsigned()->index();
        $table->integer('topic_id')->unsigned()->index();
        $table->timestamps();
    });
}

修改 app/Question.php

public function topics()
{
    return $this->belongsToMany(Topic::class)->withTimestamps();
}

修改 app/Topic.php

protected $fillable = ['name','desc','questions_count','followers_count'];

public function questions()
{
    return $this->belongsToMany(Question::class)->withTimestamps();
}

执行数据迁移

php artisan migrate

修改 database/factories/ModelFactory.php

$factory->define(App\Topic::class, function (Faker\Generator $faker) {
    return [
        'name' => $faker->word,
        'desc' => $faker->paragraph,
    ];
});

进入 tinker

php artisan tinker

生成数据

factory(App\Topic::class,11)->create()

修改生成数据的 name

二、select2

下载：https://select2.org/getting-started/installation

https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css
https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js

将 select2.min.css 下载后放在 resources/assets/css 目录下

将 select2.min.js 下载后放在 resources/assets/js 目录下

修改 resources/assets/sass/app.scss

@import "../css/select2.min";
@import "../css/style";

修改 resources/assets/js/bootstrap.js

require('bootstrap-sass');
require('./select2.min');

新建 resource/assets/css/style.css

.panel-body img {
    width: 100%;
}

a.topic {
    background: #eff6fa;
    padding: 1px 10px 0;
    border-radius: 30px;
    text-decoration: none;
    margin: 0 5px 5px 0;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
}

a.topic:hover {
    background: #259;
    color: #fff;
    text-decoration: none;
}

执行

npm install
gulp

修改 gulpfile.js

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');

    mix.version(['js/app.js','css/app.css'])
});

修改 resources/views/layouts/app.blade.php

href="{{ elixir('/css/app.css') }}
src="{{ elixir('/js/app.js') }}"

@yield('js')

修改 routes/api.php

Route::get('/topics', 'TopicsController@index')->middleware('api');

创建话题控制器

php artisan make:controller TopicsController

新建 app/Repositories/TopicRepository.php

namespace App\Repositories;

use App\Topic;

class TopicRepository
{
    public function getTopicsForTagging()
    {
        return Topic::select(['id','name'])
            ->where('name','like','%'.request('q').'%')
            ->get();
    }
}

修改 app/Http/Controllers/TopicsController.php

namespace App\Http\Controllers;

use App\Repositories\TopicRepository;

class TopicsController extends Controller
{
    protected $topicRepository;

    public function __construct(TopicRepository $topicRepository)
    {
        $this->topicRepository = $topicRepository;
    }

    public function index()
    {
        return $this->topicRepository->getTopicsForTagging();
    }
}

修改 resources/views/questions/create.blade.php

注意：vendor.ueditor.assets 必须在 js 后面

@section('js')
@include('vendor.ueditor.assets')

修改 app/Http/Controllers/QuestionsController.php

use App\Topic;

public function store(StoreQuestionRequest $request)
{
    $topics = $this->normalizeTopic($request->get('topics'));
    $data = [
        'title' => $request->get('title'),
        'content' => $request->get('content'),
        'user_id' => Auth::id()
    ];
    $question = Question::create($data);
    $question->topics()->attach($topics);
    return redirect()->route('questions.show',[$question->id]);
}

public function show($id)
{
    $question = Question::where('id', $id)->with('topics')->first();
    return view('questions.show', compact('question'));
}

private function normalizeTopic(array $topics)
{
    return collect($topics)->map(function ($topic){
        if(is_numeric($topic)){
            Topic::find($topic)->increment('questions_count');
            return (int) $topic;
        }
        $newTopic = Topic::create(['name'=>$topic,'questions_count'=>1]);
        return $newTopic->id;
    })->toArray();
}

修改 resources/views/questions/show.blade.php 

访问 http://127.0.0.1:8000/questions/create 进行测试