एक बोस्प्ले टेम्पलेट में जावास्क्रिप्ट या सीएसएस फ़ाइल कैसे लोड करें?

मैं बोतलपी के साथ एक HTML टेम्पलेट वापस करने की कोशिश कर रहा हूं। और यह ठीक काम करता है। लेकिन अगर मैं अपनी tpl-file में इस तरह एक जावास्क्रिप्ट फ़ाइल डालता हूं:एक बोस्प्ले टेम्पलेट में जावास्क्रिप्ट या सीएसएस फ़ाइल कैसे लोड करें?

<script type="text/javascript" src="js/main.js" charset="utf-8"></script>

मुझे 404 त्रुटि मिलती है। (संसाधन लोड करने में विफल: सर्वर ने 404 (नहीं मिला) की स्थिति के साथ जवाब दिया)

क्या कोई इस समस्या को ठीक करने के बारे में जानता है?

यहाँ मेरी स्क्रिप्ट फ़ाइल है:

from bottle import route, run, view 

@route('/') 
@view('index') 
def index(): 
    return dict() 
run(host='localhost', port=8080)

और वह टेम्पलेट फ़ाइल, "./views" सबफ़ोल्डर में स्थित है।

<!DOCTYPE html> 
<html lang="de"> 
    <head> 
     <meta charset="utf-8" /> 
     <script type="text/javascript" src="js/main.js" charset="utf-8"></script> 
    </head> 
    <body> 
    </body> 
</html>

शायद यह विकास सर्वर जहां यह मेरी js फ़ाइल के लिए लग रहा है से "rootPath/js/main.js" क्या है?

फ़ाइलों की संरचना है:

app.py 
-js 
main.js 
-views 
index.tpl

धन्यवाद।

स्रोत

2011-08-08 eltorrero

आप डिबगिंग के कुछ प्रकार की कोशिश की, अपने रूट पथ और अपने js फ़ोल्डर सामग्री को प्रिंट की तरह है? –

ठीक है, सबसे पहले, आपको वास्तव में main.js पर सेवा देने के लिए अपने देव सर्वर की आवश्यकता है, अन्यथा यह ब्राउज़र के लिए उपलब्ध नहीं होगा।

यह, छोटे वेब एप्लिकेशन में static निर्देशिका के अंतर्गत सभी .js और .css फ़ाइलें डाल करने के लिए प्रथागत है, तो अपने लेआउट इस तरह दिखना चाहिए:

app.py 
- static/ 
    main.js 
- views/ 
    index.tpl

किसी भी तरह इस सटीक नामकरण और लेआउट के लिए आवश्यक है, केवल अक्सर उपयोग किया गया।

इसके बाद, आप स्थिर फ़ाइलों के लिए एक हैंडलर की आपूर्ति करना चाहिए:

from bottle import static_file 

# ... 

@route('/static/:path#.+#', name='static') 
def static(path): 
    return static_file(path, root='static')

यह actuall ब्राउज़र को static/ के तहत अपने फ़ाइलों में काम करेगा।

अब, आखिरी चीज़ पर। आप अपने जावास्क्रिप्ट निर्दिष्ट है:

<script type="text/javascript" src="js/main.js" charset="utf-8"></script>

.js के लिए पथ इसका मतलब है कि वर्तमान पृष्ठ से रिश्तेदार है। आपके विकास सर्वर पर, इंडेक्स पेज (/) /js/main.js में देखेगा, और दूसरा पृष्ठ (कहें, /post/12) /post/12/js/main.js में इसकी तलाश करेगा, और निश्चित रूप से असफल रहेगा।

इसके बजाय, आपको स्थिर फ़ाइलों का उचित संदर्भ देने के लिए get_url फ़ंक्शन का उपयोग करने की आवश्यकता है।आपका हैंडलर इस तरह दिखना चाहिए:

from Bottle import get_url 

# ... 

@route('/') 
@view('index') 
def index(): 
    return { 'get_url': get_url }

और index.tpl में, .js संदर्भित किया जाना चाहिए के रूप में:

<script type="text/javascript" src="{{ get_url('static', path='main.js') }}" charset="utf-8"></script>

get_urlname='static' के साथ एक हैंडलर पाता है, और यह करने के लिए उचित पथ गणना करता है। देव सर्वर के लिए, यह हमेशा /static/ होगा। आप शायद भी कड़ी मेहनत से कोड यह टेम्पलेट में है, लेकिन मैं दो कारणों से इसकी सलाह नहीं देते कर सकते हैं:

