Django无法加载HTML模板内JS及TSV文件求助

看起来你遇到的核心问题是没有正确使用Django的静态文件管理机制——Django对静态资源（JS、CSS、数据文件等）有专门的处理逻辑，不能直接用文件系统的相对路径访问，这也是本地打开HTML正常，但在Django应用里失效的原因。下面一步步帮你解决：

第一步：调整静态文件的存放结构 #

首先，把你的BarGraph.js和frequent_words.tsv从templates/graphs/目录移到你的app下的static/graphs/目录（如果没有static和graphs目录，手动创建即可）。比如你的app名为myapp，最终路径应该是：

myapp/
├── static/
│   └── graphs/
│       ├── BarGraph.js
│       └── frequent_words.tsv
├── templates/
│   └── graphs/
│       └── analysis.html
...

Django会自动扫描每个app下的static目录，这是官方推荐的静态文件存放方式。

第二步：确认settings.py的静态文件配置 #

打开项目根目录的settings.py，确保以下配置正确：

# 静态文件的基础访问URL
STATIC_URL = '/static/'

# 如果项目有全局的静态文件（不属于某个app），可以添加此配置，否则可忽略
STATICFILES_DIRS = [
    BASE_DIR / "static",  # 项目根目录下的static文件夹
]

第三步：修改analysis.html中的JS引用 #

在模板中必须使用Django的{% static %}模板标签生成正确的静态文件URL，步骤如下：

1. 在模板开头加载static标签（必须在{% extends %}之后、{% block %}之前）
2. 用{% static %}替换原来的相对路径

修改后的analysis.html代码：

{% extends "header.html" %}
{% load static %}  <!-- 加载静态文件标签 -->
{% block content %}
<h3 style="text-align:center;">Graph</h3>
<!-- 使用static标签生成正确的JS文件URL -->
<script type="text/javascript" src="{% static 'graphs/BarGraph.js' %}"></script>
{% endblock %}

第四步：修改JS中的TSV文件路径 #

JS在浏览器端运行，路径是相对于浏览器地址栏的URL，而非服务器文件系统路径。有两种可靠的解决方法：

方法1：使用相对路径（推荐） #

因为BarGraph.js和frequent_words.tsv都在/static/graphs/目录下，直接用文件名即可，浏览器会自动从JS所在路径请求TSV：

// 替换原来的templates/graphs/frequent_words.tsv
d3.tsv("frequent_words.tsv", function(error,data) {
    // 原代码保持不变...
});

方法2：从HTML传递静态URL（更灵活） #

如果后期文件结构变化，或者TSV在其他目录，可以在HTML中把TSV的静态URL传给JS：

{% block content %}
<h3 style="text-align:center;">Graph</h3>
<!-- 定义全局变量存储TSV的静态URL -->
<script>
const tsvDataUrl = "{% static 'graphs/frequent_words.tsv' %}";
</script>
<script type="text/javascript" src="{% static 'graphs/BarGraph.js' %}"></script>
{% endblock %}

然后在JS中使用这个全局变量：

d3.tsv(tsvDataUrl, function(error,data) {
    // 原代码保持不变...
});

验证配置是否正确 #

启动Django开发服务器后，直接访问以下URL，确认文件能正常加载：

• http://localhost:8000/static/graphs/BarGraph.js
• http://localhost:8000/static/graphs/frequent_words.tsv

如果能打开，说明静态文件配置正确，此时再访问analysis页面，图表应该就能正常显示了。

为什么之前的方法无效？ #

• 直接引用templates目录下的JS：Django的URL路由不会处理templates目录下的文件请求，浏览器会返回404错误，因为这个路径在Django中不存在。
• 嵌入JS后找不到TSV：此时JS里的路径是相对于当前页面的URL（比如http://localhost:8000/analysis/），浏览器会请求http://localhost:8000/templates/graphs/frequent_words.tsv，而这个路径并不在Django的静态文件系统中。

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