Laravel Vuejs 实战：开发知乎 （23）用户关注之组件化开发

开发vue的时候最好在开始的时候执行:

npm install && npm run watch-poll

这样每次编辑了vue都会后台自动生成一下，方便查看效果。

1.生成一个控制器：

php artisan make:controller FollowerController

代码：

<?php

namespace AppHttpControllers;

use AppUser;
use IlluminateHttpRequest;

class FollowerController extends Controller
{
    //
    public function __construct()
    {
        $this->middleware('auth')
            ->except(
                [
                    'getFollowStats',
                    'followThroughApi',
                ]
            );
    }


    public function getFollowStats(Request $request)
    {
        //解析出用户
        $user = User::find($request->get('user'));
        //解析出当前登录用户
        $currentUser = auth()->user();
        //返回能否关注的状态 [follow是FollowPolicy中的follow方法，FollowPolicy已经在AuthServiceProvider中注册]
        return response()->json(['followable' => $currentUser->can('follow', $user),
            'self' => $user->id === $currentUser->id,]);
    }


    public function followThroughApi(Request $request)
    {
        //解析出用户
        $user = User::find($request->get('user'));

        //解析出当前登录用户
        $currentUser = auth()->user();

        //执行关注/取关操作 [不能关注自己]
        if ($user->id !== $currentUser->id) {
            $currentUser->followings()->toggle($user->id);
        }

        //返回新能否关注的状态 [follow是FollowPolicy中的follow方法，FollowPolicy已经在AuthServiceProvider中注册]
        return response()->json(
            [
                'followable' => $currentUser->can('follow', $user),
                'self' => $user->id === $currentUser->id,
            ]
        );
    }
}

1.2 添加一个授权策略

php artisan make:policy FollowPolicy

<?php

namespace AppPolicies;

use AppUser;
use IlluminateAuthAccessHandlesAuthorization;

class FollowPolicy
{
    use HandlesAuthorization;

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

    public function follow(User $currentUser, User $user)
    {
        //用户不能关注自己，也不能关注已经关注的用户
        return $currentUser->id !== $user->id && !($currentUser->followings->contains('id', $user->id));
    }
}

记得添加到AuthServiceProvider的 $policies中

代码：

<?php

namespace AppProviders;

use AppModelsQuestion;
use AppPoliciesFollowPolicy;
use AppPoliciesQuestionPolicy;
use AppUser;
use IlluminateFoundationSupportProvidersAuthServiceProvider as ServiceProvider;
use IlluminateSupportFacadesGate;

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

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

        //
    }
}

2.添加api route：

#region 用户关注
//加载页面时取关注状态
Route::middleware('auth:api')->post('/users/follow/stats', 'FollowerController@getFollowStats');
//执行关注/取关操作
Route::middleware('auth:api')->post('/users/follow', 'FollowerController@followThroughApi');

#endregion

<?php

use IlluminateHttpRequest;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::middleware('api')->get('/topics', function (Request $request) {
    $query = $request->query('q');
    return AppTopic::query()->where('name', 'like', '%' . $query . '%')->get();
});
#region 问题关注
//加载页面时取关注状态
Route::middleware('auth:api')->post('/questions/follow/stats', 'QuestionController@getFollowStats');
//执行关注/取关操作
Route::middleware('auth:api')->post('/questions/follow', 'QuestionController@followThroughApi');
#endregion

#region 用户关注
//加载页面时取关注状态
Route::middleware('auth:api')->post('/users/follow/stats', 'FollowerController@getFollowStats');
//执行关注/取关操作
Route::middleware('auth:api')->post('/users/follow', 'FollowerController@followThroughApi');

#endregion

3.添加用户关注按钮vue组件：

<template>
    <button :class="classObject"
            @click="follow"
            v-text="text">
    </button>
</template>

<script>
    export default {
        props: ['user'],
        name: "UserFollowButton",
        data() {
            return {
                followable: true,
                self: true,
            }
        },
        computed: {
            text() {
                return this.followable ? "关注" : "取关";
            },
            classObject() {
                if (this.self) {
                    return "d-none"
                }
                return this.followable ? "btn btn-sm btn-secondary" : "btn btn-sm btn-danger";
            },
        },
        mounted: function () {
            let currentObj = this;
            axios.post('/api/users/follow/stats', {'user': this.user})
                .then(function (response) {
                    currentObj.followable = response.data.followable;
                    currentObj.self = response.data.self;
                })
                .catch(function (e) {
                    console.log(e);
                });
        },
        methods: {
            follow() {
                let currentObj = this;
                axios.post('/api/users/follow', {'user': this.user})
                    .then(function (response) {
                            currentObj.followable = response.data.followable;
                            currentObj.self = response.data.self;
                        }
                    )
                    .catch(function (e) {
                        console.log(e);
                    });
            },
        }
    }
</script>

<style scoped>

</style>

<div class="card-footer float">
    <div class="text-center float-left mr-4">
        <div class="text">提问数</div>
        <div class="number">{{ $question->user->questions_count }}</div>
    </div>
    <div class="text-center float-left mr-4">
        <div class="text">回答数</div>
        <div class="number">{{ $question->user->answers->count() }}</div>
    </div>
    <div class="text-center float-left ">
        <div class="text">粉丝数</div>
        <div class="number">{{ $question->user->followers->count() }}</div>
    </div>
</div>

补充：之前User模型中 外键设置理解错误了，参考：

数据库（外键及其约束理解）

Laravel学习记录--Model

修改后：

<?php

namespace App;

use AppModelsQuestion;
use IlluminateContractsAuthMustVerifyEmail;
use IlluminateDatabaseEloquentSoftDeletes;
use IlluminateFoundationAuthUser as Authenticatable;
use IlluminateNotificationsNotifiable;

class User extends Authenticatable implements MustVerifyEmail
{
    use Notifiable;
    #region 支持软删除
    use SoftDeletes;
    protected $dates = ['deleted_at'];
    #endregion
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password', 'avatar', 'activation_token', 'api_token'
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];


    /**添加用户模型和问题模型的模型关联
     * @return IlluminateDatabaseEloquentRelationsHasMany
     */
    public function questions()
    {
        return $this->hasMany(Question::class);
    }


    /** 添加用户模型和回答模型的模型关联 一个用户可以有多个回答
     * @return IlluminateDatabaseEloquentRelationsHasMany
     */
    public function answers()
    {
        return $this->hasMany(Answer::class);
    }


    public function followQuestions()
    {
        //默认表名 可以不设置后面三个参数，自定义表名需要设置
        return $this->belongsToMany(Question::class, 'users_questions', 'question_id', 'user_id')->withTimestamps();
    }


    /** 用户的粉丝
     * @return IlluminateDatabaseEloquentRelationsBelongsToMany
     */
    public function followers()
    {

        return $this->belongsToMany
        (
            self::class,
            'followers',
            'user_id', //foreignPivotKey:当前模型在中间表的字段(当前模型类的外键) //【当前模型是leader】的外键id
            'follower_id'//relatedPivotKey:另一模型在中间表的字段(另一模型类的外键)
        )->withTimestamps();
    }


    /** 用户关注的作者
     * @return IlluminateDatabaseEloquentRelationsBelongsToMany
     */
    public function followings()
    {
        return $this->belongsToMany
        (
            self::class,
            'followers',
            'follower_id',//foreignPivotKey:当前模型在中间表的字段(当前模型类的外键) //【当前模型是粉丝】的外键id
            'user_id'//relatedPivotKey:另一模型在中间表的字段(另一模型类的外键)
        )
            ->withTimestamps();
    }
}