当前位置：首页 > VUE

vue留言功能实现

2026-03-30 02:30:03VUE

实现留言功能的基本步骤

在Vue中实现留言功能通常需要结合前端和后端技术。以下是实现的基本流程：

前端部分 使用Vue组件构建留言界面，包括输入框和留言列表。通过v-model绑定输入数据，v-for渲染留言列表。

后端部分 需要API接口处理留言的增删改查操作。可以使用Node.js、Python或其他后端技术实现。

数据交互 使用axios或fetch进行前后端数据交互，实现留言的提交和获取。

具体实现代码示例

前端Vue组件

<template>
  <div class="message-board">
    <h3>留言板</h3>
    <div class="input-area">
      <input v-model="newMessage" placeholder="请输入留言内容" />
      <button @click="submitMessage">提交</button>
    </div>
    <ul class="message-list">
      <li v-for="(message, index) in messages" :key="index">
        {{ message.content }}
        <span class="time">{{ message.time }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      newMessage: '',
      messages: []
    }
  },
  created() {
    this.fetchMessages();
  },
  methods: {
    async fetchMessages() {
      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,
          time: new Date().toLocaleString()
        });
        this.messages.unshift(response.data);
        this.newMessage = '';
      } catch (error) {
        console.error('提交留言失败:', error);
      }
    }
  }
}
</script>

<style scoped>
.message-board {
  max-width: 600px;
  margin: 0 auto;
}
.input-area {
  margin-bottom: 20px;
}
.message-list {
  list-style: none;
  padding: 0;
}
.message-list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.time {
  float: right;
  color: #999;
  font-size: 0.8em;
}
</style>

后端API示例(Node.js + Express)

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

let messages = [];

app.get('/api/messages', (req, res) => {
  res.json(messages);
});

app.post('/api/messages', (req, res) => {
  const message = req.body;
  messages.unshift(message);
  res.status(201).json(message);
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});