当前位置：首页 > VUE

vue实现文章管理

2026-02-18 19:35:36VUE

Vue 实现文章管理功能

文章管理是内容管理系统的核心功能，通常包括文章的增删改查、分类、标签、富文本编辑等。以下是通过 Vue 实现文章管理的关键步骤和技术方案。

技术栈选择

前端框架: Vue 3（Composition API）
UI 组件库: Element Plus（或 Ant Design Vue）
状态管理: Pinia（或 Vuex）
HTTP 客户端: Axios
富文本编辑器: WangEditor 或 TinyMCE
路由: Vue Router

核心功能实现

文章列表展示

<template>
  <el-table :data="articles" style="width: 100%">
    <el-table-column prop="title" label="标题" width="180" />
    <el-table-column prop="category" label="分类" width="180" />
    <el-table-column prop="createdAt" label="发布时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getArticles, deleteArticle } from '@/api/article'

const articles = ref([])

onMounted(async () => {
  articles.value = await getArticles()
})

const handleEdit = (article) => {
  router.push(`/article/edit/${article.id}`)
}

const handleDelete = async (id) => {
  await deleteArticle(id)
  articles.value = articles.value.filter(item => item.id !== id)
}
</script>

富文本编辑器集成

<template>
  <div>
    <div ref="editor" style="text-align:left"></div>
    <el-button @click="submit">提交</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import E from 'wangeditor'

const editor = ref(null)
let editorInstance = null

onMounted(() => {
  editorInstance = new E(editor.value)
  editorInstance.create()
})

const submit = () => {
  const content = editorInstance.txt.html()
  // 提交到后端
}
</script>

状态管理设计

使用 Pinia 管理文章状态：

// stores/article.js
import { defineStore } from 'pinia'

export const useArticleStore = defineStore('article', {
  state: () => ({
    articles: [],
    currentArticle: null
  }),
  actions: {
    async fetchArticles() {
      this.articles = await getArticles()
    },
    setCurrentArticle(article) {
      this.currentArticle = article
    }
  }
})

路由配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/articles',
    name: 'ArticleList',
    component: () => import('@/views/ArticleList.vue')
  },
  {
    path: '/article/create',
    name: 'ArticleCreate',
    component: () => import('@/views/ArticleEdit.vue')
  },
  {
    path: '/article/edit/:id',
    name: 'ArticleEdit',
    component: () => import('@/views/ArticleEdit.vue')
  }
]

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

export default router

API 封装

// api/article.js
import axios from 'axios'

export const getArticles = () => axios.get('/api/articles')
export const getArticle = (id) => axios.get(`/api/articles/${id}`)
export const createArticle = (data) => axios.post('/api/articles', data)
export const updateArticle = (id, data) => axios.put(`/api/articles/${id}`, data)
export const deleteArticle = (id) => axios.delete(`/api/articles/${id}`)

表单验证

使用 Element Plus 的表单验证功能：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="标题" prop="title">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <div ref="editor"></div>
    </el-form-item>
  </el-form>
</template>

<script setup>
const formRef = ref(null)
const form = reactive({
  title: '',
  content: ''
})

const rules = reactive({
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' },
    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
  ]
})

const submit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      await createArticle(form)
    }
  })
}
</script>