使用Flask引用HTML中的.js文件的静态资源问题-python黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

1769214

文章

1047082839

访问

+关注

分类

暂无分类

日期归档

暂无数据

使用Flask引用HTML中的.js文件的静态资源问题

发布于2021-01-16 03:36 阅读(2218) 评论(0) 点赞(16) 收藏(3)

直接打开时，我的html文件将加载我的OpenLayers JavaScript文件（该文件加载地图框架）。但是，当我从Flask python应用程序运行html时，JavaScript文件/对象无法加载（没有显示地图，仅显示一些标题文本）。

该问题似乎在这里排序：

在Flask上运行时未添加外部JavaScript文件

但是由于我的文件夹结构，我似乎无法加载.js。没有错误，页面中没有地图加载。我认为我需要有关“静态”参考语法的帮助。我认为这是问题所在，但是我对网站建设非常陌生。这是我的项目文件夹结构：

ol_app.py
/pages
    olquickstart.html
/static
    /scripts
        ol_script.js
/libs
    /v6.3.1-dist
        ol.css
        ol.css.map
        ol.js
        ol.js.map

我的Flask python应用程序：

from flask import Flask, render_template
import os
import webbrowser
from threading import Timer

template_dir = os.path.abspath(r'D:\PathToProject\ol_quickstart\pages')
app = Flask(__name__, template_folder=template_dir)

#home page
@app.route('/')
def index():
    return '<a href="http://127.0.0.1:5000/ol_qs">OL QuickStart</a>'

#openlayers test page
@app.route('/ol_qs')
def ol_qs():
    return render_template("olquickstart.html")

#run app
def open_browser():
    webbrowser.open_new('http://127.0.0.1:5000/')

if __name__ == "__main__":
    Timer(1, open_browser).start();
    app.run(port=5000)

我的html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../libs/v6.3.1-dist/ol.css" type="text/css">
    <style>
      .map {
        height: 900px;
        width: 100%;
      }
    </style>
    <script src="../libs/v6.3.1-dist/ol.js"></script>
    <title>OpenLayers Quickstart</title>
  </head>
  <body>
    <h2>OL Quickstart Map</h2>
    <div id="js-map" class="map"></div>
    <!-- <script src='../static/scripts/ol_script.js'></script> I USE THIS LINE WHEN OPENING THE HTML DIRECTLY WITHOUT FLASK-->
    <script type="text/javascript"
        src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>
  </body>
</html>

这是问题吗？

<script type="text/javascript" src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>

解决方案

看起来您需要将libs目录移动到其中static，然后包括具有与url_for您现有功能相似的功能的那些文件：

<link rel="stylesheet" type="text/css"
 href="{{ url_for('static', filename='libs/v6.3.1-dist/ol.css') }}">

<script type="text/javascript"
 src="{{ url_for('static', filename='libs/v6.3.1-dist/ol.js') }}"></script>

您现有的一个scripts/ol_script.js看起来很正确。

但是，要自己进行调试，您应该在Web浏览器中加载开发工具并查看Network选项卡，以确保每个JS文件都能成功加载且不会404。

同样，该Console标签会向您显示该页面内的所有JavaScript错误。

程序员说：42岁了，突然觉得研发前途渺茫

中国程序员数量达755万，全球排名第二

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的？

程序员说：30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

python精选：Python 办公实战！按姓名拆分 Excel 为单独文件，微信自动发给相应联系人

网友说：做开发，不被领导喜欢怎么办？