Laravel Vuejs 实战：开发知乎 （13）实现编辑问题

1.在question的show blade文件中提供编辑问题的入口【判断用户是否有权编辑，没有权限不显示编辑按钮】：

使用Policy，执行命令：

php artisan make:Policy QuestionPolicy

生成 QuestionPolicy.php文件：

<?php

namespace App\Policies;

use App\Models\Question;
use App\User;
use Illuminate\Auth\Access\HandlesAuthorization;

class QuestionPolicy
{
    use HandlesAuthorization;

    /**
     * Create a new policy instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }


    /**
     * 判断用户是否有权编辑更新问题
     * @param User $user
     * @param Question $question
     * @return bool
     */
    public function update(User $user, Question $question)
    {
        return $user->id === $question->user_id;
    }
}

在 AuthServiceProvider 的 policies 数组属性里添加授权映射关系：

<?php

namespace App\Providers;

use App\Models\Question;
use App\Policies\QuestionPolicy;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Illuminate\Support\Facades\Gate;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        // 'App\Model' => 'App\Policies\ModelPolicy',
        //添加授权映射关系
        Question::class => QuestionPolicy::class,
    ];

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();

        //
    }
}

使用方法：

视图中：

@can('update', $question)
<a href="#">编辑</a>
@endcan

Controller文件中：

auth()->user()->can('update', $question)

关于Policy可以参考：Laravel 用户授权 Gate和Policy  ，Laravel Policy 使用 ，Laravel-权限系统

2.在请求编辑交由QuestionController edit方法处理的时候，判断用户是否有权编辑，返回问题编辑的页面view，并传入question参数，

/**判断权限 返回视图
 * @param Question $question
 * @return \Illuminate\Contracts\View\Factory|\Illuminate\Http\RedirectResponse|\Illuminate\View\View
 */
public function edit(Question $question)
{
    if (auth()->user()->can('update', $question)) //判断当前用户是否有权编辑更新该question实例
    {
        //返回编辑视图
        return view('questions.edit', compact('question'));
    } else {
        //返回警告 没有权限
        return redirect()->back()->with('warning', '你不能编辑不属于你的问题！');
    }
}

跳转没有权限需要给一个提示给用户，所以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 }}
                        @if(session()->has('warning'))
                            <div class="alert alert-warning">{{ session()->get('warning') }}</div>
                        @endif
                        @can('update',$question)
                            <a href="{{ route('questions.edit',$question) }}" class="btn btn-danger">编辑</a>
                        @endcan
                        @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

3.展示question edit编辑视图view

如果有权限的，视图如下：

@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">
                        发布问题
                    </div>
                    <div class="card-body">
                        <form action="{{ route('questions.update',$question) }}" method="post">
                            {{--注意要有csrftoken--}}
                            @csrf
                            @method('PUT')
                            <div class="form-group">
                                <label for="title">标题</label>
                                <input type="text" name="title" class="form-control" placeholder="标题" id="title"
                                       value="{{ $question->title }}">
                                <p class="text text-danger"> @error('title') {{ $message }} @enderror </p>
                            </div>
                            <!-- Select2 Topic Select -->
                            <div class="form-group">
                                <label for="topic_list">选择主题</label>
                                <select id="topic_list" class="js-example-basic-multiple form-control"
                                        name="topics[]" multiple>
                                    @forelse( $question->topics as $topic )
                                        <option value="{{ $topic->id }}" selected>{{ $topic->name }}</option>
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                            <!-- 编辑器容器 -->
                            <script id="container" name="content" type="text/plain"
                                    style="width: 100%">{!! $question->content !!}</script>
                            <p class="text text-danger"> @error('content') {{ $message }} @enderror </p>
                            <!--发布按钮-->
                            <button type="submit" class="btn btn-primary mt-2 float-md-right">更新问题</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer-js')
    <script type="text/javascript">
        // 实例化编辑器
        var ue = UE.getEditor('container', {
            toolbars: [
                ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft', 'justifycenter', 'justifyright', 'link', 'insertimage', 'fullscreen']
            ],
            elementPathEnabled: false,
            enableContextMenu: false,
            autoClearEmptyNode: true,
            wordCount: false,
            imagePopup: false,
            autotypeset: {indent: true, imageBlockLine: 'center'}
        });
        ue.ready(function () {
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
        });
        $(document).ready(function () {
            // Select2多选js
            $('.js-example-basic-multiple').select2({
                // 设置属性及初始化值
                tags: true,
                placeholder: '选择相关话题',
                miniumInputLength: 2,

                ajax: {
                    url: '/api/topics',
                    dataType: 'json',
                    // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
                    delay: 250,
                    data: function (params) {
                        return {
                            // term : The current search term in the search box.
                            //     q : Contains the same contents as term.
                            // _type: A "request type". Will usually be query, but changes to query_append for paginated requests.
                            // page : The current page number to request. Only sent for paginated (infinite scrolling) searches.
                            q: params.term, // search term
                            // page: params.page 暂时不需要分页
                        };
                    },
                    processResults: function (data, params) {
                        // 解析结果为Select2期望的格式
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite
                        // scrolling can be used
                        return {
                            results: data
                        };
                    },
                    cache: true,
                },
                //模板样式
                templateResult: formatTopic,
                //模板样式 【选择项】
                templateSelection: formatTopicSelection,
                escapeMarkup: function (markup) {
                    return markup;
                }
            });
        });

        //格式化话题
        function formatTopic(topic) {
            return "<div class='select2-result-repository clearfix'>" +
            "<div class='select2-result-repository__meta'>" +
            "<div class='select2-result-repository__title'>" +
            topic.name ? topic.name : "Laravel" +
                "</div></div></div>";
        }

        //格式化话题选项
        function formatTopicSelection(topic) {
            return topic.name || topic.text;
        }
    </script>
