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);
}功能扩展建议
- 添加富文本编辑器（如 tiptap 或 quill）增强内容编辑能力
- 实现信息分类和标签系统
- 增加用户权限管理模块
- 添加信息审核流程
- 实现信息搜索和筛选功能
部署准备
配置生产环境变量（.env.production）：
VITE_API_BASE_URL=https://production-api.example.com构建命令：
npm run build
