मेन्यू

फ्लास्क टेम्पलेट, प्रपत्र, दृश्य और उदाहरणों के साथ पुनर्निर्देशित

  • मुख्य
  • अन्य
  • फ्लास्क टेम्पलेट, प्रपत्र, दृश्य और उदाहरणों के साथ पुनर्निर्देशित

flask template form

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

यह ट्यूटोरियल बताता है कि फ्लास्क टेम्प्लेट, फॉर्म, व्यू, रिस्पांस और रिडायरेक्ट व्यावहारिक उदाहरण क्या हैं:

सामान्य तौर पर, विभिन्न डेटा के साथ पाठ के एक हिस्से का पुन: उपयोग करने के लिए, प्रोग्रामिंग में टेंपलेटिंग का उपयोग किया जाता है। वेब विकास के बारे में, डिजाइनर डेटा को एक ऐसे रूप में प्रदर्शित करने के लिए टेम्पलेट्स का उपयोग करते हैं जो मानव पाठकों के लिए पठनीय और आकर्षक है।

एक टेम्पलेट डिजाइन में आम तौर पर मानव बातचीत द्वारा उत्पन्न जटिलताओं के कारण एक भाषा का उपयोग शामिल होता है।

=> फ्लास्क शुरुआती गाइड यहाँ पर एक नज़र रखना

फ्लास्क टेम्प्लेट्स, व्यूज़ और फॉर्म्स

आप क्या सीखेंगे:

परिचय

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

ब्राउज़र में पेज रेंडर करने से पहले रनटाइम के दौरान वेरिएबल्स और एक्सप्रेशंस को वैल्यूज़ से बदल दिया जाता है। जिन्जा टैग तर्क लिखने में मदद करते हैं, और फ्लास्क टेम्पलेट में बयानों को नियंत्रित करते हैं।

फ्लास्क व्यू

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

हमारे पिछले ट्यूटोरियल में, हमने फ्लास्क-ऐपबिल्डर के बेस व्यू वर्ग को उप-वर्ग करके एक दृश्य तैयार किया। इस ट्यूटोरियल के बाद के भाग में, हम अपने अंतिम उदाहरण और वर्तमान तरीकों का विस्तार करेंगे, जिसमें दृश्य को अनुकूलित किया जा सकता है।

फ्लास्क टेम्पलेट

आइए अपना पहला खाका लिखें और लिखें। टेम्प्लेट निर्देशिका के अंतर्गत hello.html नामक एक फ़ाइल बनाएँ।

उस फ़ाइल में निम्न कोड लिखें और इसे सहेजें।

Hello World!, from Software Testing Help.

{% for item in greetings %} {% if 'Morning' in item %}

{{item}}

{% else %}

{{item}}

{% endif %} {% endfor %}

लूप के लिए टेम्प्लेट

उपरोक्त फ्लास्क टेम्पलेट में, हमने सूची के आइटम पर पुनरावृति करने के लिए लूप के लिए उपयोग किया है। हमारे नियंत्रक या हैंडलर में, हमने टेम्पलेट को शुभकामनाओं के मूल्यों के साथ एक सूची दी। टेम्पलेट के अंदर, हम {{आइटम}} सिंटैक्स का उपयोग करके प्रत्येक आइटम तक पहुंचते हैं।

टेम्पलेट अगर ब्लॉक

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

अब फ्लास्क फॉर्म की अवधारणाओं के बारे में अधिक जानने के लिए आगे कदम रखें।

फ्लास्क रूपों

टेम्प्लेटिंग का सबसे महत्वपूर्ण पहलू उपयोगकर्ताओं से इनपुट लेना और उस इनपुट के आधार पर बैकएंड लॉजिक लिखना है। आइये हम एक फॉर्म बनाते हैं।

हम अपने फॉर्म को रेंडर करने के लिए फ्लास्क-ऐप्पलिडर सिंपलफार्म का उपयोग करते हैं। हालाँकि, पहले एक फ़ॉर्म बनाएँ। एक फॉर्म के निर्माण के अलावा, हमें एक व्यवस्थापक उपयोगकर्ता बनाने के लिए फ्लास्क फैब क्रिएट-एडमिन कमांड का उपयोग करना होगा।

