Flask中创建生成JS的路由 实现向JS文件传递数据的方法

两种可行方案 #

方案一：把JS文件当作Jinja2模板渲染 #

这种方式让Flask直接处理JS文件，就像处理HTML模板一样，可直接在JS里用Jinja2语法获取数据。

1. 调整文件位置
   把custom-scripts.js从static目录移到templates目录下（可新建js子文件夹归类），示例目录结构：

   your-app/
   ├── app.py
   ├── templates/
   │   ├── layout.html
   │   └── js/
   │       └── custom-scripts.js
   └── static/
       └── css/
           └── style.css
   

2. 新增JS渲染路由
   在app.py中添加专门路由，用于渲染JS模板并传递数据：

   from flask import Flask, render_template
   
   app = Flask(__name__)
   
   @app.route('/')
   def index():
       data = {"username": "Alice", "user_id": 123}
       return render_template('layout.html', data=data)
   
   # 处理JS模板的路由
   @app.route('/js/custom-scripts.js')
   def render_custom_js():
       data = {"username": "Alice", "user_id": 123}
       # 设置响应头为JS类型，避免浏览器解析错误
       return render_template('js/custom-scripts.js', data=data), 200, {'Content-Type': 'application/javascript'}
   

3. 修改JS文件内容
   在custom-scripts.js中直接用Jinja2语法取值，记得用tojson过滤器转换为合法JSON：

   // templates/js/custom-scripts.js
   const userData = {{ data|tojson }};
   console.log("用户数据：", userData);
   
   function initPage() {
       document.getElementById('user-name').innerText = userData.username;
   }
   
   window.addEventListener('load', initPage);
   

4. 更新HTML中的引用
   将原来引用static下JS的代码改为引用新路由：

   <!-- layout.html -->
   <script src="{{ url_for('render_custom_js') }}"></script>
   

方案二：通过HTML注入全局变量（更省心） #

如果不想额外维护路由，可直接在HTML中把数据存为全局变量，让static下的JS读取即可，步骤更简单：

1. 修改layout.html
   在加载custom-scripts.js之前，插入全局变量：

   <!-- layout.html -->
   <!-- 先把Flask传递的data转为全局变量 -->
   <script>
       window.appData = {{ data|tojson }};
   </script>
   <!-- 再加载独立JS文件 -->
   <script src="{{ url_for('static', filename='js/custom-scripts.js') }}"></script>
   

2. 修改static下的JS
   直接读取全局变量window.appData：

   // static/js/custom-scripts.js
   const userData = window.appData;
   console.log("用户数据：", userData);
   
   function initPage() {
       document.getElementById('user-name').innerText = userData.username;
   }
   
   window.addEventListener('load', initPage);
   

关键注意点 #

• 必须使用|tojson过滤器：它会自动处理引号转义、JSON格式转换，避免语法错误和XSS风险。
• 方案一的缓存问题：如果JS内容动态变化，建议给URL加版本号（比如/js/custom-scripts.js?v=2），防止浏览器缓存旧内容。
• 优先选择方案二：无需额外维护路由，代码结构更清晰，适合大多数场景。

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