刷新 页面内容

我有一个页面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'); //能返回页面内容,但是本页面不刷新

    }
elesos
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
最佳答案
axios.get('http://36.110.202.64:8080/get_me/'+name+'/'+this.article_id).then(() => window.location.reload());

大概是这个意思,当然这不是最佳实践。可以完全使用 Vue 实现,finance_auth 只渲染页面,把正文跟按钮标签等数据都通过 get_me 返回,赋值给 Vue 模板的 data

4年前 评论
elesos (楼主) 4年前
讨论数量: 3

把 finance_auth 控制器里的逻辑,封装,,然后在 get_me 里调用?

4年前 评论
largezhou (作者) 4年前
elesos (楼主) 4年前
elesos (楼主) 4年前

用 Vue 不就可以了吗 :joy:

4年前 评论
axios.get('http://36.110.202.64:8080/get_me/'+name+'/'+this.article_id).then(() => window.location.reload());

大概是这个意思,当然这不是最佳实践。可以完全使用 Vue 实现,finance_auth 只渲染页面,把正文跟按钮标签等数据都通过 get_me 返回,赋值给 Vue 模板的 data

4年前 评论
elesos (楼主) 4年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!