FlaskJavascript和CSS没有正确呈现

2024-10-02 10:30:24 发布

您现在位置：Python中文网/ 问答频道 /正文
8974 3

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

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我有以下代码要呈现：

^{pr2}$

这是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>

以及选择.js以及样式.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瓶，但我还是没有办法。在


Tags： httpssvgdivcomappsearchindexhtml
1条回答
网友
1楼 · 发布于 2024-10-02 10:30:24

你的代码有一些错误。这可能对你有帮助。 http://flask.pocoo.org/docs/1.0/quickstart/#static-files

变化应用程序副本文件

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()

在你的索引.html文件

^{pr2}$

注意：我已经将CSS路由改为https://colorlib.com你可以在本地使用它需要下载css.css以及主.css文件并将其添加到/css文件夹中。在

相关问题 更多 >

    编程相关推荐

    热门问题