Вопросы Теги

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

Посмотрите: 

CMAKE_EXE_LINKER_FLAGS
CMAKE_MODULE_LINKER_FLAGS
CMAKE_SHARED_LINKER_FLAGS
CMAKE_STATIC_LINKER_FLAGS
2
задан Filipe Aleixo 28 February 2019 в 10:07
поделиться

1 ответ

В вашем коде есть некоторые исправления. Это может помочь вам. 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 .

0
ответ дан Mahendra S. Chouhan 28 February 2019 в 10:07
поделиться
Другие вопросы по тегам:

Похожие вопросы: