Laravel 5.3和vuejs实现文章浏览次数问题:
我的思路是这样的:
1、文章详情页打开时,用js取得这个详情页的id。
2、用js检查cookie中是否有该id,
(1)如果没有,就向cookie中写入该id,并发送ajax请求,后台把浏览次数+1;
(2)如果有该id,就不做任何操作,这样当刷新页面时就不会重复更新浏览次数。
问题:
js代码不知怎么写完整,详见下面js部分描述。
代码:
文章详情页视图:
<div class="card">
<div class="card-block text-xs-center">
<h5 class="card-title">{{$article->title}}</h5>
<hr class="m-y-2">
<h6 class="card-subtitle text-muted">发布时间:{{$article->created_at->format('Y-m-d')}}
查看次数:{{$article->view_times}}</h6>
</div>
<div class="card-block">
<p class="card-text">{{$article->content}}</p>
</div>
</div>
文章详情页控制器:
class ArticlesController extends Controller
{
//show方法
public function show($id)
{
$article = Article::findOrFail($id);
return view('show', compact('article'));
}
//更新浏览次数的方法
public function statistics(Request $request)
{
$id = $request->input('id');
$article = Article::findOrFail($id);
$view_time=$article->view_time;
$article->view_time=$view_time+1;
$article->save();
}
}
javascript:
<script>
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name=csrf-token]').getAttribute('content')
Vue.http.options.emulateJSON = true;
var vm = new Vue({
el: "body",
data: function(){
return{
id:[]
}
},
created() {
//1、取得该文章的id,要单独发送一个ajax请求取得,还是可以从返回的视图取得或是其他什么方法取得?
this.$http.get('article/get-id').then((response) => {
// success callback
this.id=response.data;
}, (response) => {
// error callback
});
//2、取得id后,检查cookie中是否有该id。
//不知怎么写。
//3、如果没有该id,向cookie写入该id,并发送ajax请求。如果有该id,不做任何操作。
//if()括号里不知怎么写。
if(){
//如果cookie没有该id,发送发送ajax请求。
var formData = new FormData();
var id=this.id;
formData.append('id',id);
this.$http.patch('article/statistics', formData,{
before(request) {
if (this.previousRequest) {
this.previousRequest.abort();
}
this.previousRequest = request;
}
}).then((response) => {
// success callback
}, (response) => {
// error callback
});
}
}
});
</script>