使用Django与Cryptocompare实现加密货币价格表格动态展示

方案1：页面加载时一次性获取价格（新手友好，实现成本最低） #

该方案会在用户打开页面时一次性拉取所有加密货币的当前价格，渲染到页面中：

1. 修改views.py文件，导入价格获取工具函数，遍历加密货币列表预查价格，附加到对象属性中：

from .models import crypto
from .utils import get_crypto_price # 导入已写好的工具函数

def index_view(request):
    chart = FuncAnimation(plt.gcf(), animate, interval=1000)
    ticker_list = crypto.objects.all()
    # 遍历查询每个加密货币的当前价格
    for ticker in ticker_list:
        try:
            # 第二个参数为计价货币，可根据需求替换为USD/CNY等
            ticker.current_price = get_crypto_price(ticker.ticker, 'EUR')
        except:
            # 接口请求失败时显示占位符，避免页面报错
            ticker.current_price = '--'
    return render(request, 'cryptochart/index.html', {'chart': chart, 'ticker_list': ticker_list})

2. 修改index.html模板中的占位位置，直接读取附加的价格属性：

<td>{{ticker.current_price}}</td>

方案2：前端定时动态刷新价格（实现真正的实时更新） #

如果需要页面打开后价格自动定期更新，可以用AJAX方案实现：

1. 先在项目urls.py中新增价格查询接口路由：

from django.urls import path
from . import views

urlpatterns = [
    # 原有路由保持不变
    path('', views.index_view, name='index'),
    # 新增实时价格查询接口
    path('get-real-time-prices/', views.get_real_time_prices, name='get_real_time_prices'),
]

2. 在views.py中新增接口对应的视图函数，返回JSON格式的价格数据：

from django.http import JsonResponse
from .utils import get_crypto_price

def get_real_time_prices(request):
    ticker_list = crypto.objects.all()
    res = {}
    for ticker in ticker_list:
        try:
            res[ticker.ticker] = get_crypto_price(ticker.ticker, 'EUR')
        except:
            res[ticker.ticker] = '--'
    return JsonResponse(res)

3. 修改index.html模板，给价格单元格加标识，同时添加定时刷新的JS代码：

<!-- 修改价格列的td标签，添加类和自定义属性方便定位 -->
<td class="real-time-price" data-ticker="{{ticker.ticker}}">{{ticker.current_price}}</td>

<!-- 页面底部添加JS代码，30秒刷新一次价格，间隔可自行调整 -->
<script>
setInterval(() => {
    fetch("/get-real-time-prices/")
        .then(response => response.json())
        .then(priceData => {
            document.querySelectorAll(".real-time-price").forEach(item => {
                const ticker = item.dataset.ticker
                item.textContent = priceData[ticker]
            })
        })
}, 30000)
</script>

注意事项 #

• Cryptocompare接口有调用频率限制，不要把刷新间隔设置过短，避免被限制访问
• 生产环境建议添加缓存逻辑，重复请求相同币种的价格时优先读缓存，减少接口调用次数
• 计价货币可根据需求自行替换，比如将EUR改为CNY就会返回人民币计价的价格

内容的提问来源于stack exchange，提问作者Arianna parisi