Laravel进阶系列笔记--(二十)Laravel 广播-私有频道之前端准备工作-1

作者：温新

时间：2021-07-31

hi，我是温新，一名PHPer

本系列采用Laravel8.x演示。

由于我在使用基于Redis广播时不成功（无报错、无任何错误日志、广播已触发、服务已在运行、redis数据库无数据），若你知道如何解决，请不吝赐教。

尽管使用起来简单，但是为了完整性，本篇记录使用一个全新的Laravel作为演示记录，遍于理解，更希望走过坑的人避免。

对于私有广播系列，采用一个小型项目的方式进行记录。

基于Vue来演示的Laravel私有广播

需要注意的是，我使用的是PHPStrom，控制台中多开命令行操作。

第一步：创建项目

composer create-project laravel/laravel demo

第二步：安装laravel/ui

composer require laravel/ui
    
php artisan ui bootstrap
php artisan ui vue --auth

第三步：安装

npm install
npm run dev
npm run watch

第四步：编写vue组件

// resources/js/components/TopicComponent.vue
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h3>test vue</h3>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "TopicComponent"
}
</script>

<style scoped>

</style>

第五步：注册vue组件

// resoucres/js/app.js
Vue.component('topic', require('./components/TopicComponent.vue').default);

第六步：修改登录后的主页

// resources/views/home.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <topic></topic>
        </div>
    </div>
</div>
@endsection

第七步：配置数据库并生成用户表

1）.env文件中配置数据库

2）生成数据表

php artisan migrate

第八步：注册用户

访问register路由注册两个用户，后面要用到。

到这里，准备工作完成。注册完成后即可看到topic组件中的内容。

我是温新

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