फास्टएपीआई में जिंजा टेम्प्लेटिंग के साथ डायनामिक वेब पेज कैसे बनाएं

जिंजा को फास्टएपीआई के साथ एकीकृत करने से आप गतिशील वेब पेज बनाने में सक्षम हो सकते हैं जो पायथन को सहजता से मिश्रित करते हैं HTML के साथ कोड, आपको अपने एप्लिकेशन की प्रस्तुति परत को तर्क से अलग करने की अनुमति देता है परत। गतिशील वेब पेजों के साथ, आप उपयोगकर्ता के अनुभवों को बढ़ाते हुए वैयक्तिकृत और डेटा-संचालित सामग्री उत्पन्न कर सकते हैं।

जिंजा क्या है?

जिंजा पायथन के लिए एक मजबूत, सुविधा संपन्न टेम्पलेट इंजन है जो गतिशील वेब पेज बनाता है। जिंजा टेम्प्लेटिंग इनहेरिटेंस, कंडीशनल स्टेटमेंट्स, लूप्स और विभिन्न सुविधाओं का समर्थन करता है जो गतिशील वेब पेजों के निर्माण को सरल बनाते हैं।

आप एक सुसंगत लेआउट के साथ वेब पेज बनाने के लिए फास्टएपीआई और जिंजा को जोड़ सकते हैं जो वास्तविक समय डेटा प्रदर्शित कर सकता है और उपयोगकर्ता इनपुट को संभाल सकता है। आप भी हासिल कर सकते हैं चिंताओ का विभाजन, जिससे आपका कोड अधिक रखरखाव योग्य और समझने में आसान हो जाता है।

एक फास्टएपीआई प्रोजेक्ट स्थापित करें

आरंभ करने के लिए, आपको एक फास्टएपीआई प्रोजेक्ट स्थापित करना होगा।

1. एक आभासी वातावरण बनाएं और सक्रिय करें इन टर्मिनल कमांड का उपयोग करना:

   पायथन -एम वेनव एनवी
   # यूनिक्स/मैकओएस पर: 
   स्रोत वेनवी/बिन/सक्रिय करें
   # विंडोज़ पर:
   .\venv\स्क्रिप्ट\सक्रिय करें
   

2. फास्टएपीआई और आवश्यक निर्भरताएँ स्थापित करें।

   पिप इंस्टाल "फास्टापी[सभी]"
   

3. एक प्रोजेक्ट निर्देशिका बनाएँ मेरा चिट्ठा.
4. एक पायथन फ़ाइल बनाएँ main.py आपके प्रोजेक्ट निर्देशिका में.
5. निम्नलिखित कोड को इसमें जोड़ें main.py फ़ाइल:

   से fastapi आयात फास्टएपीआई
   नकली_पोस्ट_डीबी = [{
   'शीर्षक': 'पहला ब्लॉग पोस्ट',
   'संतुष्ट': 'पहले ब्लॉग पोस्ट की सामग्री।',
   'लेखक': 'जॉन डो',
   'प्रकाशन तिथि': '2023-06-20',
   'टिप्पणियाँ': [
    {'लेखक': 'ऐलिस', 'संतुष्ट': 'महान पद!'},
    {'लेखक': 'बॉब', 'संतुष्ट': 'पढ़ना दिलचस्प है।'}
    ],
   'दर्जा': 'प्रकाशित'
   },{
   'शीर्षक': 'दूसरा ब्लॉग पोस्ट',
   'संतुष्ट': 'दूसरे ब्लॉग पोस्ट की सामग्री।',
   'लेखक': 'जेन स्मिथ',
   'प्रकाशन तिथि': कोई नहीं,
   'टिप्पणियाँ': [],
   'दर्जा': 'प्रारूप'
   }]
   ऐप = फास्टएपीआई()
   @app.get("/about")
   डीईएफ़के बारे में():
   वापस करना"सरल ब्लॉग के बारे में वह सब कुछ जो आपको जानना आवश्यक है"

   उपरोक्त कोड एकल एंडपॉइंट के साथ एक सरल फास्टएपीआई एप्लिकेशन बनाता है जो संबंधित यूआरएल के माध्यम से पहुंचने पर JSON प्रतिक्रिया देता है। तुम कर सकते हो पायथन डिक्शनरी का उपयोग करें वास्तविक डेटाबेस के स्थान पर इस तरह; यह प्राथमिक लक्ष्य पर ध्यान केंद्रित करते हुए जटिलता को कम करने में मदद करता है।
6. सर्वर चलाएँ.

   यूविकॉर्न मुख्य: ऐप--पुनः लोड करें
   