इसलिए, विकास सर्वर को शुरू करने से पहले कमांड का उपयोग करें ताकि बाद में बनाए गए विचारों और रूपों को लॉग-इन उपयोगकर्ता के साथ मान्य किया जा सके। हम व्यवस्थापक उपयोगकर्ता के साथ लॉग इन करते हैं और यह पुष्टि करते हैं कि बनाए गए दृश्य मेनू के नीचे दिखाई दे रहे हैं जैसा कि स्क्रीनशॉट में दिखाया गया है।

व्यवस्थापक बनाएँ

व्यवस्थापक उपयोगकर्ता बनाने के लिए नीचे दिए गए आदेश का उपयोग करें।

फ्लास्क फैब क्रिएट-एडमिन

व्यवस्थापक क्रेडेंशियल के साथ लॉगिन करें

  • Http: // localhost: 8080 पर नेविगेट करने के बाद लॉगिन पर क्लिक करें।
व्यवस्थापक के रूप में साइन इन करें
व्यवस्थापक के रूप में साइन इन करें
  • पिछले अनुभाग में बनाए गए व्यवस्थापक क्रेडेंशियल्स के साथ साइन इन करें।
लॉगिन पर क्लिक करें
साइन इन पर क्लिक करें
  • अपने विचारों तक पहुँचने के लिए My Forms श्रेणी पर क्लिक करें।
मेनू पर क्लिक करें
मेनू पर क्लिक करें

ध्यान दें: आप नेवबार में दिखाए गए डिफ़ॉल्ट मेनू में विचारों को जोड़ने के बाद ही अंतिम चरण का प्रदर्शन कर पाएंगे।

चलिए आगे बढ़ते हैं और कुछ फॉर्म-आधारित विचार बनाते हैं।

ऐप डायरेक्टरी के तहत एक फॉर्महोम नामक फाइल बनाएं और उसमें निम्न कोड लिखें।

