Stati c ссылка на ресурс. js файл в html с использованием Flask - PullRequest
0 голосов
/ 24 апреля 2020

При непосредственном открытии мой файл html загрузит мой файл OpenLayers JavaScript (который загружает фрейм карты). Однако когда я запускаю html из моего приложения Flask python, файл / объект JavaScript не загружается (карта не отображается, только текст заголовка).

Эта проблема возникает быть отсортированными здесь:

Внешний JavaScript файл не добавляется при работе на Flask

Однако из-за структуры моей папки я не могу получить. js для загрузки. Нет ошибок, просто нет загрузки карты на странице. Я думаю, что мне нужна помощь с синтаксисом ссылки «stati c». Я думаю, что это проблема, однако я очень новичок в создании сайтов. Это структура папок моего проекта:

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

My Flask python app:

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)

my 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>

1 Ответ

1 голос
/ 25 апреля 2020

Похоже, вам нужно переместить каталог 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 выглядит правильно.

Однако, чтобы отладить это самостоятельно, вы должны загрузить инструменты разработчика в свой веб-браузер и просмотреть вкладку Network, чтобы убедиться, что каждый файл JS загружается успешно, а не 404.

Аналогично, вкладка Console покажет вам javascript ошибки на странице.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...