1 创建表
php artisan make:model Vote -m
public function up()
{
Schema::create(‘votes‘, function (Blueprint $table) {
$table->bigIncrements(‘id‘);
$table->unsignedInteger(‘user_id‘)->index();
$table->unsignedInteger(‘answer_id‘)->index();
$table->timestamps();
});
}
View Code
2 代码
2.1 \app\User.php
public function votes()
{
return $this->belongsToMany(Answer::class,‘votes‘)
->withTimestamps();
}
public function voteFor($answer)
{
return $this->votes()->toggle($answer);
}
public function hasVotedFor($answer)
{
return !! $this->votes()->where(‘answer_id‘,$answer)->count();
}
View Code
2.2 \resources\js\components\UserVoteButton.vue
<template>
<button class="btn btn-default"
v-text="text"
v-on:click.prevent="vote"
v-bind:class="{‘btn-success‘:voted}">
</button>
</template>
<script>
export default {
name: "UserVoteButton",
props:[‘answer‘,‘count‘],
// mounted是vue中的一个钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作
mounted(){
axios.post(‘/api/answer/‘ + this.answer+‘/votes/users‘).then(res => {
this.voted = res.data.voted
console.log(res.data);
},error => {
console.log(error);
//console.log(error.response.status)
if(error.response.status==401){
this.auth = false
}
})
},
data(){
return {
voted:false ,
auth:true ,
count2:this.count
}
},
computed:{
text(){
return this.count2
}
},
methods:{
vote(){
axios.post(‘/api/answer/vote‘,{‘answer‘:this.answer}).then(res => {
this.voted = res.data.voted
res.data.voted ? this.count2++ : this.count2--
console.log(res.data)
})
}
}
}
</script>
<style scoped>
</style>
View Code
2.3 \app\Repositories\AnswerRepository.php
public function GetAnswerById($id)
{
return Answer::find($id);
}
2.4 \app\Http\Controllers\Api\VotesController.php
php artisan make:controller Api/VotesController
<?php
namespace App\Http\Controllers\Api;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\Controller;
use App\Repositories\AnswerRepository;
class VotesController extends Controller
{
/**
* 答案仓库
*/
protected $answer;
/**
* 初始化
*/
public function __construct(AnswerRepository $answer)
{
$this->answer = $answer;
}
//
public function users($id)
{
$user = Auth::guard(‘api‘)->user();
if($user->hasVotedFor($id)){
return response()->json([‘voted‘=>true]);
}
return response()->json([‘voted‘=>false]);
}
public function vote(Request $request)
{
$answer = $this->answer->GetAnswerById($request->get(‘answer‘));
$voted = Auth::guard(‘api‘)->user()->voteFor($request->get(‘answer‘));
if(count($voted[‘attached‘]) > 0){
$answer->increment(‘votes_count‘); // 作者被关注
return response()->json([‘voted‘=>true]);
}
$answer->decrement(‘votes_count‘); // 取消作者被关注
return response()->json([‘voted‘=>false]);
}
}
2.5 \resources\js\app.js
Vue.component(‘user-vote-button‘, require(‘./components/UserVoteButton‘));
2.6 \routes\api.php
// 点赞答案接口
Route::post(‘/answer/{id}/votes/users‘,‘Api\VotesController@users‘);
Route::post(‘/answer/vote‘,‘Api\VotesController@vote‘);
2.7 \resources\views\questions\show.blade.php
<user-vote-button answer="{{$answer->id}}" count="{{$answer->votes_count}}"></user-vote-button>
Laravel 5.8 做个知乎 18 —— 点赞