@endsection

更改说明：

我们原样输出了之前问题里的数据，然后使用method put来进行更新【method域】，更改了action 属性值为questions.update路由，路由传入了$question参数

注：option因为是用户之前已经选过，所以要selected

4.提交更新结果到QuestionController的update方法内部处理逻辑：

/** Update the specified resource in storage.
 * @param QuestionStoreRequest $questionStoreRequest
 * @param Question $question
 * @return \Illuminate\Http\RedirectResponse
 */
public function update(QuestionStoreRequest $questionStoreRequest, Question $question)
{
    //更新前 判断下权限
    if (!(auth()->user()->can('update', $question))) {
        //返回警告 没有权限
        return redirect()->back()->with('warning', '你不能编辑不属于你的问题！');
    }

    //取得更新的字段 使用Eloquent提供的update方法执行问题更新
    $question->update([
        'title' => $questionStoreRequest->get('title'),
        'content' => $questionStoreRequest->get('content'),
    ]);


    //topics的操作这时候看起来有点臃肿 可以使用TopicController来管理，暂时省略
    //存储topics
    $topics = $this->questionRepository->normalizeTopics($questionStoreRequest->get('topics'));
    //使用我们再question model里面添加的topics方法获得 topics关联，
    //再使用sync方法同步tag 【删除的会被删除掉，没删除的就保留，新的就增加】
    $question->topics()->sync($topics);

    //更新完成，跳转回去
    return redirect()->back();
}

注：可以参考 推荐使用 更新一下授权判断：

//更新前 判断下权限
if (!(auth()->user()->can('update', $question))) {
    //返回警告 没有权限
    return redirect()->back()->with('warning', '你不能编辑不属于你的问题！');
}

改为

//更新前 判断下权限
if (!($this->authorize('update', $question))) {
    //返回警告 没有权限
    return redirect()->back()->with('warning', '你不能编辑不属于你的问题！');
}

这样用户不具有更新问题的权限时候会直接跳403权限不足：

更新后代码：

<?php

namespace App\Http\Controllers;

use App\Http\Requests\QuestionStoreRequest;
use App\Models\Question;
use App\Repositories\QuestionRepository;


class QuestionController extends Controller
{

    /**
     * @var QuestionRepository
     */
    private $questionRepository;

    public function __construct(QuestionRepository $questionRepository)
    {
        $this->middleware(
            'auth',
            [
                'except' =>
                    [
                        'index',
                        'show',
                    ]//非注册用户只能查看不能编辑添加更改删除
            ]
        );

        $this->questionRepository = $questionRepository;
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //

    }


    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function create()
    {
        //
        return view('questions.create');
    }


    /**
     * @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->questionRepository->normalizeTopics($request->get('topics'));
        //初始化question要用到的数据
        $data = $request->all();
        $data['user_id'] = auth()->user()->id;

//        $question=Question::create($data); 被下方代码取代
        $question = $this->questionRepository->create($data);

        //使用我们再question model里面添加的topics方法获得 topics关联，再使用attach方法
        $question->topics()->attach($topics);

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


    /**
     * @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'));
    }


    /**判断权限 返回视图
     * @param Question $question
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\Http\RedirectResponse|\Illuminate\View\View
     */
    public function edit(Question $question)
    {
        if ($this->authorize('update', $question)) //判断当前用户是否有权编辑更新该question实例
        {
            //返回编辑视图
            return view('questions.edit', compact('question'));
        } else {
            //返回警告 没有权限
            return redirect()->back()->with('warning', '你不能编辑不属于你的问题！');
        }
    }


