Flask
स्थैतिक फ़ाइलें
खोज…
स्टेटिक फाइल्स का उपयोग करना
वेब एप्लिकेशन को अक्सर सीएसएस या जावास्क्रिप्ट फ़ाइलों की तरह स्थिर फ़ाइलों की आवश्यकता होती है। फ्लास्क एप्लिकेशन में स्थिर फ़ाइलों का उपयोग करने के लिए, अपने पैकेज में या अपने मॉड्यूल के बगल में static नामक एक फ़ोल्डर बनाएं और यह एप्लिकेशन पर /static पर उपलब्ध होगा।
टेम्पलेट्स का उपयोग करने के लिए एक उदाहरण परियोजना संरचना इस प्रकार है:
MyApplication/
/static/
/style.css
/script.js
/templates/
/index.html
/app.py
app.py टेम्पलेट प्रतिपादन के साथ फ्लास्क का एक मूल उदाहरण है।
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
टेम्पलेट index.html में static CSS और JavaScript फ़ाइल का उपयोग करने के लिए, हमें विशेष 'स्थिर' समापन बिंदु नाम का उपयोग करने की आवश्यकता है:
{{url_for('static', filename = 'style.css')}}
इसलिए, index.html में ये शामिल हो सकते हैं:
<html>
<head>
<title>Static File</title>
<link href="{{url_for('static', filename = 'style.css')}}" rel="stylesheet">
<script src="{{url_for('static', filename = 'script.js')}}"></script>
</head>
<body>
<h3>Hello World!</h3>
</body>
</html>
App.py चलाने के बाद हम http: // localhost: 5000 / में वेबपेज देखेंगे।
उत्पादन में स्थिर फाइलें (फ्रंटएंड वेबसर्वर द्वारा सेवा)
फ्लास्क का अंतर्निहित वेबसर्वर स्थैतिक संपत्ति की सेवा करने में सक्षम है, और यह विकास के लिए ठीक काम करता है। हालाँकि, ऐसे प्रोडक्शंस परिनियोजन के लिए जो UWSGI या Gunicorn जैसी किसी चीज़ का उपयोग फ्लास्क एप्लिकेशन की सेवा के लिए कर रहे हैं, स्थैतिक फ़ाइलों को परोसने का कार्य एक है जिसे आम तौर पर फ्रंटेंड वेबसर्वर (Nginx, Apache, आदि) से लोड किया जाता है। यह छोटे ऐप के साथ एक छोटा / आसान काम है, खासकर जब सभी स्थिर संपत्ति एक फ़ोल्डर में होती हैं; हालाँकि, बड़े ऐप के लिए, और / या जो फ्लास्क प्लगइन (ओं) का उपयोग कर रहे हैं जो स्थैतिक संपत्ति प्रदान करते हैं, फिर उन सभी फाइलों के स्थानों को याद रखना और मैन्युअल रूप से उन्हें एक निर्देशिका में कॉपी / संग्रह करना मुश्किल हो सकता है। यह दस्तावेज़ दिखाता है कि उस कार्य को सरल बनाने के लिए फ्लास्क-कलेक्ट प्लगइन का उपयोग कैसे करें।
ध्यान दें कि इस प्रलेखन का ध्यान स्थिर परिसंपत्तियों के संग्रह पर है। उस कार्यक्षमता को समझाने के लिए, यह उदाहरण फ्लास्क-बूटस्ट्रैप प्लगइन का उपयोग करता है, जो कि स्थिर संपत्ति प्रदान करता है। यह फ्लास्क-स्क्रिप्ट प्लगइन का भी उपयोग करता है, जिसका उपयोग कमांड-लाइन कार्यों को बनाने की प्रक्रिया को सरल बनाने के लिए किया जाता है। इन दस्तावेज़ों में से कोई भी प्लगइन्स महत्वपूर्ण नहीं हैं, वे कार्यक्षमता का प्रदर्शन करने के लिए यहां उपयोग कर रहे हैं। यदि आप फ्लास्क-स्क्रिप्ट का उपयोग नहीं करना चुनते हैं, तो आप collect कमांड को कॉल करने के वैकल्पिक तरीकों के लिए फ्लास्क-कलेक्ट डॉक्स की समीक्षा करना चाहेंगे।
यह भी ध्यान दें कि इन स्थैतिक परिसंपत्तियों की सेवा के लिए आपके सामने वाले वेबसर्वर का कॉन्फ़िगरेशन इस दस्तावेज़ के दायरे से बाहर है, आप अधिक जानकारी के लिए Nginx और Apache का उपयोग करके कुछ उदाहरणों को देखना चाहेंगे। यह कहने के लिए पर्याप्त है कि आप उन URL को अलिज़ करेंगे जो केंद्रीय / निर्देशिका के लिए "/ स्थिर" से शुरू होते हैं जो फ्लास्क-कलेक्ट आपके लिए इस उदाहरण में बनाएंगे।
एप्लिकेशन को निम्नानुसार संरचित किया गया है:
/manage.py - The app management script, used to run the app, and to collect static assets
/app/ - this folder contains the files that are specific to our app
| - __init__.py - Contains the create_app function
| - static/ - this folder contains the static files for our app.
| css/styles.css - custom styles for our app (we will leave this file empty)
| js/main.js - custom js for our app (we will leave this file empty)
| - templates/index.html - a simple page that extends the Flask-Bootstrap template
सबसे पहले, अपना आभासी वातावरण बनाएं और आवश्यक पैकेज स्थापित करें: (आपका-वर्चुनेल) $ पाइप स्थापित फ्लास्क फ्लास्क-स्क्रिप्ट फ्लास्क-बूटस्ट्रैप फ्लास्क-कलेक्ट
ऊपर वर्णित फ़ाइल संरचना स्थापित करें:
$ टच मैनेजमेन्ट; mkdir -p ऐप / {स्टेटिक / {css, js}, टेम्प्लेट}; स्पर्श ऐप / { init .py, स्थिर / {css / styles.css, js / main.js}}
के लिए सामग्री की स्थापना
manage.py,app/__init__.py, औरapp/templates/index.htmlफ़ाइलें:
# manage.py
#!/usr/bin/env python
import os
from flask_script import Manager, Server
from flask import current_app
from flask_collect import Collect
from app import create_app
class Config(object):
# CRITICAL CONFIG VALUE: This tells Flask-Collect where to put our static files!
# Standard practice is to use a folder named "static" that resides in the top-level of the project directory.
# You are not bound to this location, however; you may use basically any directory that you wish.
COLLECT_STATIC_ROOT = os.path.dirname(__file__) + '/static'
COLLECT_STORAGE = 'flask_collect.storage.file'
app = create_app(Config)
manager = Manager(app)
manager.add_command('runserver', Server(host='127.0.0.1', port=5000))
collect = Collect()
collect.init_app(app)
@manager.command
def collect():
"""Collect static from blueprints. Workaround for issue: https://github.com/klen/Flask-Collect/issues/22"""
return current_app.extensions['collect'].collect()
if __name__ == "__main__":
manager.run()
# app/__init__.py
from flask import Flask, render_template
from flask_collect import Collect
from flask_bootstrap import Bootstrap
def create_app(config):
app = Flask(__name__)
app.config.from_object(config)
Bootstrap(app)
Collect(app)
@app.route('/')
def home():
return render_template('index.html')
return app
# app/templates/index.html
{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}
{% block navbar %}
<div class="navbar navbar-fixed-top">
<!-- ... -->
</div>
{% endblock %}
{% block content %}
<h1>Hello, Bootstrap</h1>
{% endblock %}
- उन फ़ाइलों के साथ, अब आप ऐप चलाने के लिए प्रबंधन स्क्रिप्ट का उपयोग कर सकते हैं:
$ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.
- अब, पहली बार अपनी स्थैतिक संपत्ति इकट्ठा करने के लिए। ऐसा करने से पहले, यह फिर से ध्यान देने योग्य है कि आपके ऐप के शीर्ष-स्तर में एक
static/फ़ोल्डर नहीं होना चाहिए; यह वह जगह है जहाँ फ्लास्क-कलेक्ट उन सभी स्टैटिक फ़ाइलों को रखने जा रहा है, जो आपके ऐप से एकत्रित हो रही हैं और आपके द्वारा उपयोग किए जा रहे विभिन्न प्लगइन्स। यदि आपके पास आपके ऐप के शीर्ष स्तर में एकstatic/फ़ोल्डर है, तो आपको इसे आगे बढ़ने से पहले पूरी तरह से हटा देना चाहिए, क्योंकि क्लीन स्लेट से शुरू करना फ्लास्क-कलेक्ट के साक्षी / समझने का एक महत्वपूर्ण हिस्सा है। ध्यान दें कि यह निर्देश दिन-प्रतिदिन के उपयोग के लिए लागू नहीं है, यह केवल इस तथ्य को स्पष्ट करने के लिए है कि फ्लास्क-कलेक्ट आपके लिए यह निर्देशिका बनाने जा रहा है, और फिर यह वहां फाइलों का एक गुच्छा रखने जा रहा है।
उस कहा के साथ, आप अपनी स्थैतिक संपत्ति इकट्ठा करने के लिए निम्नलिखित कमांड चला सकते हैं:
$ ./manage.py collect
ऐसा करने के बाद, आपको यह देखना चाहिए कि फ्लास्क-कलेक्ट ने यह शीर्ष-स्तरीय static/ फ़ोल्डर बनाया है, और इसमें निम्नलिखित फाइलें हैं:
$ find ./static -type f # execute this from the top-level directory of your app, same dir that contains the manage.py script
static/bootstrap/css/bootstrap-theme.css
static/bootstrap/css/bootstrap-theme.css.map
static/bootstrap/css/bootstrap-theme.min.css
static/bootstrap/css/bootstrap.css
static/bootstrap/css/bootstrap.css.map
static/bootstrap/css/bootstrap.min.css
static/bootstrap/fonts/glyphicons-halflings-regular.eot
static/bootstrap/fonts/glyphicons-halflings-regular.svg
static/bootstrap/fonts/glyphicons-halflings-regular.ttf
static/bootstrap/fonts/glyphicons-halflings-regular.woff
static/bootstrap/fonts/glyphicons-halflings-regular.woff2
static/bootstrap/jquery.js
static/bootstrap/jquery.min.js
static/bootstrap/jquery.min.map
static/bootstrap/js/bootstrap.js
static/bootstrap/js/bootstrap.min.js
static/bootstrap/js/npm.js
static/css/styles.css
static/js/main.js
और बस हो गया: का उपयोग collect जब भी आप अपने ऐप के सीएसएस या जावास्क्रिप्ट, या जब आप कि (इस उदाहरण में कुप्पी के बूटस्ट्रैप) की तरह स्थिर संपत्ति प्रदान करता है एक फ्लास्क प्लगइन नवीनीकृत किया है को संपादित करने के आदेश।