当前位置：首页 > VUE

vue实现发布文章

2026-01-17 01:53:02VUE

Vue 实现发布文章功能

在 Vue 中实现发布文章功能，通常需要结合前端表单和后端 API 交互。以下是核心实现步骤：

创建文章表单组件

新建一个 ArticleForm.vue 组件，包含标题、内容等输入字段：

<template>
  <form @submit.prevent="submitArticle">
    <input v-model="article.title" placeholder="标题" required>
    <textarea v-model="article.content" placeholder="内容" required></textarea>
    <button type="submit">发布</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      article: {
        title: '',
        content: ''
      }
    }
  },
  methods: {
    async submitArticle() {
      try {
        const response = await axios.post('/api/articles', this.article)
        this.$router.push(`/articles/${response.data.id}`)
      } catch (error) {
        console.error('发布失败:', error)
      }
    }
  }
}
</script>

配置 API 请求

安装 axios 并配置基础实例：

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

const api = axios.create({
  baseURL: 'http://your-api-domain.com/api',
  timeout: 5000
})

export default api

添加表单验证

使用 VeeValidate 或自定义验证逻辑：

methods: {
  validate() {
    if (!this.article.title.trim()) {
      alert('标题不能为空')
      return false
    }
    return true
  },
  async submitArticle() {
    if (!this.validate()) return
    // 提交逻辑...
  }
}

处理富文本内容

集成富文本编辑器（如 Quill）：

import { quillEditor } from 'vue-quill-editor'

components: {
  quillEditor
},
data() {
  return {
    content: '',
    editorOptions: {
      modules: {
        toolbar: [
          ['bold', 'italic'],
          ['link', 'image']
        ]
      }
    }
  }
}

路由配置

在 router.js 中添加发布路由：

{
  path: '/articles/new',
  component: () => import('./views/ArticleForm.vue'),
  meta: { requiresAuth: true }
}

状态管理（可选）

使用 Vuex 管理文章状态：

// store/modules/articles.js
const actions = {
  async createArticle({ commit }, articleData) {
    const response = await api.post('/articles', articleData)
    commit('ADD_ARTICLE', response.data)
    return response.data
  }
}