引言

大家好，我是ICodeWR。在前几篇文章中，我们记录了 Remi 的基础功能、多页面应用和动态更新。

今天将深入探讨如何将 Remi 与 Flask 框架结合，从而打造更强大的 Web 应用。

Flask 是一个轻量级的 Python Web 框架，适合构建 RESTful API 和后端服务。通过将 Remi 与 Flask 结合，我们可以实现前后端分离，扩展 Web 应用的功能。

Remi 与 Flask 结合的优势

1. 前后端分离：Remi 负责前端界面，Flask 负责后端逻辑和数据接口。
2. 功能扩展：利用 Flask 的路由、模板引擎和扩展库，可以轻松实现复杂的功能。
3. 灵活性：Remi 和 Flask 都是轻量级框架，组合使用非常灵活。

案例：创建一个任务管理系统

接下来我们通过一个任务管理系统的案例，学习如何将 Remi 与 Flask 结合。最终效果如下：

前端（Remi）：

• 显示任务列表。
• 提供添加任务的表单。

后端（Flask）：

• 提供任务数据的增删改查接口。
• 使用内存存储任务数据。

代码实现

1. Flask 后端代码

保存为 flask_server.py：

from flask import Flask, jsonify, request

app = Flask(__name__)

# 内存中存储任务数据
tasks = []

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

@app.route('/tasks', methods=['POST'])
def add_task():
    task = request.json
    tasks.append(task)
    return jsonify(task), 201

@app.route('/tasks/<int:task_id>', methods=['DELETE'])
def delete_task(task_id):
    if task_id < len(tasks):
        tasks.pop(task_id)
        return jsonify({'message': '任务已删除'}), 200
    return jsonify({'message': '任务不存在'}), 404

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

2. Remi 前端代码

保存为 remi_client.py：

from remi import start, App, gui
import requests

class TaskManagerApp(App):
    def __init__(self, *args):
        super(TaskManagerApp, self).__init__(*args)

    def main(self):
        # 创建一个垂直布局容器作为根容器
        root_container = gui.VBox(width=400, style={'margin': 'auto', 'padding': '20px', 'border': '1px solid #ccc'})

        # 创建标题标签
        title = gui.Label("任务管理系统", style={'font-size': '24px', 'text-align': 'center', 'margin-bottom': '20px'})

        # 创建任务列表容器
        self.task_list = gui.VBox(width='100%', style={'margin-bottom': '20px'})

        # 创建添加任务表单
        form_container = gui.VBox(width='100%', style={'margin-bottom': '20px'})
        self.task_input = gui.TextInput(width='100%', height=30, style={'margin-bottom': '10px'})
        add_button = gui.Button("添加任务", width=100, height=30)
        add_button.onclick.do(self.on_add_task_clicked)

        # 将表单组件添加到容器中
        form_container.append(self.task_input)
        form_container.append(add_button)

        # 将所有组件添加到根容器中
        root_container.append(title)
        root_container.append(self.task_list)
        root_container.append(form_container)

        # 加载初始任务列表
        self.load_tasks()

        # 返回根容器
        return root_container

    def load_tasks(self):
        # 清空任务列表
        self.task_list.empty()

        # 从 Flask 后端获取任务数据
        response = requests.get('http://127.0.0.1:5000/tasks')
        if response.status_code == 200:
            tasks = response.json()
            for i, task in enumerate(tasks):
                task_item = gui.HBox(width='100%', style={'margin-bottom': '10px'})
                task_label = gui.Label(task['text'], width='80%', style={'font-size': '16px'})
                delete_button = gui.Button("删除", width=60, height=30)
                delete_button.onclick.do(self.on_delete_task_clicked, i)
                task_item.append(task_label)
                task_item.append(delete_button)
                self.task_list.append(task_item)

    def on_add_task_clicked(self, widget):
        # 获取用户输入的任务内容
        task_text = self.task_input.get_value()
        if task_text:
            # 发送 POST 请求添加任务
            response = requests.post('http://127.0.0.1:5000/tasks', json={'text': task_text})
            if response.status_code == 201:
                self.task_input.set_value('')  # 清空输入框
                self.load_tasks()  # 重新加载任务列表

    def on_delete_task_clicked(self, widget, task_id):
        # 发送 DELETE 请求删除任务
        response = requests.delete(f'http://127.0.0.1:5000/tasks/{task_id}')
        if response.status_code == 200:
            self.load_tasks()  # 重新加载任务列表

# 启动 Remi 应用
if __name__ == "__main__":
    start(TaskManagerApp, address='0.0.0.0', port=8080)

运行步骤

1. 在RemiEg项目中添加 flask 和 requests 库

# 添加 flask 库
uv add flask requests

# 激活虚拟环境
.\.venv\Scripts\activate

2. 启动 Flask 后端：

python .\day07\flask_server.py

3. 启动 Remi 前端：

python .\day07\remi_client.py

3. 打开浏览器，访问 http://127.0.0.1:8080，你将看到任务管理系统。

添加任务：

添加一条任务：

代码解析

Flask 后端：

• 提供 /tasks 接口，支持获取任务列表（GET）和添加任务（POST）。
• 提供 /tasks/<task_id> 接口，支持删除任务（DELETE）。

Remi 前端：

• 使用 requests 库与 Flask 后端通信。
• 通过 load_tasks 方法加载任务列表。
• 通过 on_add_task_clicked 和 on_delete_task_clicked 方法处理用户交互。

本篇案例用到的函数原型

1. requests.get 方法

功能：发送 HTTP GET 请求。

原型：

requests.get(url, params=None, **kwargs)

示例：

response = requests.get('http://127.0.0.1:5000/tasks')

2. requests.post 方法

功能：发送 HTTP POST 请求。

原型：

requests.post(url, data=None, json=None, **kwargs)

示例：

response = requests.post('http://127.0.0.1:5000/tasks', json={'text': '新任务'})

3. requests.delete 方法

功能：发送 HTTP DELETE 请求。

原型：

requests.delete(url, **kwargs)

示例：

response = requests.delete('http://127.0.0.1:5000/tasks/1')

总结

今天记录了如何将 Remi 与 Flask 结合，并通过一个任务管理系统的案例演示了前后端分离的开发模式。在接下来的文章中，我们将深入探讨 Remi 与其他 Python 库的集成。

欢迎交流

1. 你在使用 Remi 与 Flask 结合时遇到过哪些问题？欢迎在评论区分享！
2. 你希望在本系列中看到哪些 Remi 的实际应用场景？欢迎留言告诉我们！

将陆续更新 Python 编程相关的学习资料！

作者：ICodeWR

标签：#编程# #在头条记录我的2025# #python# #春日生活打卡季#