将CSS链接到Flask时出错

迪伦

我正在尝试将一些写成CSS的ive链接到单页应用程序,但是当我通过CMDER运行它时,却总是出现404错误。

我的应用程式

webapp.py

静态文件夹

--index.html

--css --- theme.css

--images --- hudson1.jpg

范本

--newyork.html

127.0.0.1 - - [28/Nov/2016 10:08:10] "GET /%7B%7B%20url_for('static',%20filename='css/theme.css')%20%7D%7D HTTP/1.1" 404

这是我得到的错误。这是我的代码。

Index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#newyorkbutton").click(function(){
$.get("/newyork", function(data, status){
$("#city").html(data);
});
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Blog ABout My Travels</title>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static', filename='css/theme.css') }}">
</head>

<body>

    <div id="mainPicture">
        <div class="picture">
            <div id="headerTitle">Places I've Been</div>
            <div id="headerSubtext">A Blog About My Travels</div>
        </div>
    </div>
    <div id="page">
        <input type="submit" name="NewYork" id="newyorkbutton" value="New York">
</div>
<div id="city" class="contentBox">
        <div class="innerBox">
            <h2>Welcome to My Travels</h2>
          <div class="contentText"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p><br />
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p></div>        
</div>
</div>

</body>
</html>

这是我的newyork.html:

<!doctype html>
<head>
<title>New York</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
</head>
<div class="innerBox">
<h2>New York</h2>       
<div class="contentText"><p>
    New York is a state in the northeastern United States, and is the 27th-most extensive, fourth-most populous, and seventh-most densely populated U.S. state. New York is bordered by New Jersey and Pennsylvania to the south and Connecticut, Massachusetts, and Vermont to the east. The state has a maritime border in the Atlantic Ocean with Rhode Island, east of Long Island, as well as an international border with the Canadian provinces of Quebec to the north and Ontario to the west and north. 
</p>
<img src="{{ url_for('static', filename='images/newyork1.jpg') }}" alt="New York" style="width:750px;height:350px;">
<p>
    The state of New York, with an estimated 19.8 million residents in 2015, is often referred to as New York State to distinguish it from New York City, the state's most populous city and its economic hub. With an estimated population of 8.55 million in 2015, New York City is the most populous city in the United States and the premier gateway for legal immigration to the United States. The New York City Metropolitan Area is one of the most populous urban agglomerations in the world. New York City is a global city, exerting a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment, its fast pace defining the term New York minute. 
</p></div> 
</div> 

而我的webapp.py:

from flask import Flask, render_template, request

app = Flask(__name__)  

@app.route("/")
def root():
    return app.send_static_file('index.html')

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

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

问题在于您是以index.html静态文件而不是以渲染模板的形式发送的首先移动index.htmlstatic文件夹中templates的文件夹,

然后,你应该改变

@app.route("/")
def root():
    return app.send_static_file('index.html')

webapp.py到:

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

它将起作用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将gfortran链接到LAPACK和BLAS时出错

来自分类Dev

将测试套件链接到库时出错

来自分类Dev

链接到目标文件时出错

来自分类Dev

将HTML链接到CSS

来自分类Dev

将libav链接到我的Android NDK项目时出错

来自分类Dev

将犰狳lapack blas链接到代码时出错:对`dtrsm_'的未定义引用

来自分类Dev

将IBM Bluemix Devops ID链接到IBM Bluemix时出错

来自分类Dev

Odoo:将many2one链接到其他模型时出错404?

来自分类Dev

将IBM Bluemix Devops ID链接到IBM Bluemix时出错

来自分类Dev

将 python 代码链接到 FLASK

来自分类Dev

将solr连接到mysql时出错

来自分类Dev

将CSS文件链接到JSP

来自分类Dev

无法将css文件链接到Django

来自分类Dev

-无法将CSS页面链接到HTML

来自分类Dev

将CSS链接到Taggle.js

来自分类Dev

链接到MS Visual C上的protobuf 3时出错

来自分类Dev

将折扣库与Qt链接时出错

来自分类Dev

将Boost与CMake链接时出错

来自分类Dev

将包含转义字符的文件从主目录复制或链接到 nfs 系统时出现输入/输出错误

来自分类Dev

将git链接到自制程序时出错

来自分类Dev

将Fortran子例程链接到C ++程序时出错

来自分类Dev

将CSS文件链接到html时,如何正确写出本地文件的绝对路径?

来自分类Dev

CSS未链接到Flask WebApp中的HTML

来自分类Dev

无法通过uwsgi将Flask模块链接到Nginx

来自分类Dev

如何使用Flask将表单上载的文件链接到模型?

来自分类Dev

使用 Docker 时将 Celery 连接到 Redis 时出错

来自分类Dev

将PHP连接到MariaDB数据库时出错

来自分类Dev

将mysql连接到Java netbeans时出错

来自分类Dev

尝试将 Hibernate 连接到 Postgres 时出错