CSS를 플라스크에 연결할 때 오류가 발생했습니다.

단일 페이지 응용 프로그램에 작성된 CSS ive를 연결하려고하는데 CMDER를 통해 실행하면 404 오류가 발생합니다.CSS를 플라스크에 연결할 때 오류가 발생했습니다.

내 앱

webapp.py

정적 폴더

--index.html

--css --- theme.css

- 이미지 --- 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()

출처

2016-11-28 Dylan

'href'를''css/theme.css' '로 지정하면 작동 할 수도 있습니다. –

문제는 당신이 index.html을 보내는 것을 렌더링 된 템플릿이 아닌 정적 파일입니다.

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

을 그리고 그것은 작동합니다 첫 번째는이 index.html 다음

, , 폴더 templates에 폴더 static에서 당신이

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

에 webapp.py에서 변경해야합니다 이동합니다.

출처

2016-11-28 10:34:28 noteness

대단히 감사합니다. – Dylan

@Dylan 그런 다음이 답변을 허용 된대로 선택하십시오 :) – noteness

CSS를 플라스크에 연결할 때 오류가 발생했습니다.

답변

관련 문제