项目初始化

# 创建项目
composer create-project laravel/laravel thbGlobalLogistics --prefer-dist

cd thbGlobalLogistics

# 安装多语言
php artisan lang:publish

# 安装 debugbar
composer require barryvdh/laravel-debugbar --dev
php artisan vendor:publish
# 修改 config/debugbar.php

# 修改 .gitignore   [ignore  / ɪɡˈnɔː(r) / 忽视]

# 修改 config/app.php
#       timezone='UTC' =》timezone='Asia/Shanghai'

# 该软件包可生成辅助文件，使您的集成开发环境能提供准确的自动完成功能。 
# 生成过程基于项目中的文件，因此它们始终是最新的。
composer require --dev barryvdh/laravel-ide-helper
php artisan ide-helper:generate

# 每次新增 model 的时候执行一次
php artisan ide-helper:models


# 加入 git 版本管理
git init
git add .
git commit -m "项目初始化"


composer require opcodesio/log-viewer
php artisan log-viewer:publish



# 安装 breeze
composer require laravel/breeze --dev
git add .
git commit -m "安装breeze"

# 如果下面操作失败，则设置 npm 源
npm config set registry https://registry.npmmirror.com

php artisan breeze:install
#  ┌ Which Breeze stack would you like to install? ───────────────┐
#  │   ○ Blade with Alpine                                        │
#  │   ○ Livewire (Volt Class API) with Alpine                    │
#  │   ○ Livewire (Volt Functional API) with Alpine               │
#  │   ○ React with Inertia                                       │
#  │ › ● Vue with Inertia                                         │
#  │   ○ API only                                                 │
#  └──────────────────────────────────────────────────────────────┘
#  ┌ Would you like any optional features? ───────────────────────┐
#  │ › ◻ Dark mode                                                │
#  │   ◻ Inertia SSR                                              │
#  │   ◻ TypeScript                                               │
#  └──────────────────────────────────────────────────────────────┘
#  ┌ Which testing framework do you prefer? ──────────────────────┐
#  │   ○ Pest                                                     │
#  │ › ● PHPUnit                                                  │
#  └──────────────────────────────────────────────────────────────┘

# 切换 npm 为  yarn
rm -rf node_modules
rm -rf package-lock.json
yarn

安装 Laravel Reverb

php artisan install:broadcasting

设置 reverb

系统会自动生成以下秘钥

REVERB_APP_ID=310930
REVERB_APP_KEY=zvcqfn7k1gmb157ppvau
REVERB_APP_SECRET=mjuf9qczdzteyk3pqf4h
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

启动环境

php artisan serve
yarn dev

安装其他依赖

agent && location

# 支持 Laravel 的 PHP 桌面/移动用户代理解析器，基于Mobile Detect，具有桌面支持和附加功能。
# https://github.com/jenssegers/agent
composer require jenssegers/agent

# 使用各种服务根据访问者的 IP 地址检索其位置。
# https://github.com/stevebauman/location
composer require stevebauman/location

实战练习

1. 创建一个订单

php artisan make:model Order -m

// Migrations
Schema::create('orders', function (Blueprint $table) {
    $table->id();
    $table->string('status');
    $table->string('order_no');
    $table->timestamps();
});


// DatabaseSeeder

Order::create([
    'status' => 'pending',
    'order_no' => 'test'
]);

php artisan migrate:refresh --seed

2. 创建一个事件

php artisan make:event OrderShipmentStatusUpdated

修改事件让其实现 ShouldBroadcast 接口

<?php

namespace App\Events;

use App\Models\Order;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

/**
 * 订单发货状态更新事件,实现 ShouldBroadcast 接口
 * 接收订单和状态
 */
class OrderShipmentStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     */
    public function __construct(
        private readonly Order $order,
        public ?string         $status = null
    )
    {
        $this->status = $status ?? $order->status;
    }

    /**
     * Get the channels the event should broadcast on.
     * 使用【自定义通道】来广播此事件：order.{id}
     * 
     * @return Channel|array
     */
    public function broadcastOn(): Channel|array
    {
        // 公共频道，私有频道用 PrivateChannel,并且还要在 config/channels.php 里设置频道权限
        return new Channel('orders.' . $this->order->id);
    }
}

3. 触发事件

broadcast(new OrderShipmentStatusUpdated($order));
// 或者
OrderShipmentStatusUpdated::dispatch($order);

4. 监听事件

Echo.channel('orders.1').listen('OrderShipmentStatusUpdated', (e) => {
    status.value = e.status;
})

5. 启动 reverb 服务器

php artisan reverb:start

https://www.youtube.com/watch?v=gv9z1yv0_7k

安装其他前端依赖

yarn add nanoid vue-i18n@9 nanoid animate.css normalize.css  tailwind-animatecss # vee-validate yup
yarn add vite-plugin-svg-icons pinia pinia-plugin-persistedstate -D # import 'virtual:svg-icons-register'