当前位置：首页 > VUE

发布动态功能实现vue

2026-02-21 08:03:30VUE

发布动态功能实现（Vue）

前端组件结构

创建一个名为PostDynamic.vue的组件，包含表单输入和提交逻辑：

<template>
  <div class="dynamic-form">
    <textarea v-model="content" placeholder="分享你的动态..."></textarea>
    <input type="file" @change="handleFileUpload" multiple>
    <button @click="submitDynamic">发布</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      files: []
    }
  },
  methods: {
    handleFileUpload(event) {
      this.files = Array.from(event.target.files)
    },
    async submitDynamic() {
      const formData = new FormData()
      formData.append('content', this.content)
      this.files.forEach(file => {
        formData.append('images[]', file)
      })

      try {
        await this.$axios.post('/api/dynamics', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        })
        this.$emit('refresh')
        this.content = ''
        this.files = []
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

后端API接口（Node.js示例）

创建处理动态发布的路由：

const express = require('express')
const multer = require('multer')
const router = express.Router()
const upload = multer({ dest: 'uploads/' })

router.post('/dynamics', upload.array('images[]'), async (req, res) => {
  try {
    const { content } = req.body
    const images = req.files.map(file => file.path)

    // 保存到数据库
    const newDynamic = await Dynamic.create({
      content,
      images,
      userId: req.user.id
    })

    res.status(201).json(newDynamic)
  } catch (error) {
    res.status(500).json({ error: error.message })
  }
})

数据库模型（MongoDB示例）

定义动态数据的Schema：

const mongoose = require('mongoose')

const dynamicSchema = new mongoose.Schema({
  content: String,
  images: [String],
  userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
  createdAt: { type: Date, default: Date.now }
})

module.exports = mongoose.model('Dynamic', dynamicSchema)

前端页面集成

在主页或动态页面引入组件：

<template>
  <div>
    <PostDynamic @refresh="fetchDynamics" />
    <DynamicList :dynamics="dynamics" />
  </div>
</template>

<script>
import PostDynamic from '@/components/PostDynamic'
import DynamicList from '@/components/DynamicList'

export default {
  components: { PostDynamic, DynamicList },
  data() {
    return {
      dynamics: []
    }
  },
  mounted() {
    this.fetchDynamics()
  },
  methods: {
    async fetchDynamics() {
      const res = await this.$axios.get('/api/dynamics')
      this.dynamics = res.data
    }
  }
}
</script>

样式优化

添加基础样式提升用户体验：

发布动态功能实现vue

.dynamic-form {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.dynamic-form textarea {
  width: 100%;
  height: 80px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
}
.dynamic-form button {
  margin-top: 10px;
  padding: 8px 15px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}