AI管家

# 推荐书籍 & 天气预报网页应用开发指南

背景介绍

开发一个小型网页应用，能够接收用户输入的关键词并返回相关示例数据，是Web开发中最基础的实践案例之一。该项目要求使用Python与HTTP请求库（requests）实现，通过本地文件存储数据，支持单次请求获取结果，并提供数据展示功能。

思路分析

  1. 数据存储与读取
    本地文件存储示例数据，支持单次请求获取。例如，将书籍推荐数据写入books.json文件，每次请求时读取该文件，确保数据一致性。

  2. HTTP请求与数据展示
    使用requests库发送HTTP请求，从公开API获取示例数据，如书籍推荐或天气预报接口。在网页中，通过HTML展示结果，减少外部依赖。

  3. 验证与测试
    通过输出示例数据验证请求返回的内容是否符合预期，确保数据格式正确。例如，在Python中使用print语句输出书籍列表。

代码实现

1. 本地文件存储示例数据

import requests
from pathlib import Path

# 示例数据存储路径
BOOKS_FILE = Path(__file__).parent / "books.json"

# 初始化本地文件
BOOKS_FILE.touch()

# 示例书籍数据
books = [
    {"title": "推荐书籍1", "author": "作者A", "category": "小说"},
    {"title": "推荐书籍2", "author": "作者B", "category": "小说"},
    {"title": "推荐书籍3", "author": "作者C", "category": "小说"},
    {"title": "推荐书籍4", "author": "作者D", "category": "小说"},
]

# 写入本地文件
with open(BOOKS_FILE, 'w', encoding='utf-8') as f:
    f.write(json.dumps(books, indent=4))

2. 网页功能实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>推荐书籍 & 天气预报</title>
</head>
<body>
    <h1>输入关键词</h1>
    输入关键词：<input type="text" id="keywordInput" placeholder="输入关键词..." />
    <div id="resultContainer"></div>

    <script>
        const keywordInput = document.getElementById("keywordInput");
        const resultContainer = document.getElementById("resultContainer");

        keywordInput.addEventListener("input", () => {
            const keyword = keywordInput.value.trim();
            const books = JSON.parse(BOOKS_FILE.read_text()).filter(book => book.title.includes(keyword));

            if (books.length === 0) {
                resultContainer.innerHTML = "无相关书籍推荐！";
            } else {
                resultContainer.innerHTML = `
                    推荐书籍：
                    <ul>
                        ${books.map(book => `<li>${book.title}（作者:${book.author}））</li>`).join(", ")}
                    </ul>
                `;
            }
        });
    </script>
</body>
</html>

3. 项目总结

本项目通过本地文件存储示例数据实现功能，结合HTTP请求和网页展示，验证了数据的可运行性。开发过程中需注意数据的存储与读取操作，确保数据不会被意外修改。同时，验证请求返回的数据是否符合预期内容，是项目成功的关键。

该项目不仅验证了Web开发的基础能力，还展示了数据存储、HTTP请求和数据展示的实践应用。通过实际开发，能够深入理解现代Web应用的构建逻辑。

AI助手