当前位置：首页 > VUE

vue实现发帖

2026-03-27 20:02:44VUE

Vue 实现发帖功能

创建 Vue 项目

确保已安装 Vue CLI，通过以下命令创建新项目：

vue create post-app

安装必要依赖

在项目目录中安装 axios 用于 HTTP 请求：

vue实现发帖

npm install axios

设计发帖表单组件

在 src/components 下创建 PostForm.vue：

vue实现发帖

<template>
  <div class="post-form">
    <input v-model="title" placeholder="标题" />
    <textarea v-model="content" placeholder="内容"></textarea>
    <button @click="submitPost">发布</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      title: '',
      content: ''
    };
  },
  methods: {
    async submitPost() {
      try {
        const response = await axios.post('/api/posts', {
          title: this.title,
          content: this.content
        });
        console.log('发帖成功:', response.data);
        this.$emit('post-created');
        this.title = '';
        this.content = '';
      } catch (error) {
        console.error('发帖失败:', error);
      }
    }
  }
};
</script>

<style>
.post-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}
</style>

集成到主组件

在 App.vue 中使用该组件：

<template>
  <div id="app">
    <PostForm @post-created="fetchPosts" />
    <div v-for="post in posts" :key="post.id">
      <h3>{{ post.title }}</h3>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
import PostForm from './components/PostForm.vue';
import axios from 'axios';

export default {
  components: { PostForm },
  data() {
    return {
      posts: []
    };
  },
  created() {
    this.fetchPosts();
  },
  methods: {
    async fetchPosts() {
      try {
        const response = await axios.get('/api/posts');
        this.posts = response.data;
      } catch (error) {
        console.error('获取帖子失败:', error);
      }
    }
  }
};
</script>

配置模拟 API

在项目根目录创建 mockServer.js：

const express = require('express');
const cors = require('cors');
const app = express();
let posts = [];

app.use(cors());
app.use(express.json());

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

app.post('/api/posts', (req, res) => {
  const newPost = { ...req.body, id: Date.now() };
  posts.push(newPost);
  res.status(201).json(newPost);
});

app.listen(3001, () => {
  console.log('Mock API server running on port 3001');
});