Question

我正在使用Flask构建我的第一个Web应用程序，并且希望我的首页类似于以下内容：

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/中看到的布局：

很明显，这些静态文件没有正确呈现。尽管我不知道为什么，因为它们在被调用时会在Flask上返回代码200。

Answer 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文件夹。

Flask-无法正确呈现Javascript和CSS

1 个答案: