vue实现信息发布系统

Vue 实现信息发布系统

项目初始化与基础配置

使用 Vue CLI 或 Vite 创建项目，安装必要依赖：

npm create vue@latest info-publish-system
cd info-publish-system
npm install vue-router pinia axios element-plus

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

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/publish', component: () => import('../views/PublishView.vue') },
  { path: '/list', component: () => import('../views/ListView.vue') }
]

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

export default router

状态管理设计

使用 Pinia 管理全局状态（src/stores/infoStore.js）：

import { defineStore } from 'pinia'

export const useInfoStore = defineStore('info', {
  state: () => ({
    infoList: [],
    currentInfo: null
  }),
  actions: {
    async fetchInfoList() {
      const res = await axios.get('/api/info')
      this.infoList = res.data
    },
    async publishInfo(infoData) {
      await axios.post('/api/info', infoData)
      this.fetchInfoList()
    }
  }
})

信息发布组件实现

创建发布表单组件（src/components/PublishForm.vue）：

<template>
  <el-form :model="form" label-width="80px">
    <el-form-item label="标题">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="内容">
      <el-input v-model="form.content" type="textarea" rows="5"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">发布</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
import { useInfoStore } from '@/stores/infoStore'

const form = ref({
  title: '',
  content: ''
})
const infoStore = useInfoStore()

const handleSubmit = () => {
  infoStore.publishInfo(form.value)
  form.value = { title: '', content: '' }
}
</script>

信息列表展示

实现信息列表组件（src/components/InfoList.vue）：

<template>
  <el-table :data="infoStore.infoList" style="width: 100%">
    <el-table-column prop="title" label="标题" width="180" />
    <el-table-column prop="content" label="内容" />
    <el-table-column prop="createdAt" label="发布时间" width="180" />
  </el-table>
</template>

<script setup>
import { useInfoStore } from '@/stores/infoStore'
import { onMounted } from 'vue'

const infoStore = useInfoStore()
onMounted(() => infoStore.fetchInfoList())
</script>

API 接口封装

创建 API 请求模块（src/api/index.js）：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://your-api-server.com'
})

export default {
  getInfoList: () => instance.get('/info'),
  publishInfo: (data) => instance.post('/info', data)
}

样式与布局优化

添加全局样式（src/assets/main.css）：

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

功能扩展建议

1. 添加富文本编辑器（如 tiptap 或 quill）增强内容编辑能力
2. 实现信息分类和标签系统
3. 增加用户权限管理模块
4. 添加信息审核流程
5. 实现信息搜索和筛选功能

部署准备

配置生产环境变量（.env.production）：

VITE_API_BASE_URL=https://production-api.example.com

构建命令：

npm run build