当前位置：首页 > VUE

使用vue实现留言功能

2026-02-21 22:49:59VUE

实现留言功能的基本步骤

在Vue中实现留言功能通常需要前端界面与后端数据交互。以下是核心实现方法：

创建Vue组件结构

创建留言板组件（MessageBoard.vue），包含表单和留言列表：

<template>
  <div class="message-board">
    <form @submit.prevent="submitMessage">
      <input v-model="newMessage" placeholder="输入留言内容">
      <button type="submit">提交</button>
    </form>
    <ul>
      <li v-for="(message, index) in messages" :key="index">
        {{ message.content }}
        <button @click="deleteMessage(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

数据管理与方法实现

在组件脚本部分处理数据逻辑：

<script>
export default {
  data() {
    return {
      newMessage: '',
      messages: []
    }
  },
  methods: {
    submitMessage() {
      if (this.newMessage.trim()) {
        this.messages.push({
          content: this.newMessage,
          timestamp: new Date()
        });
        this.newMessage = '';
      }
    },
    deleteMessage(index) {
      this.messages.splice(index, 1);
    }
  }
}
</script>

添加样式增强体验

为组件添加基础样式：

<style scoped>
.message-board {
  max-width: 600px;
  margin: 0 auto;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #eee;
}
</style>

连接后端API（可选）

如需持久化存储，可对接后端API：

<script>
import axios from 'axios';

export default {
  // ...其他代码
  methods: {
    async loadMessages() {
      try {
        const response = await axios.get('/api/messages');
        this.messages = response.data;
      } catch (error) {
        console.error('加载留言失败:', error);
      }
    },
    async submitMessage() {
      if (!this.newMessage.trim()) return;

      try {
        const response = await axios.post('/api/messages', {
          content: this.newMessage
        });
        this.messages.push(response.data);
        this.newMessage = '';
      } catch (error) {
        console.error('提交留言失败:', error);
      }
    }
  },
  created() {
    this.loadMessages();
  }
}
</script>

添加表单验证

增强表单验证逻辑：

<template>
  <form @submit.prevent="submitMessage">
    <input v-model="newMessage" placeholder="输入留言内容" maxlength="200">
    <span class="error" v-if="error">{{ error }}</span>
    <button type="submit" :disabled="!newMessage.trim()">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    }
  },
  methods: {
    submitMessage() {
      if (this.newMessage.length > 200) {
        this.error = '留言不能超过200字';
        return;
      }
      // ...原提交逻辑
    }
  }
}
</script>

使用Vuex管理状态（可选）

对于复杂应用，可使用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.push(message);
    },
    DELETE_MESSAGE(state, index) {
      state.messages.splice(index, 1);
    }
  },
  actions: {
    addMessage({ commit }, message) {
      commit('ADD_MESSAGE', message);
    }
  }
});

组件中调用Vuex：

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['messages'])
  },
  methods: {
    ...mapActions(['addMessage']),
    submitMessage() {
      if (this.newMessage.trim()) {
        this.addMessage({
          content: this.newMessage,
          timestamp: new Date()
        });
        this.newMessage = '';
      }
    }
  }
}
</script>

使用vue实现留言功能