    /** Update the specified resource in storage.
     * @param QuestionStoreRequest $questionStoreRequest
     * @param Question $question
     * @return \Illuminate\Http\RedirectResponse
     */
    public function update(QuestionStoreRequest $questionStoreRequest, Question $question)
    {
        //更新前 判断下权限
        if (!($this->authorize('update', $question))) {
            //返回警告 没有权限
            return redirect()->back()->with('warning', '你不能编辑不属于你的问题！');
        }

        //取得更新的字段 使用Eloquent提供的update方法执行问题更新
        $question->update([
            'title' => $questionStoreRequest->get('title'),
            'content' => $questionStoreRequest->get('content'),
        ]);


        //topics的操作这时候看起来有点臃肿 可以使用TopicController来管理，暂时省略
        //存储topics
        $topics = $this->questionRepository->normalizeTopics($questionStoreRequest->get('topics'));
        //使用我们再question model里面添加的topics方法获得 topics关联，
        //再使用sync方法同步tag 【删除的会被删除掉，没删除的就保留，新的就增加】
        $question->topics()->sync($topics);

        //更新完成，跳转回去
        return redirect()->back();
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param int $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }


}

我这里暂时不去实现authorized失败之后页面的定制，所以没有使用$this->authorize方法。

最后QuestionContoller.php代码如下：

<?php

namespace App\Http\Controllers;

use App\Http\Requests\QuestionStoreRequest;
use App\Models\Question;
use App\Repositories\QuestionRepository;


class QuestionController extends Controller
{

    /**
     * @var QuestionRepository
     */
    private $questionRepository;

    public function __construct(QuestionRepository $questionRepository)
    {
        $this->middleware(
            'auth',
            [
                'except' =>
                    [
                        'index',
                        'show',
                    ]//非注册用户只能查看不能编辑添加更改删除
            ]
        );

        $this->questionRepository = $questionRepository;
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //

    }


    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function create()
    {
        //
        return view('questions.create');
    }


    /**
     * @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->questionRepository->normalizeTopics($request->get('topics'));
        //初始化question要用到的数据
        $data = $request->all();
        $data['user_id'] = auth()->user()->id;

//        $question=Question::create($data); 被下方代码取代
        $question = $this->questionRepository->create($data);

        //使用我们再question model里面添加的topics方法获得 topics关联，再使用attach方法
        $question->topics()->attach($topics);

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


    /**
     * @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'));
    }


    /**判断权限 返回视图
     * @param Question $question
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\Http\RedirectResponse|\Illuminate\View\View
     */
    public function edit(Question $question)
    {
        if (auth()->user()->can('update', $question)) //判断当前用户是否有权编辑更新该question实例
        {
            //返回编辑视图
            return view('questions.edit', compact('question'));
        } else {
            //返回警告 没有权限
            return redirect()->back()->with('warning', '你不能编辑不属于你的问题！');
        }
    }


    /** Update the specified resource in storage.
     * @param QuestionStoreRequest $questionStoreRequest
     * @param Question $question
     * @return \Illuminate\Http\RedirectResponse
     */
    public function update(QuestionStoreRequest $questionStoreRequest, Question $question)
    {
        //更新前 判断下权限
        if (!(auth()->user()->can('update', $question))) {
            //返回警告 没有权限
            return redirect()->back()->with('warning', '你不能编辑不属于你的问题！');
        }
        //取得更新的字段 使用Eloquent提供的update方法执行问题更新
        $question->update([
            'title' => $questionStoreRequest->get('title'),
            'content' => $questionStoreRequest->get('content'),
        ]);


        //topics的操作这时候看起来有点臃肿 可以使用TopicController来管理，暂时省略
        //存储topics
        $topics = $this->questionRepository->normalizeTopics($questionStoreRequest->get('topics'));
        //使用我们再question model里面添加的topics方法获得 topics关联，
        //再使用sync方法同步tag 【删除的会被删除掉，没删除的就保留，新的就增加】
        $question->topics()->sync($topics);

        //更新完成，跳转回去
        return redirect()->back();
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param int $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }


}

效果示例：

打开 http://zhihu.test/questions/16

打开 http://zhihu.test/questions/16/edit

打开没有权限的示例【我用tinker设置了user_id=10，当前用户id是3】：

打开http://zhihu.test/questions/18 可以看到，没有编辑按钮

手动输入url打开http://zhihu.test/questions/18/edit 看到提示，【注意代码bug因为上面有redirect()->back()如果之前是从http://zhihu.test/questions/18/edit 打开 然后一直会跳回 导致请求跳转过多异常，不过实际使用这种情况很少见这里就忽略了】