मिलने जाना http://localhost: 8000/लगभग सर्वर प्रतिक्रिया देखने के लिए अपने ब्राउज़र में।

जिंजा टेम्प्लेटिंग को एकीकृत करना

अपना प्रोजेक्ट सफलतापूर्वक सेट करने के बाद, अब आप इसमें जिंजा टेम्प्लेटिंग जोड़ सकते हैं।

1. में main.py फ़ाइल, निम्नलिखित मॉड्यूल आयात करें:

   से fastapi.templating आयात जिंजा2टेम्प्लेट्स
   से fastapi.staticfiles आयात स्टेटिकफ़ाइलें
   

2. नीचे अनुप्रयोग वेरिएबल, का एक उदाहरण बनाएं जिंजा2टेम्प्लेट्स क्लास करें और उस निर्देशिका को पास करें जिसमें आपके टेम्पलेट होंगे।

   टेम्पलेट्स = Jinja2Templates (निर्देशिका="टेम्पलेट्स")
   

3. के बाद खाके वैरिएबल, कोड की निम्नलिखित पंक्ति जोड़ें:

   ऐप.माउंट("/ स्थिर", स्टेटिकफ़ाइल्स (निर्देशिका ="स्थैतिक"), नाम="स्थैतिक")
   

   उपरोक्त कोड माउंट करता है स्थिर निर्देशिका और फास्टएपीआई को अनुरोध यूआरएल शुरू होने पर निर्देशिका में स्थित किसी भी स्थिर फाइल की सेवा करने का निर्देश देता है /static.
4. में मेरा चिट्ठा निर्देशिका दो निर्देशिकाएँ बनाएँ, खाके HTML फ़ाइलें रखने के लिए और स्थिर जिसमें सभी स्थिर फ़ाइलें होंगी।

इन चरणों को पूरा करने के साथ, आपने जिंजा टेम्प्लेटिंग को अपने प्रोजेक्ट के साथ सफलतापूर्वक एकीकृत कर लिया है।

जिंजा के साथ डायनामिक वेब पेज बनाना

जिंजा गतिशील टेम्पलेट बनाने के लिए सिंटैक्स और सुविधाओं का एक समृद्ध सेट प्रदान करता है।

इस अनुभाग में, आप देखेंगे कि गतिशील वेब पेज बनाने के लिए जिंजा टेम्प्लेटिंग सिंटैक्स का उपयोग कैसे करें।

टेम्पलेट टैग को a के साथ संलग्न करें घुँघराले कोष्ठ और प्रतिशत प्रतीक दोनों तरफ। आप टेम्पलेट में नियंत्रण प्रवाह और तर्क संचालन करने के लिए ऐसे टैग का उपयोग कर सकते हैं। आमतौर पर उपयोग किए जाने वाले कुछ टेम्प्लेट टैग में शामिल हैं:

• स्थिति: यदि स्थिति सत्य है तो कोड का ब्लॉक चलाता है।

  {% अगर स्थिति %}...{% एंडिफ़ %}
  

• कुंडली: एक पुनरावर्तनीय पर पुनरावृत्त होता है और प्रत्येक आइटम के लिए कोड का ब्लॉक चलाता है।

  {% के लिए वस्तु में पुनरावर्तनीय %}...{% अंत के लिए %}
  

• शामिल करना: वर्तमान टेम्पलेट के भीतर एक और टेम्पलेट शामिल है।

  {% शामिल करना 'template_name.html' %}
  

• अवरोध पैदा करना: एक ब्लॉक को परिभाषित करता है जिसे चाइल्ड टेम्प्लेट इनहेरिटेंस का उपयोग करके ओवरराइड कर सकता है।

  {% ब्लॉक ब्लॉक_नाम %}...{% एंडब्लॉक %}
  

• बढ़ाना: चाइल्ड टेम्पलेट को पैरेंट टेम्पलेट को इनहेरिट करने और विस्तारित करने की अनुमति देता है।

  {% विस्तारparent_temp.html %}
  

ये टैग गतिशील डेटा के आधार पर HTML सामग्री उत्पन्न करने और आपके एप्लिकेशन के तर्क को नियंत्रित करने का एक लचीला और अभिव्यंजक तरीका प्रदान करते हैं।

टेम्पलेट वंशानुक्रम

जिंजा टेम्प्लेटिंग टेम्प्लेट इनहेरिटेंस का समर्थन करता है। यह आपको एक सामान्य लेआउट और अनुभागों के साथ एक बेस (पैरेंट) टेम्पलेट को परिभाषित करने देता है जिसे चाइल्ड टेम्पलेट विस्तारित या ओवरराइड कर सकता है। एक चाइल्ड टेम्प्लेट इसका उपयोग कर सकता है बढ़ाना पैरेंट टेम्प्लेट को इनहेरिट करने और विस्तारित करने के लिए टैग।

