vue实现发表博客

Vue 实现发表博客功能

前端部分（Vue.js）

安装必要依赖（如需要）

npm install axios vue-router

创建博客发布组件（BlogEditor.vue）

<template>
  <div class="blog-editor">
    <h3>发布新博客</h3>
    <form @submit.prevent="submitBlog">
      <div class="form-group">
        <label>标题</label>
        <input v-model="blog.title" type="text" required>
      </div>
      <div class="form-group">
        <label>内容</label>
        <textarea v-model="blog.content" rows="10" required></textarea>
      </div>
      <button type="submit">发布</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

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

配置路由（router/index.js）

import { createRouter, createWebHistory } from 'vue-router'
import BlogEditor from '../components/BlogEditor.vue'

const routes = [
  {
    path: '/blogs/new',
    component: BlogEditor
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

后端部分（Node.js示例）

安装必要依赖

npm install express body-parser cors

创建简单API服务（server.js）

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(bodyParser.json());
app.use(cors());

let blogs = [];

app.post('/api/blogs', (req, res) => {
  const newBlog = {
    id: Date.now(),
    title: req.body.title,
    content: req.body.content,
    createdAt: new Date()
  };
  blogs.push(newBlog);
  res.status(201).json(newBlog);
});

app.get('/api/blogs', (req, res) => {
  res.json(blogs);
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

数据库集成（可选MongoDB）

安装Mongoose

npm install mongoose

修改server.js连接数据库

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/blogDB', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const blogSchema = new mongoose.Schema({
  title: String,
  content: String,
  createdAt: { type: Date, default: Date.now }
});

const Blog = mongoose.model('Blog', blogSchema);

app.post('/api/blogs', async (req, res) => {
  try {
    const blog = new Blog(req.body);
    await blog.save();
    res.status(201).json(blog);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

富文本编辑器集成（如需要）

安装vue-quill编辑器

npm install vue-quill@beta @vueup/vue-quill@beta

修改BlogEditor.vue

<template>
  <div>
    <QuillEditor v-model:content="blog.content" contentType="html" />
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  components: { QuillEditor }
}
</script>

用户认证（可选）

添加登录验证中间件

// server.js
const authenticate = (req, res, next) => {
  if (!req.headers.authorization) {
    return res.status(401).json({ error: '未授权' });
  }
  next();
};

app.post('/api/blogs', authenticate, async (req, res) => {
  // 原有代码
});

前端添加Authorization头

// BlogEditor.vue
axios.post('/api/blogs', this.blog, {
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  }
})