AI管家

# 简易网页应用开发与JSON保存

背景介绍

本项目旨在实现一个简易的网页应用，允许用户输入中文文本后，将其保存为JSON格式，同时显示结果。该系统需支持前后端交互，前端处理输入，后端保存数据，确保数据持久化并易于本地运行。

思路分析

  1. 前端逻辑：用户输入文本后，前端需通过JavaScript保存到本地存储，例如localStorage。
  2. 数据处理：后端使用Python的requests库发送POST请求，将JSON数据保存到文件或数据库中。
  3. 独立运行：无需依赖外部服务，仅使用Python完成前后端逻辑。

代码实现

前端代码（HTML + JavaScript）

<!DOCTYPE html>
<html>
<head>
    <title>中文文本保存</title>
</head>
<body>
    <h2>输入中文文本</h2>
    <input type="text" id="textInput" placeholder="输入文本" />
    <script>
        const textInput = document.getElementById('textInput');
        textInput.addEventListener('input', function(event) {
            const value = event.target.value;
            const json = JSON.stringify(value);
            localStorage.setItem('text', json);
            alert('保存成功！');
        });
    </script>
</body>
</html>

后端Python代码

import requests

def save_text_to_json(text):
    response = requests.post(
        'http://localhost:8000/api/text',
        json={'text': text},
        headers={'Content-Type': 'application/json'}
    )
    return response.json()

# 示例输入
text = "Hello, world!"
json_data = save_text_to_json(text)
print(json_data)

总结

本项目通过Python实现前端输入处理与后端数据保存，确保数据持久化并易于本地运行。代码模块清晰，支持独立运行，具备良好的可读性和可扩展性。

参考说明

  • 本代码使用requests库处理HTTP请求，实现前后端交互。
  • 数据保存至localStorage，支持本地存储和快速访问。
  • 结果输出清晰，便于用户验证输入内容。

AI助手