1 databasemigrations2021_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 appMessage.php
<?php namespace App; use appMailerUserMailer; use IlluminateDatabaseEloquentModel; 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 appUser.php
public function messages() { return $this->hasMany(Message::class,'to_user_id'); }
4 esourcesjscomponentsSendMessage.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" >×</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 outesapi.php
// 访客发送私信 Route::post('/message/store','ServerMessagesController@store');
6 appHttpControllersServerMessagesController.php
php artisan make:controller Server/MessagesController
<?php namespace AppHttpControllersServer; use IlluminateHttpRequest; use AppHttpControllersController; use AppRepositoriesMessageRepository; use IlluminateSupportFacadesAuth; 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 esourcesjsapp.js
Vue.component('send-message', require('./components/SendMessage'));
8 esourcesviewsquestionsshow.blade.php
<!-- vue 组件 -->
<send-message user="{{$question->user_id}}"></send-message>
9 appRepositoriesMessageRepository.php
<?php namespace AppRepositories; use AppMessage; /** * 私信仓库 */ class MessageRepository { /** * 创建私信 */ public function CreateMessage($attributes) { return Message::create($attributes); } }