आप कहीं भी, लेकिन उत्पादन में जड़ के तहत अपने एप्लिकेशन माउंट करने में सक्षम नहीं होगा; यानी, जब आप इसे पॉर्डक्शन सर्वर पर अपलोड करते हैं, तो इसे http://example.com/ (रूट) के तहत रखा जा सकता है, लेकिन http://example.com/myapp/ के तहत नहीं।
यदि आप /static/ डीआईआर स्थान बदलते हैं, तो आपको इसे अपने सभी टेम्पलेट्स पर खोजना होगा और इसे प्रत्येक टेम्पलेट में संशोधित करना होगा।

स्रोत

2011-08-08 10:15:03 Helgi

क्या आप इस प्रश्न को देख सकते हैं http://stackoverflow.com/questions/9505256/static-files-in-bottle-py – Anuj

@Aun: मैंने आपके प्रश्न का उत्तर दिया है। – Helgi

उत्तर देने के लिए धन्यवाद .. – Anuj

मुझे लगता है कि आप गलत स्थान पर फ़ाइल main.js डाल रहे हैं।

ध्यान दें कि यह फ़ाइल पथ अनुरोधित यूआरएल के सापेक्ष होना चाहिए, न कि आपके टेम्पलेट के पथ के सापेक्ष। तो इसे template/js/main.js जैसे फ़ोल्डर में डालना काम नहीं करेगा।

स्रोत

2011-08-08 06:47:19 Paulpro

अधिक जानकारी के लिए संपादित प्रश्न देखें, कृपया। – eltorrero

यहाँ बोतल वेब परियोजना में सीएसएस/जे एस की तरह स्थिर फ़ाइलें जोड़ने का काम कर रहे दृष्टिकोण है। मैं बूटस्ट्रैप और पायथन 3.6 का उपयोग कर रहा हूँ।

परियोजना संरचना

project 
│ app.py 
│ bottle.py 
│ 
├───static 
│ └───asset 
│  ├───css 
│  │  bootstrap-theme.css 
│  │  bootstrap-theme.css.map 
│  │  bootstrap-theme.min.css 
│  │  bootstrap-theme.min.css.map 
│  │  bootstrap.css 
│  │  bootstrap.css.map 
│  │  bootstrap.min.css 
│  │  bootstrap.min.css.map 
│  │  custom.css 
│  │ 
│  ├───fonts 
│  │  glyphicons-halflings-regular.eot 
│  │  glyphicons-halflings-regular.svg 
│  │  glyphicons-halflings-regular.ttf 
│  │  glyphicons-halflings-regular.woff 
│  │  glyphicons-halflings-regular.woff2 
│  │ 
│  └───js 
│    bootstrap.js 
│    bootstrap.min.js 
│    jquery.min.js 
│    npm.js 
│ 
└───views 
     index.tpl

app.py

from bottle import Bottle, run, \ 
    template, debug, static_file 

import os, sys 

dirname = os.path.dirname(sys.argv[0]) 

app = Bottle() 
debug(True) 

@app.route('/static/<filename:re:.*\.css>') 
def send_css(filename): 
    return static_file(filename, root=dirname+'/static/asset/css') 

@app.route('/static/<filename:re:.*\.js>') 
def send_js(filename): 
    return static_file(filename, root=dirname+'/static/asset/js') 

@app.route('/') 
def index(): 
    data = {"developer_name":"Ahmedur Rahman Shovon", 
      "developer_organization":"Datamate Web Solutions"} 
    return template('index', data = data) 

run(app, host='localhost', port = 8080)

index.tpl

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content="Bottle web project template"> 
    <meta name="author" content="datamate"> 
    <link rel="icon" href="/static/favicon.ico">   
    <title>Project</title> 
    <link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css"> 
    <script type="text/javascript" src="/static/jquery.min.js"></script> 
    <script type="text/javascript" src="/static/bootstrap.min.js"></script> 
</head> 
<body> 
    <!-- Static navbar --> 
    <nav class="navbar navbar-default navbar-static-top"> 
     <div class="container"> 
      <div class="row"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Project</a> 
       </div> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="../navbar/">Home</a></li> 
         <li><a href="./">Github</a></li> 
         <li><a href="../navbar-fixed-top/">Stackoverflow</a></li> 
        </ul> 
       </div><!--/.nav-collapse --> 
      </div> 
     </div> 
    </nav> 
    <div class="container"> 
     <div class="row"> 
      <div class="jumbotron"> 
      <h2>Welcome from {{data["developer_name"]}}</h2> 
       <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p> 
      </div> 
     </div> 
     <!--./row--> 
     <div class="row"> 
      <hr> 
      <footer> 
       <p>&copy; 2017 {{data["developer_organization"]}}.</p> 
      </footer>   
     </div> 
    </div> 
    <!-- /container --> 
</body> 
</html>

आउटपुट

स्रोत

2017-08-18 16:44:02 arsho

एक बोस्प्ले टेम्पलेट में जावास्क्रिप्ट या सीएसएस फ़ाइल कैसे लोड करें?

उत्तर

संबंधित मुद्दे