Python Flask 页面未使用外部 CSS 和 Javascript 呈现

Posted 2023-02-23

【中文标题】Python Flask 页面未使用外部 CSS 和 Javascript 呈现

【英文标题】：Python Flask page not rendering with external CSS and Javascript

【发布时间】：2017-03-26 09:40:44

【问题描述】：

我创建了一个 Python Flask 应用程序，其模板在一个 html 文件中包含 HTML/CSS/javascript。这渲染得很好。

我想将 CSS 和 Javascript 文件分离到他们自己的文件中。我这样做并修改了 HTML 文件以适应 CSS 和 Javascript 文件的新位置。

但是页面不会呈现。打开时出现“未找到”错误页面。

我想将 CSS 和 Javascript 分开，这样我就可以在不管理 HMTL 和 CSS 的情况下使用 Javascript。任何帮助将不胜感激。

这是有效的原始 HTML 文件：

% extends "base.html" %

% block title %test.com% endblock %

% block page_content %

    <title>cytoscape-dagre.js demo</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

    <!-- for testing with local version of cytoscape.js -->
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>

    <style>
        body 
            font-family: helvetica;
            font-size: 14px;
        

        #cy 
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
        

        h1 
            opacity: 0.5;
            font-size: 1em;
        
    </style>

    <script>
        $(function()

            var cy = window.cy = cytoscape(
                container: document.getElementById('cy'),

      boxSelectionEnabled: false,
      autounselectify: true,

                layout: 
                    name: 'dagre'
                ,

                style: [
                    
                        selector: 'node',
                        style: 
                            'content': 'data(id)',
                            'text-opacity': 0.5,
                            'text-valign': 'center',
                            'text-halign': 'left',
                            'background-color': '#11479e'
                        
                    ,

                    
                        selector: 'edge',
                        style: 
                            'width': 4,
                            'target-arrow-shape': 'triangle',
                            'line-color': '#9dbaea',
                            'target-arrow-color': '#9dbaea',
                            'curve-style': 'bezier'
                        
                    
                ],

                elements: 
                    nodes: [
                         data:  id: 'n0'  ,
                         data:  id: 'n1'  ,
                         data:  id: 'n2'  ,
                         data:  id: 'n3'  ,
                         data:  id: 'n4'  ,
                         data:  id: 'n5'  ,
                         data:  id: 'n6'  ,
                         data:  id: 'n7'  ,
                         data:  id: 'n8'  ,
                         data:  id: 'n9'  ,
                         data:  id: 'n10'  ,
                         data:  id: 'n11'  ,
                         data:  id: 'n12'  ,
                         data:  id: 'n13'  ,
                         data:  id: 'n14'  ,
                         data:  id: 'n15'  ,
                         data:  id: 'n16'  
                    ],
                    edges: [
                         data:  source: 'n0', target: 'n1'  ,
                         data:  source: 'n1', target: 'n2'  ,
                         data:  source: 'n1', target: 'n3'  ,
                         data:  source: 'n4', target: 'n5'  ,
                         data:  source: 'n4', target: 'n6'  ,
                         data:  source: 'n6', target: 'n7'  ,
                         data:  source: 'n6', target: 'n8'  ,
                         data:  source: 'n8', target: 'n9'  ,
                         data:  source: 'n8', target: 'n10'  ,
                         data:  source: 'n11', target: 'n12'  ,
                         data:  source: 'n12', target: 'n13'  ,
                         data:  source: 'n13', target: 'n14'  ,
                         data:  source: 'n13', target: 'n15'  ,
                    ]
                ,
            );

        );
    </script>


<body>
    <h1>cytoscape-dagre demo</h1>

    <div id="cy"></div>

</body>

% endblock %

虽然这里的新代码没有按我的预期工作：

% extends "base.html" %

% block title %test.com% endblock %

% block page_content %


    <title>cytoscape-dagre.js demo</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

    <!-- for testing with local version of cytoscape.js -->
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>

    <script type="text/javascript" src=" url_for('static', filename='javascript/graph3.js') "></script>
    <link rel= "stylesheet" type= "text/css" href= " url_for('static',filename='styles/style.css') ">

    <body>
         <h1>cytoscape-dagre demo</h1>

         <div id="cy"></div>

    </body>

% endblock %

【问题讨论】：

您是从 Flask 还是从 URL 获得“未找到”？当您查看源代码时，您是否看到了您期望的 URL？

拜托，您能告诉我们更多关于环境的信息吗？： * 主页的 url/path 以及 css/js 文件是什么？ * 请求是直接的还是通过任何类型的代理？

【参考方案1】：

解决方案是确保烧瓶应用程序具有视图。

view.py 文件中缺少以下代码。

@main.route('/graph4', methods=['GET'])
def graph4():
    return render_template('graph4.html')

否则html、js、css都是正确的。

【讨论】：

我正要在上面的评论中提出这个建议。

【参考方案2】：

关闭rel、type 和href 后等号后的空格。

<link rel= "stylesheet" type= "text/css" href= " url_for('static',filename='styles/style.css') ">

到

<link rel="stylesheet" type="text/css" href=" url_for('static',filename='styles/style.css') ">

看来这就是罪魁祸首。

【讨论】：

[link=***.com/questions/22259847/… 在这里看看这是否没有帮助[/link]，我会再四处寻找解决方案。

【参考方案3】：

我看到的唯一区别是您的脚本出现在工作案例的样式之后和损坏之前。

【讨论】：

它可能适用于两个脚本，但我认为不适用于 css。唯一可能的问题是路径错误，但我想您不会对此提出问题。