如何在Python中建立一个货币转换器

方石剑
394 阅读3分钟

你是否曾经试图提供一种产品、一种服务，或者只是想以不同的货币显示价格？那么你就知道提供最新的、准确的汇率有多难。

这就是货币兑换API的作用。汇率API帮助你处理你的外汇汇率转换。在这个例子中，我们将看看如何使用Flask网络框架和一点用于前端造型的Javascript将货币API集成到一个简单的Python应用程序中，这样你就可以建立自己的货币转换器。

关于如何在Python中创建货币转换器的分步指南

首先，我们将建立我们的开发栈。

第1步：初始化我们的前端项目

为了开始，我们需要在我们的开发工作区初始化一个Vite项目。

yarn create vite currency-converter --template vanilla

第2步：风格化设置（可选）

样式设置是可选的，但如果你选择按照这个步骤，我们建议使用Tailwind CSS。Autoprefixer & postcss进一步实现了流畅的开发体验。因此，我们需要安装这些软件包。

yarn add -D tailwindcss postcss autoprefixer

现在我们可以初始化tailwind。这将创建一个配置文件（tailwind.config.js）。

npx tailwindcss init

我们现在需要调整这个新创建的配置，以便与我们的Vite项目设置一起工作。

module.exports = {
 content: [
   './main.js',
   './index.html',
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

为了包括尾风的CSS，在你的style.css的顶部添加以下几行。

@tailwind base;
@tailwind components;
@tailwind utilities;

接下来，我们需要在我们的根目录下为postcss创建一个名为postcss.config.js的配置文件。因此，我们，添加。

module.exports = {
	plugins: [
    	require('tailwindcss'),
    	require('autoprefixer')
	]
}

第3步：启动vite

现在我们可以在开发模式下启动vite，以热重载的方式提供我们的文件。

yarn dev

第4步：准备我们的HTML

接下来，我们要调整默认的登陆页面。为此，我们打开index.html并建立一个表单。我们将需要以下元素。

  • 一个用于输入的封装器 t
  • 我们的基本货币的输入：
  • 一个基本货币选择 一个提交按钮 一个响应容器 下面是我们实现的index.html的样子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="favicon.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Currency converter example</title> </head> <body class="bg-gradient-to-b from-cyan-800 to-slate-800 min-h-screen py-5"> <form id="currency_converter" class="mx-auto w-full max-w-sm bg-white shadow rounded-md p-5 space-y-3 text-sm"> <div class="flex items-center space-x-5"> <label for="base_currency_input">Amount:</label> <input type="tel" id="base_currency_input" name="base_currency_input" placeholder="1" value="" class="grow border-slate-300 border rounded-md py-2 px-4 text-sm" required /> </div> <div class="flex items-center space-x-5"> <label for="currency">Currency:</label> <select name="currency" id="currency" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"> <option selected value="USD">USD</option> <option value="EUR">EUR</option> <option value="CHF">CHF</option> </select> </div> <button type="submit" class="bg-slate-800 text-white rounded-md py-2 px-4 mx-auto relative block w-full">Convert </button> </form> <div id="result" class="mx-auto my-5 w-full max-w-sm bg-white shadow rounded-md relative overflow-hidden text-sm empty:hidden divide-y divide-dotted divide-slate-300"> </div> <script type="module" src="/main.js"></script> </body> </html> 第5步：在JavaScript中处理表单提交 在我们的main.js中，我们把货币金额（`base_currency_input`）和货币（`base_currency`）发送到我们的后台。我们将在响应中收到所有货币的列表和相应的值。 import './style.css' const currencyConverter = document.getElementById('currency_converter'); const baseCurrencyInput = document.getElementById('base_currency_input'); const baseCurrency = document.getElementById('currency'); const resultContainer = document.getElementById('result'); currencyConverter.addEventListener('submit', (e) => { e.preventDefault(); fetch(`http://localhost:6001/convert?` + new URLSearchParams({ 'base_currency_input': baseCurrencyInput.value, 'currency': baseCurrency.value })) .then(response => response.json()) .then(data => { var result = '<div class="space-y-1 px-5 py-3 border-2 rounded-md">'; for (let entry of data) { result += `<div class="flex items-baseline justify-between"><span class="font-medium">${entry.code}:</span><span>${entry.value}</span></div>`; } resultContainer.innerHTML = result; }); }); 第6步：准备后端应用程序 现在，我们创建一个新的文件夹，即：`currency-converter`文件夹内的`backend-application`。 注意：这些命令对macOS/Linux有效；对于Windows，请查看 这里. mkdir backend-application cd backend-application python3 –m venv venv . venv/bin/activate pip install Flask currencyapicom 第7步：创建后端应用程序 在最后一步，我们简单地添加一个新的文件，叫做`main.py`。 from flask import Flask, request, jsonify from currencyapicom import Client from config import CURRENCYAPI_KEY app = Flask(__name__) @app.route("/convert", methods=['GET']) def convert(): currency_input = request.args.get('base_currency_input', '') currency = request.args.get('currency', 'USD') if currency_input and currency in ['USD', 'EUR', 'CHF']: api_client = Client(CURRENCYAPI_KEY) response = api_client.latest(currency) response = jsonify([{'value': response['data'][x]['value'] * float(currency_input), 'code': x} for x in response['data'].keys()]) response.headers.add("Access-Control-Allow-Origin", "*") return response 我们可以通过一些简单的命令来运行该应用程序（我们将端口绑定为6001，以避免与其他应用程序冲突）。 export FLASK_APP=main flask run –port 6001 在最后一步，我们需要创建一个`config.py`文件，包括currencyapi.com的API密钥。你可以免费获得它，并在文档中了解更多关于API的信息。 这就是了! 最新的和准确的 通过这几个步骤，你现在可以用Python建立你自己的货币转换器，并显示不同货币的准确和最新的价格。货币转换器有很多用处；无论你把它用于电子商务商店、分析或电子表格，我们都希望这个教程能指导你完成这个过程。
avatar
文章
阅读
粉丝