刷新 页面内容
我有一个页面http://36.110.202.64:8080/finance_auth
用户名可以输入a1,密码为12345678
登录后会跳转到http://36.110.202.64:8080/finance_auth 页面。
这个finance_auth页面
Route::get('/finance_auth', 'FinanceController@article_auth')->middleware('auth')->name('finance_auth');
在控制器的article_auth方法里面返回了一个视图view(finance_test.blade.php)
return view('finance_test', ['id'=> $article->id, 'title' => $article->title, 'content' => $article->content, 'username' => $user_name, 'tag_name_arr' => $result] );
然后finance_test.blade.php的内容如下,里面用到了一个vue的组件:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<h1><center>{{$id}}:{{$title}}</center></h1>
<br />
{!! $content !!} #**此处显示正文内容**
@include('layouts.footer', ['my_title' => 'aaaaaaaaaa'])
<elesos-component :article_id={{$id}} :my_data='@json($tag_name_arr)'></elesos-component>
# 这个是vue组件,代码见下
</div>
</div>
</div>
</div>
</div>
@endsection
组件的代码如下:
<template>
<div>
<el-row>
#显示页面下方的按钮。
<el-button v-for="(value, name, index) in my_data" v-bind:value="name" @click="process_click(name)" type="success" plain>{{name}}{{value}}</el-button>
</el-row>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
props: ['my_data', 'article_id'],
methods:{
process_click:function (name) {
console.log(name);
axios.get('http://36.110.202.64:8080/get_me/'+name+'/'+this.article_id).then(response => console.log(response.data));
}
}
}
</script>
组件显示了页面下方的按钮,然后点击按钮会发http get请求到get_me路由上
Route::get('/get_me/{name}/{article_id}', 'FinanceController@get_me');
现在我想在get_me方法里面将页面的内容刷新,然后将按钮的文字也更新。不知道如何做,麻烦朋友们提供一下思路。谢谢大家。
public function get_me(Request $request, $name, $article_id){
//$user_id = Auth::id();
$user = Auth::user();
$user_name = $user->name;
Finance::where('id', $article_id)->update(['state' => 2, 'userid' => $user_name, 'tag_type' => $name]);
//return redirect('/finance_auth'); //能返回页面内容,但是本页面不刷新
}
大概是这个意思,当然这不是最佳实践。可以完全使用 Vue 实现,
finance_auth
只渲染页面,把正文跟按钮标签等数据都通过get_me
返回,赋值给 Vue 模板的data
。