vue实现发布文章

实现文章发布功能的基本步骤

在Vue中实现文章发布功能，通常需要结合前端表单和后端API。以下是一个典型实现方案：

前端表单组件

<template>
  <div class="article-form">
    <input v-model="title" placeholder="标题" class="title-input">
    <textarea v-model="content" placeholder="内容" class="content-area"></textarea>
    <button @click="submitArticle" class="submit-btn">发布</button>
  </div>
</template>

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

后端API接口 需要创建对应的后端接口接收文章数据，通常使用Express、Laravel等框架。示例Node.js接口：

router.post('/api/articles', async (req, res) => {
  try {
    const article = new Article({
      title: req.body.title,
      content: req.body.content,
      author: req.user.id
    })
    const savedArticle = await article.save()
    res.json(savedArticle)
  } catch (err) {
    res.status(500).json({ error: err.message })
  }
})

表单验证增强

为提升用户体验，可添加表单验证：

<template>
  <form @submit.prevent="submitArticle">
    <div class="form-group">
      <label>标题</label>
      <input v-model="title" required minlength="5" maxlength="100">
      <span v-if="errors.title" class="error">{{ errors.title }}</span>
    </div>

    <div class="form-group">
      <label>内容</label>
      <textarea v-model="content" required minlength="20"></textarea>
      <span v-if="errors.content" class="error">{{ errors.content }}</span>
    </div>

    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? '发布中...' : '发布' }}
    </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: '',
      errors: {},
      isSubmitting: false
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      if (!this.title) this.errors.title = '请输入标题'
      if (this.title.length < 5) this.errors.title = '标题至少5个字符'
      if (!this.content) this.errors.content = '请输入内容'
      return Object.keys(this.errors).length === 0
    },
    async submitArticle() {
      if (!this.validateForm()) return

      this.isSubmitting = true
      try {
        // API调用...
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

富文本编辑器集成

对于文章内容，通常需要集成富文本编辑器。推荐使用以下方案：

1. Quill编辑器集成

   npm install vue-quill-editor

<template>
  <div>
    <quill-editor v-model="content" :options="editorOptions"></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: { quillEditor },
  data() {
    return {
      content: '',
      editorOptions: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            ['link', 'image']
          ]
        }
      }
    }
  }
}
</script>

1. Tiptap编辑器(Vue3推荐)

   npm install @tiptap/vue-3 @tiptap/starter-kit

<template>
  <editor-content :editor="editor" />
</template>

<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const editor = useEditor({
  content: '',
  extensions: [StarterKit],
})
</script>

图片上传处理

文章通常需要支持图片上传：

<template>
  <input type="file" @change="handleImageUpload">
</template>

<script>
export default {
  methods: {
    async handleImageUpload(event) {
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('image', file)

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        })
        this.content += `\n![alt](${response.data.url})`
      } catch (error) {
        console.error('上传失败:', error)
      }
    }
  }
}
</script>

状态管理优化

对于大型应用，建议使用Vuex或Pinia管理文章状态：

// stores/article.js (Pinia示例)
import { defineStore } from 'pinia'

export const useArticleStore = defineStore('article', {
  actions: {
    async createArticle(articleData) {
      const response = await axios.post('/api/articles', articleData)
      return response.data
    }
  }
})

<script setup>
import { useArticleStore } from '@/stores/article'

const articleStore = useArticleStore()
const submitArticle = async () => {
  await articleStore.createArticle({
    title: title.value,
    content: content.value
  })
}
</script>

响应式布局优化

确保表单在不同设备上显示良好：

.article-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.title-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
}

.content-area {
  width: 100%;
  min-height: 300px;
  padding: 10px;
}

@media (max-width: 768px) {
  .article-form {
    padding: 10px;
  }
}

以上方案可根据实际项目需求进行组合和调整。实现时需注意安全性考虑，如XSS防护、CSRF保护等。