Django股票交易应用API调用404错误求助

问题描述 #

开发模拟股票交易Django应用时，JavaScript的fetch请求/api/stock/IBM/返回404错误：

Not Found: /api/stock/IBM/
[24/Oct/2023 19:09:52] "GET /api/stock/IBM/ HTTP/1.1" 404 2250

需求：获取IBM实时股票数据，同时支持查询任意股票代码，API开发新手。

核心问题及修复步骤 #

1. 修复URL路由的语法错误 #

urls.py中路径参数使用了HTML转义字符<str:symbol>，Django无法识别，导致路由匹配失败。

修改后的urls.py对应代码：

from django.urls import path
from . import views

urlpatterns = [
    path("", views.home, name = "home"),
    path("login/", views.login_view, name = "login"),
    path("createaccount/", views.createaccount, name = "createaccount"),
    path('logout/', views.logout_view, name='logout'),
    path('stocktrading/', views.stock_view, name='stocktrading'),
    # 修复转义字符，添加路由名称方便后续使用
    path('api/stock/<str:symbol>/', views.stock_api_view, name='stock_api')
]

2. 移除API视图中的硬编码股票代码 #

当前stock_api_view硬编码了symbol = "IBM"，导致无法接收URL传入的股票代码，失去动态查询能力。

修改后的views.py中stock_api_view函数：

def stock_api_view(request, symbol):
    # 移除硬编码的symbol赋值，使用URL传入的参数
    stock_data = fetch_intraday_data(symbol)
    print("Fetched stock data:", stock_data)
    return JsonResponse(stock_data)

3. 适配Alpha Vantage的数据格式 #

Alpha Vantage返回的TIME_SERIES_INTRADAY数据结构并非直接包含time和price字段，前端需要解析嵌套的时间序列数据。

修改后的main.js中fetchAndUpdate函数处理逻辑：

function fetchAndUpdate() {
    fetch('/api/stock/IBM/')
        .then(response => {
            if (!response.ok) {
                return Promise.reject('Fetch failed; HTTP status ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            // 处理API返回的错误信息
            if (data.error) {
                console.error('API Error:', data.error);
                return;
            }
            // 定位时间序列数据的键名
            const timeSeriesKey = Object.keys(data).find(key => key.startsWith('Time Series'));
            if (!timeSeriesKey) {
                console.error('No time series data found');
                return;
            }
            const timeSeries = data[timeSeriesKey];
            // 获取最新的时间点（按时间倒序排序后取第一个）
            const latestTime = Object.keys(timeSeries).sort((a, b) => new Date(b) - new Date(a))[0];
            const latestData = timeSeries[latestTime];
            // 提取收盘价（可根据需求替换为开盘价/最高价等）
            const newPrice = parseFloat(latestData['4. close']);
            
            // 避免重复添加相同时间点的数据
            if (!myChart.data.labels.includes(latestTime)) {
                myChart.data.labels.push(latestTime);
                myChart.data.datasets[0].data.push(newPrice);
                // 限制图表显示的最大数据量，避免界面拥挤
                if (myChart.data.labels.length > 20) {
                    myChart.data.labels.shift();
                    myChart.data.datasets[0].data.shift();
                }
                myChart.update();
            }
        })
        .catch(err => {
            console.error('Fetch Error:', err);
        });
}

4. 可选：优化前端请求路径（适配部署环境） #

如果应用部署在子路径下，使用Django模板标签生成API路径更可靠，避免硬编码路径导致的问题。

修改stockview.html：

{% extends "stocktrading/layout.html" %}
{% block body %}
<canvas id="myChart"></canvas>
<!-- 生成API基础路径，替换掉固定的IBM符号 -->
<script>
const API_BASE_URL = "{% url 'stock_api' symbol='IBM' %}".replace('IBM', '');
</script>
<script src="{% static 'stocktrading/main.js' %}"></script>
{% endblock %}

修改main.js中的fetch路径：

// 替换原有的硬编码路径
fetch(API_BASE_URL + 'IBM/')

后续查询其他股票时，只需替换IBM为目标代码即可。

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