vue实现发表博客
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;
}部署准备
构建生产环境版本并部署到服务器：
npm run build将生成的 dist 文件夹内容上传到 Web 服务器。
