Flask - Javascript и CSS неправильно отображаются - PullRequest
Новая
       1

Flask - Javascript и CSS неправильно отображаются

0 голосов
/ 28 февраля 2019

Я создаю свое первое веб-приложение, используя Flask, и хочу, чтобы моя первая страница была похожа на следующую:

https://colorlib.com/etc/searchf/colorlib-search-3/

Источник можно скачать здесь https://colorlib.com/download/1814/

Я попытался адаптировать исходный код для его рендеринга во Flask.Моя структура папок выглядит следующим образом: 

app/
    app.py
    templates/
        index.html
    static/
        css/
            style.css
        js/
            main.js
            extention/
                choices.js
                custom-materialize.js
                flatpickr.js

Полный репозиторий здесь: https://github.com/filipealeixo/nlprism/tree/master/app

В app.py У меня есть следующий код для отображения index.html при переходе на корневую страницу:

from flask import Flask, render_template
import json
import plotly
import plotly.graph_objs as go
import numpy as np

app = Flask(__name__)
app.debug = True


@app.route('/')
def index():
    return render_template('index.html')

Это index.html: 

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" />
  </head>
  <body>
    <div class="s003">
      <form>
        <div class="inner-form">
          <div class="input-field wrap">
            <input id="search" type="text" placeholder="Enter Amazon Product URL" />
          </div>
          <div class="input-field third-wrap">
            <button class="btn-search" type="button">
              <svg class="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
              </svg>
            </button>
          </div>
        </div>
      </form>
    </div>
    <script src= "{{ url_for('static', filename = 'js/extention/choices.js') }}"></script>
    <script>
      const choices = new Choices('[data-trigger]',
      {
        searchEnabled: false,
        itemSelectText: '',
      });

    </script>
  </body>
</html>

А choices.js и style.css можно найти здесь https://github.com/filipealeixo/nlprism/blob/master/app/static/js/extention/choices.js и здесь https://github.com/filipealeixo/nlprism/blob/master/app/static/css/style.css, соответственно.

Теперь вместо макета, который вы видите в https://colorlib.com/etc/searchf/colorlib-search-3/, я получаю следующее:

enter image description here

Что делает очевидным, что статические файлы отображаются неправильно.Хотя я понятия не имею почему, так как они возвращают код 200 на Flask при вызове.

1 Ответ

0 голосов
/ 28 февраля 2019

В вашем коде есть некоторые исправления.Это может помочь вам.http://flask.pocoo.org/docs/1.0/quickstart/#static-files

изменения в файле app.py 

from flask import Flask, render_template, send_from_directory
import json
import plotly
import plotly.graph_objs as go
import numpy as np

app = Flask(__name__, static_url_path='/static')
app.debug = True


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/analysis')
def analyse():
    count = 500
    xScale = np.linspace(0, 100, count)
    yScale = np.random.randn(count)

    # Create a trace
    trace = go.Scatter(
        x=xScale,
        y=yScale
    )

    data = [trace]
    graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
    return render_template('analysis.html',
                           graphJSON=graphJSON)

@app.route('/js/<path:path>')
def send_js(path):
    return send_from_directory('static/js', path)


@app.route('/css/<path:path>')
def send_css(path):
    return send_from_directory('static/css', path)


if __name__ == "__main__":
    app.run()

и некоторые исправления в файле index.html 

<html class="gr__colorlib_com"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://colorlib.com/etc/searchf/colorlib-search-3/css/css.css" rel="stylesheet">
<link href="https://colorlib.com/etc/searchf/colorlib-search-3/css/main.css" rel="stylesheet">
</head>
<body data-gr-c-s-loaded="true">
<div class="s003">
<form>
<div class="inner-form">
<div class="input-field second-wrap">
<input id="search" type="text" placeholder="Enter Amazon Product URL">
</div>
<div class="input-field third-wrap">
<button class="btn-search" type="button">
<svg class="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
</button>
</div>
</div>
</form>
</div>


</body></html>

Примечание: Я изменилсяCSS-маршрут к https://colorlib.com, который вы можете использовать локально, необходим для загрузки файлов css.css и main.css и добавления его в папку / css .

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

Нет похожих вопросов

...