एक बनाने के आधार.एचटीएमएल फ़ाइल में खाके निम्नलिखित कोड के साथ निर्देशिका।

एचटीएमएल>
<एचटीएमएल>
<सिर>
<शीर्षक>{% ब्लॉक शीर्षक %}सरल ब्लॉग{% एंडब्लॉक %}शीर्षक>
सिर>
<शरीर>
<एच 1>{% ब्लॉक शीर्षक %}सरल ब्लॉग{% एंडब्लॉक %}एच 1>
 {% ब्लॉक सामग्री %}
 {% एंडब्लॉक %}
 {% में "footer.html" % शामिल है
शरीर>
एचटीएमएल>

इस तरह, आपके पास एक पैरेंट टेम्प्लेट है जिसमें आपके सभी टेम्प्लेट के लिए सामान्य कोड होता है, जो चाइल्ड टेम्प्लेट को इनहेरिट करने और आवश्यकतानुसार इसे विस्तारित करने की अनुमति देता है।

में खाके निर्देशिका बनाएं a footer.html निम्नलिखित कोड के साथ फ़ाइल करें।

<FOOTER>
<पी>© 2023 सरल ब्लॉग। सर्वाधिकार सुरक्षित।पी>
<एhref="{{ url_for('about') }}">के बारे मेंए>
FOOTER>

footer.html एक सम्मिलित टेम्पलेट है जिसमें पाद लेख अनुभाग के लिए HTML कोड शामिल है। आप इसका उपयोग करके इसे आधार टेम्पलेट में शामिल करके कई पृष्ठों में पुन: उपयोग कर सकते हैं शामिल करना उपनाम।

में खाके निर्देशिका बनाएं a blog.html निम्नलिखित कोड के साथ फ़ाइल करें।

{% "base.html" को बढ़ाता है %}
{% ब्लॉक शीर्षक %}सरल ब्लॉग - ब्लॉग पेज{% एंडब्लॉक %}
{% ब्लॉक शीर्षक %}सरल ब्लॉग - ब्लॉग पेज{% एंडब्लॉक %}
{% ब्लॉक सामग्री %}
<एच 2>पदों की कुल संख्या: {{पोस्ट|लंबाई }}एच 2>
 {पोस्ट में पोस्ट के लिए%%}
<डिवकक्षा="डाक">
 {% यदि पोस्ट.स्टेटस == 'प्रकाशित' %}
<h3>{{ शीर्षक पोस्ट करें }}h3>
<पी>{{पोस्ट.सामग्री|छंटनी }}पी>
<पी>पर प्रकाशित: {{post.publication_date }}पी>
<एच 4>टिप्पणियाँ:एच 4>
<उल>
 {पोस्ट.टिप्पणियों में टिप्पणी के लिए%%}
<लीकक्षा="टिप्पणी">{{टिप्पणी.लेखक }}-: {{टिप्पणी.सामग्री }}ली>
 {% एंडफॉर %}
उल>
 {% अन्य %}
<पी>यह पोस्ट अभी भी ड्राफ्ट मोड में है.पी>
 {% अगर अंत %}
डिव>
<मानव संसाधन>
 {% एंडफॉर %}
{% एंडब्लॉक %}

यह चाइल्ड टेम्प्लेट इनहेरिट करता है आधार.एचटीएमएल का उपयोग बढ़ाना उपनाम। यह ब्लॉग पेज के लिए अनुकूलित सामग्री प्रदान करने के लिए बेस टेम्पलेट में परिभाषित विशिष्ट ब्लॉकों को ओवरराइड करता है। इसमें पोस्ट और संबंधित टिप्पणियों को प्रदर्शित करने के लिए आवश्यक तर्क और पुनरावृत्ति भी शामिल है।

अभिव्यक्ति

जिंजा अंकगणितीय संचालन, तुलना और तार्किक संचालन सहित अभिव्यक्तियों की एक विस्तृत श्रृंखला का समर्थन करता है। उदाहरण के लिए:

{{2 + 2}} // आउटपुट: 4

परिवर्तनीय प्रतिस्थापन

टेम्प्लेट में वेरिएबल्स को आउटपुट करने के लिए, उन्हें डबल घुंघराले ब्रेसिज़ के भीतर संलग्न करें। उदाहरण के लिए:

{{पोस्ट.शीर्षक}} // आउटपुट: 'पहला ब्लॉग पोस्ट'

फिल्टर

फ़िल्टर किसी वेरिएबल के आउटपुट को संशोधित करते हैं। आप पाइप प्रतीक (|) का उपयोग करके एक वेरिएबल के बाद एक जोड़ सकते हैं। उदाहरण के लिए:

{{पोस्ट|लंबाई}} // आउटपुट: 2

आप अपने टेम्प्लेट में इनलाइन टिप्पणियाँ और मल्टीलाइन टिप्पणियाँ जोड़ सकते हैं। टेम्प्लेट रेंडरिंग के दौरान जिंजा इन टिप्पणियों को अनदेखा कर देगी, इसलिए वे टेम्प्लेट के भीतर स्पष्टीकरण जोड़ने के लिए उपयोगी हैं।

{# #} // इन - लाइन
{% टिप्पणी %}... {% अंत टिप्पणी %} // मल्टीलाइन

यूआरएल

आपको एप्लिकेशन के भीतर अन्य पेजों के लिए सही हाइपरलिंक उत्पन्न करने की अनुमति देने के लिए, जिंजा टेम्पलेट संदर्भ में शामिल है url_for समारोह। उदाहरण के लिए:

<एhref="{{ url_for('about') }}">के बारे मेंए>

उपरोक्त कोड बन जाता है http://localhost: 8000/लगभग. आप यह भी देखेंगे कि इसका उपयोग कैसे करना है url_for बाद में स्थिर फ़ाइल पथ प्राप्त करने के लिए फ़ंक्शन।

ये जिंजा टेम्प्लेटिंग सिंटैक्स के कुछ मूलभूत पहलू हैं। टेम्प्लेट निर्माण और अनुकूलन को कुशल और लचीला बनाने के लिए जिंजा टेम्प्लेटिंग कई और सुविधाएँ और कार्यक्षमताएँ प्रदान करता है, जैसे मैक्रोज़, टेम्प्लेट संदर्भ और बहुत कुछ।

टेम्प्लेट में डेटा पास करना

अब जब आपके पास अपने टेम्प्लेट तैयार हैं तो आपको रेंडरिंग के लिए अपने फास्टएपीआई एंडपॉइंट से डेटा को टेम्प्लेट में पास करना होगा।

निम्नलिखित कोड को इसमें जोड़ें main.py फ़ाइल:

से fastapi आयात फास्टएपीआई, अनुरोध
से fastapi.प्रतिक्रियाएँ आयात HTMLप्रतिक्रिया
@app.get("/", प्रतिक्रिया_क्लास=HTMLResponse)
asyncडीईएफ़read_posts(अनुरोध: अनुरोध):
वापस करना टेम्पलेट्स. टेम्पलेटप्रतिक्रिया("ब्लॉग.एचटीएमएल", {"अनुरोध": अनुरोध, 
"पोस्ट":fake_posts_db})

कोड एक फास्टएपीआई एंडपॉइंट को परिभाषित करता है जो रूट यूआरएल ("/") पर GET अनुरोध को संभालता है और एक लौटाता है HTMLप्रतिक्रिया से उत्पन्न blog.html टेम्पलेट. यह एक संदर्भ शब्दकोश से गुजरता है, जिसमें वर्तमान होता है अनुरोध वस्तु और नकली_पोस्ट_डीबी, टेम्पलेट में। इस तरह जिंजा सटीक और गतिशील डेटा प्रस्तुत कर सकता है।

मिलने जाना http://localhost: 8000/ अपने ब्राउज़र पर और आपको कुछ इस तरह देखना चाहिए:

आपने रेंडरिंग के लिए टेम्प्लेट में डेटा सफलतापूर्वक पास कर दिया है।

स्थैतिक फ़ाइलें परोसना

डायनामिक टेम्प्लेट प्रस्तुत करने के अलावा, फास्टएपीआई सीएसएस फाइलें, जावास्क्रिप्ट फाइलें और छवियों जैसी स्थिर फाइलों की सेवा के लिए कार्यक्षमता भी प्रदान करता है।

आप पृष्ठ के स्वरूप और अनुभव को बेहतर बनाने के लिए सीएसएस का उपयोग करेंगे।

में स्थिर निर्देशिका, एक बनाएँ शैलियाँ.सीएसएस निम्नलिखित कोड के साथ फ़ाइल करें।

शरीर {
फुहारा परिवार: एरियल, सान्स सेरिफ़;
अंतर: 0;
गद्दी: 20पिक्सल;
पृष्ठभूमि का रंग: #f5f5f5;
}
एच 1, एच 2, h3, एच 4 {
रंग: #333;
}
।डाक {
पृष्ठभूमि का रंग: #fff;
गद्दी: 20पिक्सल;
मार्जिन-तल: 20पिक्सल;
बॉर्डर-त्रिज्या: 5पिक्सल;
डब्बे की छाया: 0 2पिक्सल 4पिक्सलआरजीबीए(0, 0, 0, 0.1);
}
।डाकh3 {
मार्जिन टॉप: 0;
}
।डाकपी {
मार्जिन-तल: 10पिक्सल;
}
।डाकउल {
सूची-शैली-प्रकार: कोई नहीं;
गद्दी छूट गई: 0;
}
।टिप्पणी {
मार्जिन-तल: 10पिक्सल;
गद्दी: 10पिक्सल;
पृष्ठभूमि का रंग: #f9f9f9;
बॉर्डर-त्रिज्या: 5पिक्सल;
}
FOOTER {
पृष्ठभूमि का रंग: #f2f2f2;
गद्दी: 10पिक्सल;
पाठ संरेखित: केंद्र;
}

संशोधित करें सिर का तत्व आधार.एचटीएमएल टेम्पलेट इस प्रकार है:

<सिर>
<शीर्षक>{% ब्लॉक शीर्षक %}सरल ब्लॉग{% एंडब्लॉक %}शीर्षक>
<जोड़नाhref="{{ url_for('static', path='/styles.css') }}"रिले="शैली पत्रक">
सिर>

url_for() फ़ंक्शन इसके लिए एक URL (पथ) उत्पन्न करता है शैलियाँ.सीएसएस (/static/styles.css) फ़ाइल में स्थिर निर्देशिका जिसे तब फास्टएपीआई द्वारा स्वचालित रूप से परोसा जाता है।

मिलने जाना http://localhost: 8000/ आपके ब्राउज़र पर.

छवि और जावास्क्रिप्ट फ़ाइलों को प्रस्तुत करने के लिए समान प्रक्रियाएँ लागू होती हैं।

सर्वोत्तम प्रथाओं का पालन करना याद रखें

फास्टएपीआई में जिंजा टेम्प्लेटिंग के साथ काम करते समय, एक सुव्यवस्थित और कुशल कोड आधार सुनिश्चित करने के लिए कुछ सर्वोत्तम प्रथाओं का पालन करना महत्वपूर्ण है।

• टेम्प्लेट को एक समर्पित निर्देशिका में व्यवस्थित करें और संबंधित टेम्प्लेट के लिए उपनिर्देशिकाओं का उपयोग करने पर विचार करें।
• पुन: प्रयोज्य आधार टेम्प्लेट बनाने और उन्हें विशिष्ट सामग्री के लिए विस्तारित करने के लिए टेम्प्लेट इनहेरिटेंस का उपयोग करें।
• पेलोड को हल्का रखते हुए, टेम्प्लेट में पास करने के लिए डेटा का सावधानीपूर्वक चयन करें, और आमतौर पर उपयोग किए जाने वाले डेटा के लिए संदर्भ प्रोसेसर या मिडलवेयर का उपयोग करें।
• बेहतर कोड पुन: प्रयोज्यता और पठनीयता के लिए मैक्रोज़, फ़िल्टर और नियंत्रण संरचनाओं जैसी जिंजा टेम्प्लेटिंग सुविधाओं का उपयोग करें।
• स्थिर टेम्पलेट्स के लिए कैशिंग रणनीतियों को लागू करके, HTTP कैशिंग हेडर का उपयोग करके और प्रदर्शन बाधाओं के लिए प्रोफाइलिंग करके प्रदर्शन को अनुकूलित करें।

इन सर्वोत्तम प्रथाओं का पालन करके, आप एक संरचित प्रोजेक्ट को बनाए रख सकते हैं, रेंडरिंग प्रदर्शन को अनुकूलित कर सकते हैं, और अपने फास्टएपीआई अनुप्रयोगों में जिंजा टेम्प्लेटिंग की सुविधाओं का कुशलतापूर्वक लाभ उठा सकते हैं।

रेस्टएपीआई के निर्माण के लिए फास्टएपीआई का उपयोग करना

ऐसे एप्लिकेशन बनाने के अलावा जिनके लिए रेंडरिंग टेम्प्लेट की आवश्यकता होती है। फास्टएपीआई अपने उच्च प्रदर्शन, उपयोग में आसान सिंटैक्स, स्वचालित दस्तावेज़ निर्माण और स्केलेबिलिटी के कारण रेस्टएपीआई के निर्माण में उत्कृष्टता प्राप्त करता है। ये सुविधाएं फास्टएपीआई को मजबूत वेब एपीआई के कुशल विकास के लिए आदर्श बनाती हैं।