vue实现站内信
Vue 实现站内信功能
前端实现
组件结构设计
创建 MessageList.vue 和 MessageDetail.vue 组件，分别用于展示消息列表和消息详情。使用 Vue Router 实现页面跳转。
消息列表组件
通过 v-for 渲染消息列表，使用 axios 获取后端数据。添加标记已读功能，点击消息跳转到详情页。
<template>
<div>
<div v-for="message in messages" :key="message.id" @click="markAsRead(message)">
{{ message.title }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
messages: []
}
},
mounted() {
this.fetchMessages();
},
methods: {
fetchMessages() {
axios.get('/api/messages').then(response => {
this.messages = response.data;
});
},
markAsRead(message) {
axios.put(`/api/messages/${message.id}/read`);
this.$router.push(`/messages/${message.id}`);
}
}
}
</script>实时消息推送
WebSocket 集成
使用 socket.io-client 实现实时消息通知。在 Vue 的 main.js 中初始化 WebSocket 连接。
import io from 'socket.io-client';
const socket = io('http://your-backend-url');
Vue.prototype.$socket = socket;消息接收处理 在组件中监听新消息事件，更新消息列表或显示通知。
created() {
this.$socket.on('newMessage', (message) => {
this.messages.unshift(message);
this.showNotification(message);
});
}后端 API 设计
RESTful 接口 设计以下 API 端点：
GET /api/messages- 获取消息列表GET /api/messages/:id- 获取消息详情PUT /api/messages/:id/read- 标记消息为已读POST /api/messages- 发送新消息
WebSocket 服务 后端需要实现 WebSocket 服务，在消息创建时广播给相关用户。
// Node.js 示例
io.on('connection', (socket) => {
socket.on('sendMessage', (data) => {
// 保存到数据库
// 广播给接收者
io.to(data.receiverId).emit('newMessage', data);
});
});数据模型设计
消息表结构 创建 messages 表，包含以下字段：
- id: 主键
- sender_id: 发送者ID
- receiver_id: 接收者ID
- title: 消息标题
- content: 消息内容
- is_read: 是否已读
- created_at: 创建时间
用户界面优化
未读消息提示 在导航栏显示未读消息数量，使用 Vuex 管理全局状态。
// store.js
state: {
unreadCount: 0
},
mutations: {
updateUnreadCount(state, count) {
state.unreadCount = count;
}
}消息样式区分 通过 CSS 为已读和未读消息添加不同样式。
.unread {
font-weight: bold;
background-color: #f0f8ff;
}测试与部署
单元测试 为组件和 API 调用编写单元测试，确保功能正常。
性能优化 对于大量消息，实现分页加载和懒加载，避免一次性加载过多数据。
部署注意事项 确保 WebSocket 服务在部署环境中正常工作，可能需要配置 Nginx 或其他代理服务器支持 WebSocket。
