使用Flask和Vue.js构建一个现代化的前后端分离应用

发布时间：2023-12-26 17:17:05

Flask是一个轻量级的Python Web框架，而Vue.js是一个流行的JavaScript框架用于构建交互式的Web界面。结合Flask和Vue.js可以很容易地构建一个现代化的前后端分离应用。

下面，我将以一个简单的任务管理应用为例，来展示如何使用Flask和Vue.js构建一个现代化的前后端分离应用。

首先，我们创建一个Flask应用。在项目根目录下，创建一个名为app.py的Python文件，并添加以下代码:

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

tasks = [
    { 'id': 1, 'title': 'Task 1', 'completed': False },
    { 'id': 2, 'title': 'Task 2', 'completed': True },
    { 'id': 3, 'title': 'Task 3', 'completed': False }
]

@app.route('/tasks', methods=['GET'])
def get_tasks():
    return jsonify(tasks)

@app.route('/tasks', methods=['POST'])
def add_task():
    new_task = {
        'id': len(tasks) + 1,
        'title': request.json['title'],
        'completed': False
    }
    tasks.append(new_task)
    return jsonify(new_task)

if __name__ == '__main__':
    app.run()

上述代码创建了一个简单的Flask应用，并定义了两个路由。GET /tasks路由返回所有任务的列表，POST /tasks路由用于添加一个新的任务。

接下来，我们使用Vue.js来构建前端部分。创建一个名为frontend的文件夹，并在其中创建一个名为index.html的文件，并添加以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
</head>
<body>
    <div id="app">
        <h1>Task Manager</h1>
        <form @submit="addTask">
            <input type="text" v-model="taskTitle" placeholder="Enter task title" required>
            <button type="submit">Add Task</button>
        </form>
        <ul>
            <li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                taskTitle: '',
                tasks: []
            },
            mounted() {
                this.fetchTasks();
            },
            methods: {
                async fetchTasks() {
                    const response = await fetch('http://localhost:5000/tasks');
                    const data = await response.json();
                    this.tasks = data;
                },
                async addTask(event) {
                    event.preventDefault();
                    const response = await fetch('http://localhost:5000/tasks', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ title: this.taskTitle })
                    });
                    const data = await response.json();
                    this.tasks.push(data);
                    this.taskTitle = '';
                }
            }
        });
    </script>
</body>
</html>

上述代码定义了一个简单的HTML页面，并使用Vue.js来处理表单提交和任务列表的展示。当表单提交时，会发送一个POST请求到Flask应用，将新任务添加到任务列表中。在页面加载完成后，会发送一个GET请求到Flask应用，获取所有的任务列表数据并展示在页面上。

最后，我们运行Flask应用和Vue.js前端。在项目根目录下，打开终端，运行以下命令安装Flask和Flask-Cors:

pip install flask flask-cors

然后，在终端中运行以下命令启动Flask应用:

python app.py

在另一个终端窗口中，进入frontend目录，并运行以下命令启动Vue.js前端:

python -m http.server

现在，在浏览器中访问http://localhost:8000，即可看到一个简单的任务管理应用。你可以尝试添加任务，并在任务列表中查看已添加的任务。

这就是使用Flask和Vue.js构建一个现代化的前后端分离应用的示例。通过结合Flask和Vue.js，我们可以很方便地创建一个功能完整的Web应用，实现前后端的分离开发和交互。当然，实际的应用可能更复杂，但这个例子可以作为一个入门和基础示例。