由于您的问题没有提供具体的技术栈或者编程语言，我将提供一个使用流行的Python后端（Flask）和Vue.js前端的简单博客系统的示例。
后端（使用Flask）:
from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///blog.db'
db = SQLAlchemy(app)
class Post(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(80), unique=True, nullable=False)
content = db.Column(db.Text, nullable=False)
def __repr__(self):
return f"Post('{self.title}', '{self.content}')"
@app.route('/api/posts', methods=['GET'])
def get_posts():
posts = Post.query.all()
return jsonify({'posts': [post.title for post in posts]})
@app.route('/api/posts', methods=['POST'])
def create_post():
title = request.json.get('title')
content = request.json.get('content')
post = Post(title=title, content=content)
db.session.add(post)
db.session.commit()
return jsonify({'message': 'Post created successfully', 'post': post.title}), 201
if __name__ == '__main__':
db.create_all()
app.run(debug=True)前端（使用Vue.js）:
<template>
<div>
<input v-model="title" placeholder="Title">
<textarea v-model="content" placeholder="Content"></textarea>
<button @click="createPost">Create Post</button>
<ul>
<li v-for="post in posts" :key="post">{{ post }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
title: '',
content: '',
posts: []
};
},
created() {
this.fetchPosts();
},
methods: {
fetchPosts() {
fetch('/api/posts')
.then(response => response.json())
.then(data => {
this.posts = data.posts;
});
},
createPost() {
fetch('/api/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ title: this.title, content: this.content })
})
.then(response => response.json())
.then(data => {
this.posts.push(this.title);
this.title = '';
this.content = '';
alert(data.message);
});
}
}
};
</script>这个简单的示例展示了如何使用Flask作为后端和Vue.js作为前端创建一个RESTful API驱动的博客系统。后端提供了创建帖子和获取帖子列表的