Flask是一个使用Python编写的轻量级Web框架，因其简洁易用和灵活性得到了广泛的欢迎。在本篇文章中，我们将探讨如何使用Flask实现一个前后端分离的应用，并给出相应的代码示例。
一、前后端分离概念
前后端分离是指在Web开发中，将前端（用户界面）和后端（服务器逻辑）进行解耦，通常通过API进行交互。前端可以使用任意框架（如React、Vue.js、Angular等）进行构建，而后端则通过RESTful API提供数据服务。
二、环境准备
在开始开发之前，确保你已经安装了Python和Flask。如果没有安装，可以使用以下命令进行安装：
pip install Flask
三、构建Flask后端
首先，我们来创建一个简单的Flask应用，作为我们的后端API。
1. 创建项目结构
my_flask_app/
├── app.py
└── requirements.txt
2. 编写app.py
在app.py中，我们将定义一些简单的API接口：
from flask import Flask, jsonify, request
app = Flask(__name__)
# 示例数据
posts = [
{'id': 1, 'title': '第一篇文章', 'content': '这是我第一篇文章的内容。'},
{'id': 2, 'title': '第二篇文章', 'content': '这是我第二篇文章的内容。'}
]
# 获取所有文章
@app.route('/api/posts', methods=['GET'])
def get_posts():
return jsonify(posts)
# 获取指定文章
@app.route('/api/posts/<int:post_id>', methods=['GET'])
def get_post(post_id):
post = next((post for post in posts if post['id'] == post_id), None)
return jsonify(post) if post else ('', 404)
# 添加文章
@app.route('/api/posts', methods=['POST'])
def add_post():
new_post = request.json
new_post['id'] = len(posts) + 1
posts.append(new_post)
return jsonify(new_post), 201
if __name__ == '__main__':
app.run(debug=True)
在这个示例中，我们创建了三个API接口：
- GET /api/posts：获取所有文章。
- GET /api/posts/<post_id>：获取指定ID的文章。
- POST /api/posts：添加一篇新文章。
3. 运行Flask应用
在命令行中运行以下命令启动Flask应用：
python app.py
默认情况下，Flask会在http://127.0.0.1:5000上运行。
四、构建前端
对于前端部分，这里我们将使用一个简单的HTML和JavaScript示例，来展示如何与Flask后端交互。
1. 创建前端文件
在项目根目录下创建一个名为index.html的文件：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask 前后端分离示例</title>
</head>
<body>
<h1>文章列表</h1>
<div id="posts"></div>
<h2>添加文章</h2>
<input type="text" id="title" placeholder="标题">
<textarea id="content" placeholder="内容"></textarea>
<button onclick="addPost()">添加</button>
<script>
// 获取所有文章
async function fetchPosts() {
const response = await fetch('http://127.0.0.1:5000/api/posts');
const posts = await response.json();
const postsDiv = document.getElementById('posts');
postsDiv.innerHTML = '';
posts.forEach(post => {
postsDiv.innerHTML += `<h3>${post.title}</h3><p>${post.content}</p>`;
});
}
// 添加文章
async function addPost() {
const title = document.getElementById('title').value;
const content = document.getElementById('content').value;
const response = await fetch('http://127.0.0.1:5000/api/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ title, content })
});
if (response.ok) {
document.getElementById('title').value = '';
document.getElementById('content').value = '';
fetchPosts(); // 刷新文章列表
}
}
// 页面加载时获取文章
window.onload = fetchPosts;
</script>
</body>
</html>
五、总结
通过上述示例，我们实现了一个前后端分离的应用，Flask作为后端API，提供文章数据，而前端通过JavaScript与后端进行交互。你可以根据实际需求扩展功能，比如用户认证、更多的API接口等。
这种分离的架构使得前端和后端可以独立开发，增强了系统的灵活性和可维护性。希望这篇文章能帮助你快速上手Flask及前后端分离的开发模式！
