当前位置：首页 > VUE

vue论坛代码实现

2026-01-19 18:18:25VUE

Vue 论坛代码实现

项目初始化

使用 Vue CLI 或 Vite 创建一个新的 Vue 项目。推荐使用 Vue 3 和 Composition API。

npm create vue@latest vue-forum
cd vue-forum
npm install

安装依赖

安装必要的依赖，包括路由、状态管理和 UI 库（如 Element Plus）。

npm install vue-router pinia element-plus axios

路由配置

在 src/router/index.js 中配置路由，定义论坛的基本页面结构。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Forum from '../views/Forum.vue'
import Post from '../views/Post.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/forum', component: Forum },
  { path: '/post/:id', component: Post }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

状态管理

使用 Pinia 管理论坛的状态，包括用户信息和帖子数据。

// src/stores/forum.js
import { defineStore } from 'pinia'

export const useForumStore = defineStore('forum', {
  state: () => ({
    posts: [],
    currentPost: null
  }),
  actions: {
    async fetchPosts() {
      const response = await axios.get('/api/posts')
      this.posts = response.data
    },
    async fetchPost(id) {
      const response = await axios.get(`/api/posts/${id}`)
      this.currentPost = response.data
    }
  }
})

论坛页面

在 src/views/Forum.vue 中实现论坛列表页面。

<template>
  <div>
    <h1>论坛</h1>
    <el-button type="primary" @click="createPost">新建帖子</el-button>
    <el-table :data="posts" style="width: 100%">
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="author" label="作者" />
      <el-table-column prop="date" label="日期" />
    </el-table>
  </div>
</template>

<script setup>
import { useForumStore } from '../stores/forum'
import { onMounted } from 'vue'

const forumStore = useForumStore()

onMounted(() => {
  forumStore.fetchPosts()
})

const createPost = () => {
  // 跳转到新建帖子页面
}
</script>

帖子详情页面

在 src/views/Post.vue 中实现帖子详情页面。

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
    <el-button type="primary" @click="goBack">返回</el-button>
  </div>
</template>

<script setup>
import { useForumStore } from '../stores/forum'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const forumStore = useForumStore()

forumStore.fetchPost(route.params.id)

const post = forumStore.currentPost

const goBack = () => {
  router.push('/forum')
}
</script>

后端 API 集成

使用 Axios 与后端 API 交互，获取和提交数据。

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

const api = axios.create({
  baseURL: 'http://localhost:3000/api'
})

export default {
  getPosts() {
    return api.get('/posts')
  },
  getPost(id) {
    return api.get(`/posts/${id}`)
  },
  createPost(data) {
    return api.post('/posts', data)
  }
}

样式与布局

使用 Element Plus 或其他 UI 库快速构建界面，确保响应式设计。

<template>
  <el-container>
    <el-header>论坛标题</el-header>
    <el-main>
      <router-view />
    </el-main>
    <el-footer>© 2023 Vue 论坛</el-footer>
  </el-container>
</template>