当前位置：首页 > VUE

vue实现发表博客

2026-03-09 05:31:26VUE

Vue 实现发表博客功能

1. 项目初始化与依赖安装 使用 Vue CLI 创建项目并安装必要依赖（如 axios、vue-router）：

vue create blog-project
cd blog-project
npm install axios vue-router

2. 前端页面结构设计 创建博客编辑组件（BlogEditor.vue）：

<template>
  <div class="editor">
    <input v-model="title" placeholder="标题" />
    <textarea v-model="content" placeholder="内容"></textarea>
    <button @click="submitBlog">发布</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    async submitBlog() {
      try {
        await axios.post('/api/blogs', {
          title: this.title,
          content: this.content
        })
        alert('发布成功')
        this.$router.push('/')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

3. 后端接口对接 配置 axios 并定义 API 请求方法：

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

export const createBlog = (data) => {
  return axios.post('/api/blogs', data)
}

4. 路由配置 在 router/index.js 中设置路由：

import BlogEditor from '../views/BlogEditor.vue'

const routes = [
  {
    path: '/editor',
    name: 'Editor',
    component: BlogEditor
  }
]

5. 表单验证增强 添加基础验证逻辑：

<script>
export default {
  methods: {
    validateForm() {
      if (!this.title.trim()) {
        alert('标题不能为空')
        return false
      }
      return true
    },
    async submitBlog() {
      if (!this.validateForm()) return
      // 提交逻辑...
    }
  }
}
</script>

6. 富文本编辑器集成（可选） 安装 quill 富文本编辑器：

npm install vue-quill-editor

在组件中使用：

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

<script>
import { quillEditor } from 'vue-quill-editor'
export default {
  components: { quillEditor }
}
</script>

7. 状态管理（可选） 使用 Vuex 管理博客数据：

// store/modules/blog.js
const actions = {
  async createBlog({ commit }, blogData) {
    const res = await createBlog(blogData)
    commit('ADD_BLOG', res.data)
  }
}

8. 部署注意事项