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')}`
}
})
