构建 Python 后端和 HTML/Ajax 前端应用程序

qq^^614136809

于 2024-07-15 16:28:27 发布

阅读量247

点赞数 3

文章标签：前端 python html

本文链接：https://blog.csdn.net/D0126_/article/details/140442392

版权

您有一段 Python 脚本，可以从 Flickr 网站提取数据，并将其导出为 Python 类对象和 YAML 文件。您希望将此脚本变成一个网站，并在其中包含一个简单的 HTML 前端页面，该页面可以向后端发送请求，触发后端上运行的 Python 脚本。响应将被解析并呈现在 HTML 页面上。由于您对 Python 还不熟悉，因此您不确定如何规划此项目。
在这里插入图片描述

解决方案

您需要选择一个 Web 框架来帮助您构建此应用程序。有许多可用的 Web 框架，例如 Django、Flask、Bottle 等。每个框架都有其自身的优点和缺点。

Django：Django 是一个功能齐全的 Web 框架，它提供了许多开箱即用的功能。但是，它相对复杂，对于新手来说可能难以学习。
Flask：Flask 是一个轻量级的 Web 框架，它提供了非常灵活的 API。它比 Django 更容易学习，但它也缺乏 Django 提供的一些功能。
Bottle：Bottle 是一个非常简单的 Web 框架，它提供了最基本的 API。它非常适合小型项目，但对于大型项目来说可能不够强大。

如果您是 Python 新手，那么 Flask 是一个不错的选择。它易于学习，并且提供了足够的灵活性来构建各种应用程序。

您还需要在前端使用 JavaScript 和 Ajax 来向后端发送请求并处理响应。jQuery 是一个流行的 JavaScript 库，它可以帮助您轻松地实现此目的。

以下是使用 Flask 和 jQuery 构建此应用程序的一个简单示例：

# app.py

from flask import Flask, render_template, request
import yaml
import requests

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/flickr_data')
def flickr_data():
    # 从 Flickr 获取数据
    url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={{api_key}}&tags={{tags}}&format=json&nojsoncallback=1'
    response = requests.get(url)
    data = response.json()

    # 将数据转换为 Python 对象
    photos = []
    for photo in data['photos']['photo']:
        photos.append({
            'id': photo['id'],
            'title': photo['title'],
            'url': photo['url_m']
        })

    # 将数据导出为 YAML 文件
    with open('flickr_data.yaml', 'w') as f:
        yaml.dump(photos, f)

    # 返回响应
    return 'OK'

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

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Flickr Data Viewer</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#submit_button').click(function() {
                $.ajax({
                    url: '/flickr_data',
                    method: 'GET',
                    success: function(response) {
                        alert('Data downloaded successfully!');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h1>Flickr Data Viewer</h1>
    <form>
        <input type="text" id="tags" placeholder="Tags">
        <input type="submit" id="submit_button" value="Get Data">
    </form>
</body>
</html>

在上面的示例中：

app.py 是 Flask 应用的主脚本。
index.html 是 HTML 前端页面。
jquery.min.js 是 jQuery 库。

您需要将这些文件保存在同一个目录中，然后运行 app.py 脚本即可启动应用程序。

希望此示例对您有所帮助。

qq^^614136809

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
构建 Python 后端和 HTML/Ajax 前端应用程序

您有一段 Python 脚本，可以从 Flickr 网站提取数据，并将其导出为 Python 类对象和 YAML 文件。您希望将此脚本变成一个网站，并在其中包含一个简单的 HTML 前端页面，该页面可以向后端发送请求，触发后端上运行的 Python 脚本。jQuery 是一个流行的 JavaScript 库，它可以帮助您轻松地实现此目的。您需要选择一个 Web 框架来帮助您构建此应用程序。如果您是 Python 新手，那么 Flask 是一个不错的选择。脚本即可启动应用程序。希望此示例对您有所帮助。
复制链接

扫一扫