当前位置：首页 > VUE

vue实现发布文章

2026-03-09 06:54:02VUE

使用 Vue 实现发布文章功能

安装 Vue 和相关依赖

确保已安装 Vue CLI 或通过 CDN 引入 Vue。若使用 Vue CLI，可以通过以下命令创建项目：

npm install -g @vue/cli
vue create article-publishing-app

安装 axios 用于 HTTP 请求：

npm install axios

创建文章发布表单组件

在 Vue 组件中创建表单，包含标题、内容和提交按钮：

<template>
  <div>
    <h3>发布新文章</h3>
    <form @submit.prevent="submitArticle">
      <div>
        <label for="title">标题</label>
        <input type="text" id="title" v-model="article.title" required>
      </div>
      <div>
        <label for="content">内容</label>
        <textarea id="content" v-model="article.content" required></textarea>
      </div>
      <button type="submit">发布</button>
    </form>
  </div>
</template>

定义数据和方法

在组件脚本中定义数据模型和提交方法：

vue实现发布文章

<script>
import axios from 'axios';

export default {
  data() {
    return {
      article: {
        title: '',
        content: ''
      }
    };
  },
  methods: {
    submitArticle() {
      axios.post('/api/articles', this.article)
        .then(response => {
          alert('文章发布成功');
          this.article = { title: '', content: '' }; // 清空表单
        })
        .catch(error => {
          console.error('发布失败:', error);
        });
    }
  }
};
</script>

配置后端 API 接口

确保后端 API 接口可用，例如使用 Node.js + Express 或 Laravel 等框架。示例 Express 路由：

app.post('/api/articles', (req, res) => {
  const { title, content } = req.body;
  // 保存到数据库
  res.status(201).json({ message: '文章已保存' });
});

处理表单验证

添加前端验证以确保数据完整性：

vue实现发布文章

methods: {
  submitArticle() {
    if (!this.article.title.trim() || !this.article.content.trim()) {
      alert('标题和内容不能为空');
      return;
    }
    axios.post('/api/articles', this.article)
      .then(response => {
        alert('文章发布成功');
        this.article = { title: '', content: '' };
      })
      .catch(error => {
        console.error('发布失败:', error);
      });
  }
}

显示成功提示

使用 Vue 的响应式特性或第三方库（如 Toast）显示操作结果：

axios.post('/api/articles', this.article)
  .then(response => {
    this.$toast.success('文章发布成功');
    this.article = { title: '', content: '' };
  })
  .catch(error => {
    this.$toast.error('发布失败');
  });

路由跳转

发布成功后跳转到文章列表页：

axios.post('/api/articles', this.article)
  .then(response => {
    this.$router.push('/articles'); // 假设已配置 Vue Router
  })
  .catch(error => {
    console.error('发布失败:', error);
  });

完整组件示例

整合后的完整组件代码：

<template>
  <div>
    <h3>发布新文章</h3>
    <form @submit.prevent="submitArticle">
      <div>
        <label for="title">标题</label>
        <input type="text" id="title" v-model="article.title" required>
      </div>
      <div>
        <label for="content">内容</label>
        <textarea id="content" v-model="article.content" required></textarea>
      </div>
      <button type="submit">发布</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      article: {
        title: '',
        content: ''
      }
    };
  },
  methods: {
    submitArticle() {
      if (!this.article.title.trim() || !this.article.content.trim()) {
        alert('标题和内容不能为空');
        return;
      }
      axios.post('/api/articles', this.article)
        .then(response => {
          alert('文章发布成功');
          this.$router.push('/articles');
        })
        .catch(error => {
          console.error('发布失败:', error);
        });
    }
  }
};
</script>