1 \database\migrations\2021_08_05_222058_create_messages_table.php

    public function up()
    {
        Schema::create('messages', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedInteger('from_user_id')->index();
            $table->unsignedInteger('to_user_id')->index();
            $table->text('body');
            $table->string('has_read',8)->default('F');
            $table->timestamp('read_at')->nullable();
            $table->timestamps();
        });
    }

2 \app\Message.php

<?php

namespace App;

use app\Mailer\UserMailer;
use Illuminate\Database\Eloquent\Model;

class Message extends Model
{
    //
    protected $table = 'messages';
    protected $fillable = ['from_user_id','to_user_id','body'];

    public function fromUser()
    {
        return $this->belongsTo(User::class,'from_user_id');
    }
    
    public function toUser()
    {
        return $this->belongsTo(User::class,'to_user_id');
    }
}

3 \app\User.php

public function messages()
    {
        return $this->hasMany(Message::class,'to_user_id');
    }

4 \resources\js\components\SendMessage.vue

<template>
    <div>
        <button
                class="btn btn-success float-right"
                @click="showSendMessageFrom"
        >发送私信
        </button>

        <div class="modal fade" id="modal-send-message" tabindex="-1" role="dia1og">
            <form id="form">
                <div Class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 Class="modal-title">
                                发送私信
                            </h4>
                            <button type="button" class="close" data-dismiss= "modal" aria-hidden="true" >&times;</button>
                        </div>
                        <div class= "modal-body">
                            <textarea id="message_text" name="body" class="form-control" rows="5" v-model="body" v-if="!status"></textarea>
                            <div class="alert alert-success" v-if="status">
                                <strong>私信发送成功</strong>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default " data-dismiss= "modal" >关闭</button>
                            <button type="button" class="btn btn-primary" @click="store">确认发送</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        
    </div>
</template>
<script>
    export default {
        name: 'SendMessage',
        props: ['user'],
        data(){
            return {
                body: '',
                status: false
            }
        },
        methods: {
            store(){
                axios.post('/api/message/store',{'user':this.user,'body':this.body}).then(res => {
                    this.status = res.data.status
                    let that = this;
                    setTimeout(function() {
                        $('#modal-send-message').modal('hide')
                        that.status = false
                    },1000)
                })
            },
            showSendMessageFrom(){
                $('#modal-send-message').modal('show')
            }
        } ,
        mounted(){
            // 隐藏模态框 清空内容
            $('#modal-send-message').on('hidden.bs.modal', function (){
                document.getElementById("form").reset();
                //$('#message_text').val("");
            });
        }
    }
</script>

<style lang="css" scoped>
    .float-right{
        float: right;
    }
</style>

5 \routes\api.php

// 访客发送私信
Route::post('/message/store','Server\MessagesController@store');

6 \app\Http\Controllers\Server\MessagesController.php

php artisan make:controller Server/MessagesController

<?php

namespace App\Http\Controllers\Server;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Repositories\MessageRepository;
use Illuminate\Support\Facades\Auth;

class MessagesController extends Controller
{
    /**
     *    私信仓库
     */
    protected $message;
    
    /**
     *  初始化
     */
    public function __construct(MessageRepository $message)
    {
        $this->message = $message;
    }
    /**
     *    访客发送私信
     */
    public function store(Request $request)
    {
        $message = $this->message->CreateMessage([
          'to_user_id' => $request->get('user'),
          'from_user_id' => Auth::guard('api')->user()->id,
          'body' => $request->get('body'),
          'dialog_id' => ''
        ]);
        
        return $message ?
          response()->json(['status'=>true]) :
          response()->json(['status'=>false]);
    }
}

7 \resources\js\app.js

Vue.component('send-message', require('./components/SendMessage'));

8 \resources\views\questions\show.blade.php

 <!-- vue 组件 -->
<send-message user="{{$question->user_id}}"></send-message>

9 \app\Repositories\MessageRepository.php

<?php 
namespace App\Repositories;

use App\Message;

/**
 * 私信仓库
 */
class MessageRepository
{
    /**
     *    创建私信
     */
    public function CreateMessage($attributes)
    {
        return Message::create($attributes);
    }
}