当前位置：首页 > VUE

vue实现论坛项目教程

2026-02-21 05:46:47VUE

Vue实现论坛项目教程

项目初始化与配置

使用Vue CLI创建新项目：

vue create forum-project

安装必要依赖：

npm install vue-router axios vuex element-ui

配置基础路由（router/index.js）：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home }
  ]
})

核心功能模块实现

用户认证模块 创建auth.js管理登录状态：

// store/modules/auth.js
export default {
  state: {
    user: null,
    token: localStorage.getItem('token') || ''
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    }
  }
}

帖子列表组件 ForumList.vue示例：

vue实现论坛项目教程

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

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  async created() {
    const res = await axios.get('/api/posts')
    this.posts = res.data
  }
}
</script>

后端API交互

配置axios实例（utils/api.js）：

import axios from 'axios'

export default axios.create({
  baseURL: 'http://your-api-url.com/api',
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  }
})

实现发帖功能：

// methods in PostForm.vue
async submitPost() {
  try {
    await api.post('/posts', {
      title: this.title,
      content: this.content
    })
    this.$router.push('/forum')
  } catch (error) {
    console.error(error)
  }
}

状态管理优化

Vuex模块化配置（store/index.js）：

vue实现论坛项目教程

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
import posts from './modules/posts'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth,
    posts
  }
})

帖子模块示例（store/modules/posts.js）：

export default {
  state: {
    allPosts: []
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.allPosts = posts
    }
  },
  actions: {
    async fetchPosts({ commit }) {
      const res = await api.get('/posts')
      commit('SET_POSTS', res.data)
    }
  }
}

界面优化与部署

使用Element-UI组件：

<template>
  <el-button @click="login" type="primary">登录</el-button>
  <el-table :data="posts">
    <el-table-column prop="title" label="标题"></el-table-column>
  </el-table>
</template>

生产环境部署：