当前位置：首页 > VUE

vue实现发表博客

2026-01-17 00:27:55VUE

Vue 实现发表博客功能

创建 Vue 项目

使用 Vue CLI 创建一个新项目，确保已安装 Node.js 和 npm/yarn。运行以下命令初始化项目：

vue create blog-app

安装必要依赖

在项目目录中安装 axios（用于 HTTP 请求）和 vue-router（用于页面路由）：

npm install axios vue-router

设计博客表单组件

创建一个 BlogEditor.vue 组件，包含标题和内容的输入表单：

<template>
  <div class="blog-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 {
        const response = await axios.post('/api/blogs', {
          title: this.title,
          content: this.content
        });
        alert('发布成功');
        this.$router.push('/');
      } catch (error) {
        console.error('发布失败:', error);
      }
    }
  }
}
</script>

配置路由

在 router/index.js 中设置路由，将 /post 路径映射到博客编辑组件：

import Vue from 'vue'
import Router from 'vue-router'
import BlogEditor from '../components/BlogEditor.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/post',
      component: BlogEditor
    }
  ]
})

创建 API 服务

在 src/services/api.js 中定义博客发布接口：

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://your-backend-api.com'
})

export const postBlog = (blogData) => {
  return api.post('/blogs', blogData)
}

集成到主应用

在 App.vue 中添加导航链接和路由视图：

<template>
  <div id="app">
    <nav>
      <router-link to="/post">写博客</router-link>
    </nav>
    <router-view/>
  </div>
</template>

后端接口对接

确保后端 API 能够接收 POST 请求并处理博客数据。典型 Node.js Express 后端接口示例：

app.post('/api/blogs', (req, res) => {
  const { title, content } = req.body
  // 存储到数据库
  res.status(201).json({ message: 'Blog created' })
})

表单验证增强

为博客表单添加基础验证逻辑，在 submitBlog 方法中加入：

if (!this.title.trim() || !this.content.trim()) {
  alert('标题和内容不能为空')
  return
}

样式优化

添加基础样式到 BlogEditor.vue 组件：

.blog-editor {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

input, textarea {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
}

button {
  background: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}