当前位置：首页 > VUE

vue实现微博发布动态

2026-01-07 06:10:33VUE

使用Vue实现微博发布动态功能

创建Vue组件结构

新建一个WeiboPost.vue组件，包含文本框、图片上传和发布按钮：

<template>
  <div class="weibo-post">
    <textarea v-model="content" placeholder="分享你的新鲜事..."></textarea>
    <div class="preview-images">
      <div v-for="(img, index) in previewImages" :key="index" class="image-item">
        <img :src="img" />
        <button @click="removeImage(index)">×</button>
      </div>
    </div>
    <div class="actions">
      <input type="file" ref="fileInput" @change="handleImageUpload" multiple accept="image/*" />
      <button @click="triggerFileInput">添加图片</button>
      <button @click="postWeibo" :disabled="!content && !previewImages.length">发布</button>
    </div>
  </div>
</template>

处理数据与交互逻辑

在组件脚本部分实现核心功能：

<script>
export default {
  data() {
    return {
      content: '',
      previewImages: [],
      files: []
    }
  },
  methods: {
    triggerFileInput() {
      this.$refs.fileInput.click()
    },
    handleImageUpload(e) {
      const files = e.target.files
      if (files.length + this.previewImages.length > 9) {
        alert('最多上传9张图片')
        return
      }

      Array.from(files).forEach(file => {
        if (!file.type.match('image.*')) return

        const reader = new FileReader()
        reader.onload = (e) => {
          this.previewImages.push(e.target.result)
          this.files.push(file)
        }
        reader.readAsDataURL(file)
      })
    },
    removeImage(index) {
      this.previewImages.splice(index, 1)
      this.files.splice(index, 1)
    },
    async postWeibo() {
      const formData = new FormData()
      formData.append('content', this.content)
      this.files.forEach(file => {
        formData.append('images', file)
      })

      try {
        const response = await axios.post('/api/weibo', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        this.$emit('posted', response.data)
        this.content = ''
        this.previewImages = []
        this.files = []
      } catch (error) {
        console.error('发布失败:', error)
      }
    }
  }
}
</script>

添加样式优化体验

为组件添加基础样式：

<style scoped>
.weibo-post {
  border: 1px solid #e6e6e6;
  padding: 15px;
  border-radius: 4px;
  background: white;
}

textarea {
  width: 100%;
  min-height: 100px;
  border: none;
  resize: none;
  outline: none;
  font-size: 14px;
}

.actions {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

input[type="file"] {
  display: none;
}

button {
  margin-right: 10px;
  padding: 5px 10px;
  background: #ff8200;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.preview-images {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
}

.image-item {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-item button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
</style>

后端API集成

在Vue项目中配置axios并创建API服务：

// src/api/weibo.js
import axios from 'axios'

export default {
  postWeibo(data) {
    return axios.post('/api/weibo', data)
  },
  getWeiboList(params) {
    return axios.get('/api/weibo', { params })
  }
}

使用组件

在父组件中引入并使用：

<template>
  <div>
    <weibo-post @posted="handlePosted" />
    <weibo-list :posts="posts" />
  </div>
</template>

<script>
import WeiboPost from './WeiboPost.vue'
import WeiboList from './WeiboList.vue'
import weiboApi from '@/api/weibo'

export default {
  components: { WeiboPost, WeiboList },
  data() {
    return {
      posts: []
    }
  },
  methods: {
    handlePosted(newPost) {
      this.posts.unshift(newPost)
    },
    fetchWeiboList() {
      weiboApi.getWeiboList().then(response => {
        this.posts = response.data
      })
    }
  },
  created() {
    this.fetchWeiboList()
  }
}
</script>