当前位置：首页 > VUE

vue留言功能实现

2026-01-17 09:25:18VUE

Vue 留言功能实现

数据模型设计

留言功能通常需要以下数据结构：

id: 唯一标识符
content: 留言内容
createdAt: 创建时间
author: 作者信息（可选）

示例数据结构：

{
  id: 1,
  content: "这是一条测试留言",
  createdAt: "2023-05-01T10:00:00Z",
  author: {
    name: "用户A",
    avatar: "/path/to/avatar.jpg"
  }
}

前端组件实现

创建留言列表和留言表单组件：

留言列表组件：

<template>
  <div class="message-list">
    <div v-for="message in messages" :key="message.id" class="message-item">
      <div class="message-content">{{ message.content }}</div>
      <div class="message-meta">
        <span class="author">{{ message.author.name }}</span>
        <span class="time">{{ formatDate(message.createdAt) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    messages: {
      type: Array,
      required: true
    }
  },
  methods: {
    formatDate(dateString) {
      return new Date(dateString).toLocaleString()
    }
  }
}
</script>

留言表单组件：

<template>
  <form @submit.prevent="handleSubmit" class="message-form">
    <textarea v-model="content" placeholder="请输入留言内容"></textarea>
    <button type="submit">提交留言</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleSubmit() {
      if (!this.content.trim()) return

      this.$emit('submit', {
        content: this.content,
        createdAt: new Date().toISOString()
      })
      this.content = ''
    }
  }
}
</script>

状态管理

使用Vuex管理留言状态：

store.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    messages: []
  },
  mutations: {
    ADD_MESSAGE(state, message) {
      state.messages.unshift({
        ...message,
        id: Date.now(),
        author: {
          name: '当前用户',
          avatar: '/default-avatar.jpg'
        }
      })
    }
  },
  actions: {
    addMessage({ commit }, message) {
      commit('ADD_MESSAGE', message)
    }
  }
})

后端集成

与后端API交互的示例：

api.js:

import axios from 'axios'

export default {
  async getMessages() {
    const response = await axios.get('/api/messages')
    return response.data
  },

  async postMessage(message) {
    const response = await axios.post('/api/messages', message)
    return response.data
  }
}

完整页面整合

将组件和状态管理整合到页面中：

<template>
  <div class="message-page">
    <h1>留言板</h1>
    <message-form @submit="addMessage" />
    <message-list :messages="messages" />
  </div>
</template>

<script>
import MessageForm from './MessageForm.vue'
import MessageList from './MessageList.vue'
import api from './api'

export default {
  components: {
    MessageForm,
    MessageList
  },
  computed: {
    messages() {
      return this.$store.state.messages
    }
  },
  methods: {
    async addMessage(message) {
      try {
        await api.postMessage(message)
        this.$store.dispatch('addMessage', message)
      } catch (error) {
        console.error('留言提交失败:', error)
      }
    }
  },
  async created() {
    try {
      const messages = await api.getMessages()
      this.$store.commit('SET_MESSAGES', messages)
    } catch (error) {
      console.error('获取留言失败:', error)
    }
  }
}
</script>

样式设计

添加基本样式增强用户体验：

.message-list {
  margin-top: 20px;
}

.message-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.message-content {
  margin-bottom: 8px;
}

.message-meta {
  font-size: 0.8em;
  color: #666;
}

.message-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  margin-bottom: 10px;
}

.message-form button {
  background: #42b983;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

vue留言功能实现