Laravel进阶系列笔记--(二十二)Laravel 广播-私有频道-API资源调用-3

作者：温新

时间：2021-07-31

hi，我是温新，一名PHPer

本系列采用Laravel8.x演示。

第一步：创建路由

// web.php
Route::post('api/topic/{topic_id}/discussions','Api\DiscussionController@store');

第二步：创建API控制器

php artisan make:controller Api/DiscussionController --api

第三步：修改控制器方法

// Api/DiscussionController.php
public function store(Request $request, $topicId)
{
    // 数据入库并返回给当前路由
    $data = $request->all();
    $discussion = Discussion::create([
        'content'   =>  $data['content'],
        'user_id'   =>  $request->user()->id,
        'topic_id'  =>  $topicId
    ]);
    return $disscusson->load('user');
}

第四步：修改控制器

// TopicController.php
public function show(Topic $topic)
{
    $topic->load('discussions');

    return view('topic.show', compact('topic'));
}

第五步：修改组件

// TopicComponent.vue
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h3>{{ topic.name }}</h3>
                <hr>
                <div v-for="dis in discussions">
                    <h3>{{ dis.user_id }}</h3>
                    <p>{{ dis.content }}</p>
                </div>
                <hr>
                <form action="#" @submit.prevent="createDis">
                    <textarea v-model="talk" name="" class="form-control" cols="30" rows="6"></textarea>
                    <button type="submit" class="btn btn-primary float-right px-2 m-1">发布</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['topic'],
    data () {
        return {
            // 主题讨论的内容
            talk:'',
            // 数据库获取主题讨论的内容
            discussions:[],
        }
    },
    mounted() {
        // 对应主题讨论的数据
       this.discussions = this.topic.discussions;
    },
    methods:{
        createDis() {
            // 请求数据
            axios.post(`/api/topic/${this.topic.id}/discussions`,{
                content:this.talk
            }).then((response)=>{
                this.discussions.push(response.data);
            });
            this.talk = '';
        }
    }
}
</script>

我是温新

每天进步一点点，就一点点