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. 运行程序
-
运行 app.py
-
打开浏览器，输入网址
http://127.0.0.1:5000
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于