from wtforms import Form, StringField from wtforms.validators import DataRequired from flask_appbuilder.fieldwidgets import BS3TextFieldWidget from flask_appbuilder.forms import DynamicForm class GreetingsForm(DynamicForm): greeting1 = StringField(('Morning'), description = ('Your morning Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting2 = StringField(('Afternoon'), description = ('Your Afternoon Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting3 = StringField(('Evening'), description = ('Your Evening Greeting'), widget = BS3TextFieldWidget()) greeting4 = StringField(('Night'), description = ('Your Night Greeting'), widget = BS3TextFieldWidget())

हमने फ्लास्क-एपलिडर से डायनेमिकफॉर्म पर आधारित एक फॉर्म बनाया है। चार पाठ क्षेत्र हैं। हम अपने अभिवादन का उदाहरण देते हैं। चार क्षेत्रों में से, दो अनिवार्य हैं, और दो वैकल्पिक हैं क्योंकि, पहले दो अभिवादन के लिए, हमने सत्यापनकर्ताओं के लिए मूल्यों का उल्लेख किया है।

अब इस फॉर्म के लिए एक दृश्य बनाते हैं। कोड के इन निम्नलिखित पंक्तियों को फाइल व्यूहोम में लिखें।

from flask import render_template, flash from flask_appbuilder import SimpleFormView from app.forms import GreetingsForm class GreetingsView(SimpleFormView): form = GreetingsForm form_title = 'This is a Greetings form' message = 'Your Greetings are submitted' def form_get(self, form): form.greeting1.data = 'Your Morning Greeting' form.greeting2.data = 'Your Afternoon Greeting' form.greeting3.data = 'Your Evening Greeting' form.greeting4.data = 'Your Night Greeting' def form_post(self, form): flash(self.message, 'info') greetings = ( form.greeting1.data, form.greeting2.data, form.greeting3.data, form.greeting4.data, ) session('greetings')=greetings return redirect(url_for('HelloWorld.hello_greetings2'))

ऊपर दिए गए हमारे विचार में, हमारे पास फ़ॉर्म के क्षेत्र में डिफ़ॉल्ट मानों को पॉप्युलेट करने के लिए form_get और form_post नामक दो विधियाँ हैं और क्रमशः ब्राउज़र से फ़ॉर्म सबमिट करने के बाद दर्ज किए गए मानों को पढ़ना।

नीचे दी गई छवि में दिखाए गए अनुसार ग्रीटिंग्स व्यू फॉर्म प्रदर्शित करता है।

अभिवादन प्रपत्र

हम फ़ील्ड मानों को form_post में संग्रहीत करने के लिए एक फ्लास्क सत्र ऑब्जेक्ट का उपयोग भी करते हैं ताकि हम उसी नए दृश्य में उसी तक पहुंच सकें जो हम लिखने जा रहे हैं।

आइए अब नमस्तेवर्ल्ड वर्ग को संशोधित करें और अभिवादन प्रदर्शित करने के लिए एक और विधि जोड़ें। हम इसे hello_greetings2 कहेंगे।

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.html', greetings=greetings)

इस दृश्य में, हम सत्र ऑब्जेक्ट से मानों को पढ़ते हैं और उपयोगकर्ता-सामना करने वाले HTML में उन मूल्यों को प्रदर्शित करने के लिए फ्लास्क रेंडर टेम्पलेट का उपयोग करते हैं। ध्यान दें कि hello_greetings2, hello_greetings के समान कार्यक्षमता को प्राप्त करने का एक वैकल्पिक तरीका है।

अंतर केवल इतना है कि hello_greetings2 का उपयोग करते हुए, हम उपयोगकर्ता द्वारा दर्ज किए गए मान दिखा रहे हैं, और hello_greetings में हमने उपयोगकर्ता से कोई इनपुट नहीं लिया है और संबंधित मार्ग पर मैप किए गए दृश्य को लिखते समय उन्हें हार्डकोड किया है।

फ्लास्क रिस्पांस

यह काफी दुर्लभ है कि आपको कोड में फ्लास्क प्रतिक्रिया का स्पष्ट उपयोग मिलेगा। फ्लास्क में रिस्पांस क्लास Werkzueg के रिस्पॉन्स क्लास से रिस्पॉन्स क्लास का एक उपवर्ग है, जो बदले में इसके रिस्पांसबेस क्लास को उपवर्गित करता है।

फ्लास्क रिस्पांस ऑब्जेक्ट आंतरिक रूप से फ्लास्क द्वारा बनता है जब भी हम रिटर्न स्टेटमेंट या रेंडर_टैम्पलेट जैसी विधि कहते हैं।

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

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.json', greetings=greetings), 201, {'Content-Type' : 'application/json'

फ्लास्क के रिस्पॉन्स क्लास का प्रत्यक्ष उपयोग एक उपयोग के मामले में कवर किया जा सकता है, जब हम फ़ाइल आकार और नेटवर्क बैंडविड्थ की बाधाओं के कारण एक बार में पूर्ण सामग्री वापस करने के बजाय सामग्री को स्ट्रीम करते हैं।

हमने एक बड़े CSV से सामग्री को स्ट्रीम करने के एक उदाहरण के नीचे दिखाया है।

from flask import Response @app.route('https://cdn.softwaretestinghelp.com/largefile.csv') def send_large_csv(): '''A controller to stream the content of a large csv file''' def gen(): for row in iter_all_rows(): yield ','.join(row) + ' ' return Response(gen(), mimetype='text/csv')

फ्लास्क रीडायरेक्ट

क्लाइंट से अलग-अलग अनुरोधों के आधार पर प्रतिक्रिया को पूर्व-परिभाषित करने के लिए आवेदन करना हमेशा संभव नहीं होता है।

हम फ्लास्क रिडायरेक्ट का उपयोग परिदृश्यों में करते हैं, जहाँ अनुरोध के जवाब में अन्य दृश्यों या स्थानों द्वारा पूरी की जा सकने वाली सामग्री परोसना संभव है। हम मानक HTTP रिटर्न कोड के साथ गर्भपात के साथ फ्लास्क रीडायरेक्ट का उपयोग करते हैं।

उदाहरण के लिए, नीचे दिए गए कोड में, हमने HTTP कोड 301 के साथ रीडायरेक्ट और 401 के साथ गर्भपात का उपयोग किया है।

from flask import Flask, redirect, url_for, request, abort app = Flask(__name__) @app.route('/') def index(): return render_template('log_in.html') # Log In template @app.route('/login',methods = ('POST', 'GET')) def login(): if request.method == 'POST': if request.form('username') == 'admin' : # if user is admin return redirect(url_for('success')), 301 else: abort(401) # stop processing else: return redirect(url_for('index')) # redirect to another view

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

फ्लास्क देबगुटुल्बार

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

फ्लास्क डीबग टूलबार स्थापित करें।

pip install flask-debugtoolbar

डीबगुटबार को सक्रिय करने के लिए, हमारी परियोजना में __init__.py फ़ाइल खोलें और कोड की निम्न पंक्तियों को जोड़कर कोड को संशोधित करें।

from flask_debugtoolbar import DebugToolbarExtension app.debug = True toolbar = DebugToolbarExtension(app)

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

# 1) डीबग टूलबार ब्राउज़र के दाईं ओर दिखाई देता है। टूलबार द्वारा प्रदान की गई विभिन्न विशेषताओं को देखने के लिए इसे क्लिक करें और इसका विस्तार करें।

डीबग टूलबार सक्रियण
डीबग टूलबार सक्रियण

#दो) जब भी आवेदन के लिए एक नया POST अनुरोध भेजा जाता है, तो इसे टूलबार द्वारा इंटरसेप्ट किया जाता है ताकि हम एप्लिकेशन के डीबगिंग से संबंधित चर और अन्य मापदंडों का निरीक्षण कर सकें।

डिबग टूलबार अवरोधन
डिबग टूलबार अवरोधन

इस डिफ़ॉल्ट अवरोधन को निम्न विन्यास के साथ अक्षम किया जा सकता है।

app.config('DEBUG_TB_INTERCEPT_REDIRECTS') = False सबसे अधिक परिणाम
डीबग टूलबार चर

अब नमूना एप्लिकेशन में हमारे द्वारा पेश की गई अतिरिक्त सुविधाओं के लिए हमारे विचारों का परीक्षण करने के लिए कुछ परीक्षण लिखें।

Xbox एक एक्स के लिए वीआर हेडसेट

परीक्षण से आगे बढ़ने से पहले, कृपया डिबगिंग को अक्षम करें जैसा कि __init__.py में नीचे दिखाया गया है। वैकल्पिक रूप से, आप नीचे दी गई लाइन पर टिप्पणी कर सकते हैं।

app.debug = False

परीक्षण फ्लास्क अनुप्रयोग दृश्य

हमें इसे अधिक प्रबंधनीय बनाने के लिए परीक्षण कोड को व्यवस्थित करने की आवश्यकता है। रूट डायरेक्टरी में conftest.py नाम की एक फाइल बनाएं, और नीचे दी गई लाइनों को test_hello.py से इस फाइल में स्थानांतरित करें।

from app import appbuilder import pytest @pytest.fixture def client(): ''' A pytest fixture for test client ''' appbuilder.app.config('TESTING') = True with appbuilder.app.test_client() as client: yield client

पाइस्टेस्ट फिक्स्चर को रन टाइम पर पाइस्टेस्ट द्वारा लोड किया जाता है। ये फिक्स्चर उपलब्ध हैं और सभी परीक्षणों के साथ साझा किए गए हैं। किसी भी प्रोजेक्ट के रूट पथ में एक conftest.py को परिभाषित करना सबसे अच्छा अभ्यास माना जाता है क्योंकि pytest एक स्पष्ट PYTHONPATH निर्दिष्ट किए बिना परियोजना के सभी मॉड्यूल को पहचान सकता है।

Test_hello फ़ाइल के लिए एक और परीक्षण जोड़ें। एक उदाहरण परीक्षण नीचे दिया गया है। हम क्लाइंट ऑब्जेक्ट की विधि को कॉल करते हैं और Resp.data में संग्रहीत प्रतिक्रिया डेटा में अपेक्षित मूल्य का दावा करते हैं।

इसी तरह, आप विभिन्न विचारों की ओर इशारा करते हुए अधिक परीक्षण लिख सकते हैं। हम बाद के ट्यूटोरियल में अधिक परीक्षण लिखेंगे।

def test_greetings(client): ''' A test method to test view hello_greetings''' resp = client.get('/hello/greetings', follow_redirects=True) assert b'Good Morning' in resp.data

प्रोजेक्ट के रूट डायरेक्टरी से नीचे कमांड का उपयोग करके परीक्षण चलाएं।

pytest -v

टेस्ट रन कंसोल में परीक्षण के परिणाम का उत्पादन करता है, जैसा कि नीचे दिखाया गया है:

पाइटेस्ट में विफलता
सबसे अधिक परिणाम

अभी तक कोई असफलता नहीं है। जैसा कि नीचे बताया गया है, एक और परीक्षण करें।

def test_greetings2(client): ''' A test method to test view hello_greetings2 ''' resp = client.get('/hello/greetings2', follow_redirects=True) assert b'Good Morning' in resp.data

यह परीक्षण विफल हो जाएगा क्योंकि हमने view.py फ़ाइल में HelloWorld वर्ग में कोई संदेश विशेषता निर्धारित नहीं की थी।

एक बार जब आप पाइस्टेस्ट -v का उपयोग करके परीक्षण चलाते हैं, तो फिर से नीचे दिखाई गई छवि के समान परिणाम कंसोल पर प्रदर्शित होंगे।

पाइटेस्ट में विफलता

नीचे दिए गए खंड उन चरणों को बताते हैं, जिन्हें हमें CI / CD प्लेटफ़ॉर्म में परीक्षण चलाने के दौरान निष्पादित करने की आवश्यकता होती है। हम उसी प्रोजेक्ट के लिए Git Actions का उपयोग करते हैं।

Git क्रियाओं के साथ CI / CD

अब हम फ़ाइलों में सभी परिवर्तनों को सहेजते हैं और इस ट्यूटोरियल के लिए संदेश देकर एक प्रतिबद्धता बनाते हैं। स्थानीय रिपॉजिटरी पर कमिट करने के बाद, हम रिमोट मूल से बदलावों को -rebase फ्लैग के साथ खींचते हैं, यह देखने के लिए कि क्या रिमोट पर नए बदलावों के साथ कोई संघर्ष है या नहीं। हम इतिहास को सुसंगत बनाए रखने के लिए छूट देते हैं।

दूरस्थ मूल से परिवर्तनों को खींचने और विलय करने के लिए नीचे दिए गए आदेश का उपयोग करें। हालाँकि, परिवर्तनों को दूरस्थ से खींचने से पहले अपने बदलाव करें।

git pull origin master --rebase

अब स्थानीय मास्टर शाखा की जाँच करें और ट्यूटोरियल -2 शाखा के साथ विलय करें। एक बार मर्ज सफल होने के बाद, उन परिवर्तनों को मूल के स्वामी में प्रकाशित करें। यह कार्रवाई लक्ष्य प्लेटफार्मों पर बिल्डरों को आमंत्रित करेगी। हम उबंटू नवीनतम पर पायथन 3.7 और पायथन 3.8 पर इस कोड का परीक्षण कर रहे हैं।

निष्कर्ष

इस ट्यूटोरियल में हमने देखा कि फ्लास्क फ्रेमवर्क में टेम्प्लेट कैसे काम करते हैं। हमने चर और भावों का उपयोग करके उपयोगकर्ता-परिभाषित मूल्यों के साथ फ्लास्क टेम्पलेट बनाने और प्रदान करने के चरणों को रेखांकित किया।

हमने फ्लास्क ऐपबिल्डर प्लगइन के पूर्व-परिभाषित दृश्य बेस व्यू के उदाहरण भी देखे। कस्टम दृश्य बनाने के लिए फ्लास्क डेवलपर्स द्वारा इस दृश्य को आसानी से उप-वर्गित किया जा सकता है।

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

=> आसान फ्लास्क प्रशिक्षण श्रृंखला के माध्यम से पढ़ें

अनुशंसित पाठ

^