当前位置：首页 > VUE

vue实现微博

2026-02-17 05:07:27VUE

Vue 实现微博功能

使用 Vue.js 实现一个微博功能需要结合前端框架、后端 API 和数据库。以下是关键步骤和代码示例。

项目结构

src/
├── components/
│   ├── PostList.vue  // 微博列表
│   ├── PostForm.vue  // 发布微博表单
│   └── Comment.vue   // 评论组件
├── views/
│   ├── Home.vue      // 主页
│   └── Profile.vue   // 个人主页
├── store/            // Vuex 状态管理
└── router/           // 路由配置

微博列表组件

<template>
  <div class="post-list">
    <div v-for="post in posts" :key="post.id" class="post-item">
      <div class="post-content">{{ post.content }}</div>
      <div class="post-meta">
        <span>{{ post.author }}</span>
        <span>{{ post.createdAt }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['posts']
}
</script>

发布微博表单

<template>
  <div class="post-form">
    <textarea v-model="content" placeholder="分享你的想法..."></textarea>
    <button @click="submitPost">发布</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    submitPost() {
      this.$emit('post-submitted', this.content)
      this.content = ''
    }
  }
}
</script>

Vuex 状态管理

// store/index.js
export default new Vuex.Store({
  state: {
    posts: []
  },
  mutations: {
    ADD_POST(state, post) {
      state.posts.unshift(post)
    }
  },
  actions: {
    async fetchPosts({ commit }) {
      const res = await axios.get('/api/posts')
      commit('SET_POSTS', res.data)
    },
    async createPost({ commit }, content) {
      const res = await axios.post('/api/posts', { content })
      commit('ADD_POST', res.data)
    }
  }
})

后端 API 示例（Node.js）

// server.js
const express = require('express')
const app = express()

let posts = []

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

app.post('/api/posts', (req, res) => {
  const newPost = {
    id: Date.now(),
    content: req.body.content,
    author: '当前用户',
    createdAt: new Date().toISOString()
  }
  posts.unshift(newPost)
  res.json(newPost)
})