Laravel和Element UI：构建自定义的消息通知中心

// 消息模型
class Message extends Model
{
    // ...
}

// 用户模型
class User extends Authenticatable
{
    // ...
}

// 用户消息关联模型
class UserMessage extends Model
{
    public function user()
    {
        return $this->belongsTo(User::class);
    }

    public function message()
    {
        return $this->belongsTo(Message::class);
    }
}

// 定义获取消息API路由
Route::get('/api/messages', 'MessageController@index');

// 定义标记消息已读API路由
Route::post('/api/messages/{id}/read', 'MessageController@markAsRead');

// 定义删除消息API路由
Route::delete('/api/messages/{id}', 'MessageController@destroy');

// 消息控制器
class MessageController extends Controller
{
    public function index()
    {
        // 获取用户的消息列表
        // 返回消息数据
    }

    public function markAsRead($id)
    {
        // 标记消息为已读
        // 返回成功标识
    }

    public function destroy($id)
    {
        // 删除消息
        // 返回成功标识
    }
}

<template>
  <div>
    <!-- 消息列表 -->
    <el-list v-for="message in messages" :key="message.id">
      <el-list-item>
        <el-list-item-content>
          <span>{{ message.title }}</span>
          <span class="el-list-item__actions">
            <el-button v-if="!message.is_read" type="text" @click="markAsRead(message)">标记为已读</el-button>
            <el-button type="text" @click="deleteMessage(message)">删除</el-button>
          </span>
        </el-list-item-content>
      </el-list-item>
    </el-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 消息列表
    };
  },
  methods: {
    // 获取消息列表
    fetchMessages() {
      // 调用Laravel的消息API接口
      // 更新this.messages
    },
    // 标记消息为已读
    markAsRead(message) {
      // 调用Laravel的标记消息已读API接口
      // 更新消息状态
    },
    // 删除消息
    deleteMessage(message) {
      // 调用Laravel的删除消息API接口
      // 更新消息列表
    },
  },
  created() {
    // 页面初始化时获取消息列表
    this.fetchMessages();
  },
};
</script>