简易的指数转换 Web

1. python 主程序代码,保存为 app.py

from flask import Flask, request, render_template app = Flask(__name__) K = 1234567890 B = 1234567890 @app.route('/', methods=['GET', 'POST']) def index(): if request.method == 'POST': sales_index = request.form.get('sales_index') volume_index = request.form.get('volume_index') views_index = request.form.get('views_index') click_rate_index = request.form.get('click_rate_index') add_to_cart_conversion_index = request.form.get('add_to_cart_conversion_index') purchase_conversion_index = request.form.get('purchase_conversion_index') results = {} if sales_index: sales_index = int(sales_index) results['销售额'] = f"{sales_index * K + sales_index * B:.2f}" if volume_index: volume_index = int(volume_index) results['销量'] = int(volume_index * K + volume_index * B) if views_index: views_index = int(views_index) results['浏览量'] = int(views_index * K + views_index * B) if click_rate_index: click_rate_index = int(click_rate_index) results['点击率'] = f"{click_rate_index * K + click_rate_index * B:.2f}%" if add_to_cart_conversion_index: add_to_cart_conversion_index = int(add_to_cart_conversion_index) results['加购转化率'] = f"{add_to_cart_conversion_index * K + add_to_cart_conversion_index * B:.2f}%" if purchase_conversion_index: purchase_conversion_index = int(purchase_conversion_index) results['购买转化率'] = f"{purchase_conversion_index * K + purchase_conversion_index * B:.2f}%" return render_template('index.html', results=results) return render_template('index.html') if __name__ == '__main__': app.run(debug=True)

2. Web 前端代码,保存为 index.html 放在==/templates/index.html==

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>唯品会指数转换器</title> <link href="https://blog.shishibits.com:823/content/uploadfile/202411/f50c1731940620.png" rel="icon"> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 500px; width: 100%; } h1 { text-align: center; margin-bottom: 20px; color: #EC008C; /* 修改字体颜色 */ } label { display: block; margin-bottom: 5px; color: #EC008C; /* 修改字体颜色 */ } input[type="number"] { width: calc(100% - 22px); padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } /* 隐藏输入框的上下箭头 */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; /* Firefox */ } button { width: 100%; padding: 10px; background-color: #EC008C; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #006f1c; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #EC008C; color: white; } </style> </head> <body> <div class="container"> <h1>唯品会指数转换器</h1> <form method="post" id="converterForm"> <label for="sales_index">销售额指数</label> <input type="number" id="sales_index" name="sales_index" step="1"> <label for="volume_index">销量指数</label> <input type="number" id="volume_index" name="volume_index" step="1"> <label for="views_index">浏览量指数</label> <input type="number" id="views_index" name="views_index" step="1"> <label for="click_rate_index">点击率指数</label> <input type="number" id="click_rate_index" name="click_rate_index" step="1"> <label for="add_to_cart_conversion_index">加购转化率指数</label> <input type="number" id="add_to_cart_conversion_index" name="add_to_cart_conversion_index" step="1"> <label for="purchase_conversion_index">购买转化率指数</label> <input type="number" id="purchase_conversion_index" name="purchase_conversion_index" step="1"> <button type="submit">转换</button> </form> {% if results %} <table> <tr> {% for key in results.keys() %} <th>{{ key }}</th> {% endfor %} </tr> <tr> {% for value in results.values() %} <td>{{ value }}</td> {% endfor %} </tr> </table> {% endif %} </div> <script> document.getElementById('converterForm').addEventListener('submit', function(event) { const inputs = document.querySelectorAll('input[type="number"]'); let valid = false; // 初始化为false,表示没有有效输入 inputs.forEach(input => { if (!isNaN(input.value) && input.value !== '') { // 检查是否有有效输入 valid = true; } }); if (!valid) { // 如果没有任何有效输入,则阻止表单提交并提示用户输入至少一个值 alert('请至少输入一个值'); event.preventDefault(); // Prevent form submission if validation fails } }); </script> </body> </html>

3. 安装依赖包

pip install Flask

  ‍

4. 运行程序

  1. 运行 app.py

  2. 打开浏览器,输入网址 http://127.0.0.1:5000

  ‍

  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    546 引用 • 674 回帖
  • Flask
    19 引用 • 9 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...