Backbone.js मॉडल डेटा को बचाने के तरीके?


86

मैं फ्रंट एंड डेवलपमेंट में अधिक हूं और हाल ही में अपने ऐप में बैकबोन.जेएस की खोज शुरू की है। मैं सर्वर पर मॉडल डेटा को जारी रखना चाहता हूं।

क्या आप कृपया मुझे मॉडल डेटा (json प्रारूप का उपयोग करके) को बचाने के विभिन्न तरीके समझा सकते हैं। मैं सर्वर साइड पर जावा का उपयोग कर रहा हूं। इसके अलावा मैंने मुख्य रूप से डेटा को बचाने के लिए REST का उपयोग किया है। जैसा कि मैं फ्रंट एंड देव में अधिक हूं, मुझे आरईएसटी और अन्य समान सामानों के बारे में पता नहीं है।

यह बहुत अच्छा होगा अगर कोई मुझे कुछ सरल उदाहरण के साथ प्रक्रिया समझा सकता है।

जवाबों:


272

मूल रूप से मॉडल में एक गुण होता है जिसे गुण कहते हैं जो एक निश्चित मॉडल के विभिन्न मूल्य हो सकते हैं। बैकबोन JSON ऑब्जेक्ट्स का उपयोग करता है जो JSON ऑब्जेक्ट्स को लेने वाले विभिन्न तरीकों का उपयोग करके इन मानों को पॉप्युलेट करने का एक सरल तरीका है। उदाहरण:

Donuts = Backbone.Model.extend({
    defaults: {
        flavor: 'Boston Cream',  // Some string
        price: '0.50'  // Dollars
    }
});

मॉडल को आबाद करने के लिए ऐसा करने के कुछ तरीके हैं। उदाहरण के लिए, आप JSON या सेट विधि () का उपयोग करके अपने मॉडल का उदाहरण सेट कर सकते हैं, जो JSON की विशेषताओं को लेता है।

myDonut = new Donut({'flavor':'lemon', 'price':'0.75'});
mySecondHelping = new Donut();
mySecondHelping.set({'flavor':'plain', 'price':'0.25'});

console.log(myDonut.toJSON());
// {'flavor':'lemon', 'price':'0.75'}
console.log(mySecondHelping.toJSON());
// {'flavor':'plain', 'price':'0.25'}

तो यह हमें मॉडल को बचाने और उन्हें सर्वर पर जारी रखने के लिए लाता है। "रिस्ट / रेस्टफुल क्या है?" के बारे में पूरी जानकारी है। और यहाँ एक छोटे से ब्लर्ब में यह सब समझाना मुश्किल है। विशेष रूप से REST और बैकबोन सेविंग के संबंध में, अपने सिर को चारों ओर लपेटने की चीज HTTP अनुरोधों का शब्दार्थ है और आप अपने डेटा के साथ क्या कर रहे हैं।

आप संभवतः HTTP अनुरोधों के दो प्रकारों के लिए उपयोग किए जाते हैं। प्राप्त करें और पोस्ट करें। रीस्टफुल वातावरण में, इन क्रियाओं का विशिष्ट अर्थ है कि बैकबोन मानता है। जब आप सर्वर से एक निश्चित संसाधन प्राप्त करना चाहते हैं, (उदाहरण के लिए डोनट मॉडल जिसे मैंने पिछली बार बचाया था, एक ब्लॉग प्रविष्टि, एक कंप्यूटर विनिर्देशन) और वह संसाधन मौजूद है, तो आप एक GET अनुरोध करते हैं। इसके विपरीत, जब आप एक नया संसाधन बनाना चाहते हैं तो आप POST का उपयोग करें।

इससे पहले कि मैं बैकबोन में आया, मैंने कभी भी निम्नलिखित दो HTTP अनुरोध विधियों को नहीं छुआ है। PUT और DELETE। इन दो क्रियाओं का भी बैकबोन के लिए विशिष्ट अर्थ है। जब आप किसी संसाधन को अद्यतन करना चाहते हैं, (उदाहरण के लिए नींबू डोनट के स्वाद को लिमोन डोनट, आदि में बदलें) तो आप एक PUT अनुरोध का उपयोग करें। जब आप उस मॉडल को सर्वर से सभी को एक साथ हटाना चाहते हैं, तो आप एक DELETE अनुरोध का उपयोग करते हैं।

ये मूल बातें बहुत महत्वपूर्ण हैं क्योंकि आपके Restful ऐप के साथ, आपके पास संभवतः एक यूआरआई पदनाम होगा जो आपके द्वारा उपयोग किए जाने वाले अनुरोध के प्रकार के आधार पर उपयुक्त कार्य करेगा। उदाहरण के लिए:

// The URI pattern
http://localhost:8888/donut/:id

// My URI call
http://localhost:8888/donut/17

अगर मैं उस URI को GET कर देता हूं, तो उसे 17 की आईडी के साथ डोनट मॉडल मिलेगा। आईडी: यह इस बात पर निर्भर करता है कि आप इसे कैसे सर्वर साइड में सेव कर रहे हैं। यह आपके डेटाबेस तालिका में आपके डोनट संसाधन की आईडी हो सकती है।

अगर मैं नए डेटा के साथ उस URI को एक PUT बनाता हूं, तो मैं इसे अपडेट करूंगा, इस पर बचत करूंगा। और अगर मैं उस URI को DELETE करता हूं, तो यह मेरे सिस्टम से इसे शुद्ध कर देगा।

POST के साथ, चूंकि आपने एक संसाधन नहीं बनाया है, फिर भी इसमें एक स्थापित संसाधन ID नहीं होगी। हो सकता है कि यूआरआई लक्ष्य मैं संसाधन बनाना चाहता हूं बस यही है:

http://localhost:8888/donut

यूआरआई में कोई आईडी टुकड़ा नहीं। ये सभी URI डिज़ाइन आपके ऊपर हैं और आप अपने संसाधनों के बारे में कैसे सोचते हैं। लेकिन रेस्टफुल डिज़ाइन के संबंध में, मेरी समझ यह है कि आप अपने कार्यों की क्रियाओं को अपने HTTP अनुरोध और संज्ञाओं के संसाधनों के रूप में रखना चाहते हैं, जो यूआरआई को पढ़ने और मानव अनुकूल बनाने में आसान बनाते हैं।

क्या आप अब भी मेरे साथ हैं? :-)

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

myDonut.save();
mySecondHelping.save();

बैकबोन स्मार्ट है। यदि आपने सिर्फ एक डोनट संसाधन बनाया है, तो इसमें सर्वर से आईडी नहीं होगी। इसमें एक सीआईडी ​​नामक कुछ है जो बैकबोन आंतरिक रूप से उपयोग करता है लेकिन चूंकि इसमें आधिकारिक आईडी नहीं है, इसलिए यह जानता है कि इसे एक नया संसाधन बनाना चाहिए और यह एक POST अनुरोध भेजता है। यदि आपको सर्वर से अपना मॉडल मिला है, तो शायद यह एक आईडी होगा यदि सब सही था। इस स्थिति में, जब आप सहेजते हैं () बैकबोन मानता है कि आप सर्वर को अपडेट करना चाहते हैं और यह एक PUT भेजेगा। एक विशिष्ट संसाधन प्राप्त करने के लिए, आप बैकबोन विधि .fetch () का उपयोग करेंगे और यह एक GET अनुरोध भेजता है। जब आप किसी मॉडल पर .destroy () कॉल करते हैं तो वह DELETE भेजेगा।

पिछले उदाहरणों में, मैंने स्पष्ट रूप से बैकबोन को नहीं बताया जहां यूआरआई है। चलो अगले उदाहरण में करते हैं।

thirdHelping = Backbone.Model.extend({
    url: 'donut'
});
thirdHelping.set({id:15});  // Set the id attribute of model to 15
thirdHelping.fetch();  // Backbone assumes this model exists on server as ID 15

Backbone तीसरे को प्राप्त करेगा http://localhost:8888/donut/15यह आपकी साइट रूट पर डोनट स्टेम जोड़ देगा।

अगर तुम मेरे साथ हो, तो अच्छा है। मुझे लगता है। जब तक आप भ्रमित न हों। लेकिन हम वैसे भी ट्रूड करेंगे। इसका दूसरा हिस्सा SERVER साइड है। हमने HTTP के विभिन्न क्रियाओं और उन क्रियाओं के पीछे अर्थ अर्थ के बारे में बात की है। आपके, बैकबोन और आपके सर्वर के साझा होने के अर्थ

आपके सर्वर को GET, POST, PUT और DELETE अनुरोध के बीच के अंतर को समझना होगा। जैसा कि आपने ऊपर के उदाहरणों में देखा, GET, PUT, और DELETE सभी एक ही URI को इंगित http://localhost:8888/donut/07कर सकते हैं जब तक कि आपका सर्वर इन HTTP अनुरोधों के बीच अंतर नहीं कर सकता है, यह बहुत उलझन में होगा कि उस संसाधन के साथ क्या किया जाए।

यह तब होता है जब आप अपने RESTful सर्वर एंड कोड के बारे में सोचना शुरू करते हैं। कुछ लोगों को रूबी पसंद है, कुछ लोगों को .net पसंद है, मुझे PHP पसंद है। विशेष रूप से मुझे SLIM PHP माइक्रो-फ्रेमवर्क पसंद है। SLIM PHP एक माइक्रो-फ्रेमवर्क है जिसमें रेस्टफुल गतिविधियों से निपटने के लिए एक बहुत ही सुंदर और सरल टूल सेट है। आप ऊपर दिए गए उदाहरणों में मार्गों (URI) को परिभाषित कर सकते हैं और यह निर्भर करता है कि कॉल GET, POST, PUT या DELETE है या नहीं, यह सही कोड निष्पादित करेगा। एसएलआईएम के समान अन्य समाधान भी हैं जैसे रेसेस, टॉनिक। मेरा मानना ​​है कि केक और कोड आईग्निटर जैसे बड़े ढांचे भी इसी तरह के काम करते हैं, हालांकि मुझे न्यूनतम पसंद है। क्या मैंने कहा कि मुझे स्लिम पसंद है? ;-)

यह वह है जो सर्वर पर अंश कोड देख सकता है (यानी विशेष रूप से मार्गों के बारे में।)

$app->get('/donut/:id', function($id) use ($app) {
    // get donut model with id of $id from database.
    $donut = ...

    // Looks something like this maybe:
    // $donut = array('id'=>7, 'flavor'=>'chocolate', 'price'=>'1.00')

    $response = $app->response();
    $response['Content-Type'] = 'application/json';
    $response->body(json_encode($donut));
});

यहां यह ध्यान रखना महत्वपूर्ण है कि बैकबोन एक JSON ऑब्जेक्ट की अपेक्षा करता है। हमेशा अपने सर्वर को कंटेंट-टाइप को 'एप्लीकेशन / json' के रूप में नामित करें और यदि हो सके तो इसे json फॉर्मेट में एनकोड करें। फिर जब बैकबोन JSON ऑब्जेक्ट को प्राप्त करता है, तो यह जानता है कि उस मॉडल को कैसे पॉपुलेट किया जाए जिसने इसे अनुरोध किया था।

SLIM PHP के साथ, मार्ग ऊपर दिए गए समान रूप से काम करते हैं।

$app->post('/donut', function() use ($app) {
    // Code to create new donut
    // Returns a full donut resource with ID
});
$app->put('/donut/:id', function($id) use ($app) {
    // Code to update donut with id, $id
    $response = $app->response();
    $response->status(200);  // OK!
    // But you can send back other status like 400 which can trigger an error callback.
});
$app->delete('/donut/:id', function($id) use ($app) {
    // Code to delete donut with id, $id
    // Bye bye resource
});

तो आप लगभग पूर्ण दौर की यात्रा कर चुके हैं! जाओ एक सोडा ले आओ। मुझे डाइट माउंटेन ड्यू पसंद है। मेरे लिए भी एक हो जाओ।

एक बार जब आपका सर्वर एक अनुरोध संसाधित करता है, तो डेटाबेस और संसाधन के साथ कुछ करता है, एक प्रतिक्रिया तैयार करता है (चाहे वह एक साधारण http स्थिति संख्या या पूर्ण JSON संसाधन हो), फिर डेटा अंतिम प्रसंस्करण के लिए बैकबोन पर वापस आता है।

अपने सहेजें (), लाने (), आदि विधियों के साथ - आप सफलता और त्रुटि पर वैकल्पिक कॉलबैक जोड़ सकते हैं। यहाँ एक उदाहरण है कि मैंने इस विशेष केक को कैसे स्थापित किया:

Cake = Backbone.Model.extend({
    defaults: {
        type: 'plain',
        nuts: false
    },
    url: 'cake'
});

myCake = new Cake();
myCake.toJSON()  // Shows us that it is a plain cake without nuts

myCake.save({type:'coconut', nuts:true}, {
    wait:true,
    success:function(model, response) {
        console.log('Successfully saved!');
    },
    error: function(model, error) {
        console.log(model.toJSON());
        console.log('error.responseText');
    }
});

// ASSUME my server is set up to respond with a status(403)
// ASSUME my server responds with string payload saying 'we don't like nuts'

इस उदाहरण के बारे में कुछ अलग बातें हैं। आप देखेंगे कि मेरे केक के लिए, सेट के बजाय () बचाने से पहले विशेषताओं को निगलना, मैं बस नई विशेषताओं में मेरे कॉल को सहेजने में पारित हो गया। बैकबोन पूरी तरह से JSON डेटा को पूरे स्थान पर ले जाने और इसे एक विजेता की तरह संभालने के लिए बहुत निंजा है। इसलिए मैं अपने केक को नारियल और नट्स से बचाना चाहता हूं। (क्या यह 2 नट है?) वैसे भी, मैं दो वस्तुओं में अपने बचत के लिए पारित हुआ। JSON ऑब्जेक्ट और कुछ विकल्प। सर्वर साइड ट्रिप सफल होने तक पहला, {प्रतीक्षा करें: सच} का मतलब है कि मेरे क्लाइंट साइड मॉडल को अपडेट न करें। जब सर्वर सफलतापूर्वक प्रतिसाद देता है तो सफलता कॉल बैक होगा। हालाँकि, इस उदाहरण के परिणामस्वरूप त्रुटि होती है (200 के अलावा एक स्थिति त्रुटि कॉलबैक का उपयोग करने के लिए बैकबोन को इंगित करेगी) हमें परिवर्तनों के बिना मॉडल का प्रतिनिधित्व मिलता है। यह अभी भी सादे और बिना पागल के होना चाहिए। सर्वर द्वारा वापस भेजे गए त्रुटि ऑब्जेक्ट तक भी हमारी पहुंच है। हमने एक स्ट्रिंग वापस भेज दी लेकिन यह अधिक गुणों वाली JSON त्रुटि ऑब्जेक्ट हो सकती है। यह error.responseText विशेषता में स्थित है। हाँ, 'हमें नट्स पसंद नहीं हैं।'

बधाई हो। आपने अपना पहला सुंदर पूर्ण दौर की यात्रा एक मॉडल की स्थापना से की है, इसे सर्वर साइड, और बैक पर सहेजा है। मुझे उम्मीद है कि यह उत्तर महाकाव्य आपको एक आइडिया देता है कि यह सब एक साथ कैसे आता है। निश्चित रूप से, बहुत सारे विवरण हैं जो मैं पिछले समय को खत्म कर रहा हूं, लेकिन बैकबोन सेव, रेस्टफुल क्रियाएं, सर्वर-साइड एक्शन, रिस्पॉन्स के मूल विचार यहां हैं। बैकबोन डॉक्यूमेंटेशन से गुजरना जारी रखें (जो कि अन्य डॉक्स की तुलना में पढ़ना बहुत आसान है) लेकिन बस ध्यान रखें कि आपके सिर को लपेटने में समय लगता है। जितना अधिक आप इसे और अधिक धाराप्रवाह रखेंगे। मैं हर दिन बैकबोन के साथ कुछ नया सीखता हूं और यह वास्तव में मजेदार हो जाता है क्योंकि आप छलांग लगाना शुरू करते हैं और इस ढांचे में अपना प्रवाह देखते हैं। :-)

हैप्पी कोडिंग!

संपादित करें: संसाधन जो उपयोगी हो सकते हैं:

SO पर अन्य समान उत्तर: बैकबोन के साथ मॉडल आईडी कैसे जनरेट करें

REST पर: http://rest.elkstein.org/ http://www.infoq.com/articles/rest-introduction http://www.recessframework.org/page/towards-restful-php-5-basic- युक्तियाँ


9
मैं इस पर थोड़ा पागल हो रहा है। मुझे याद है जब मैंने पहली बार बैकबोन शुरू किया था और प्रश्नकर्ता की तरह प्रश्न थे और मुझे प्रतिक्रिया लिखने में थोड़ा बहुत मज़ा आया था। मुझे यकीन है कि मेरी जल्दबाजी में मैंने कुछ त्रुटियां की हैं या कुछ महत्वपूर्ण महत्वपूर्ण "आह-हा!" पहलुओं अगर मैंने किया, मुझे बताएं। :-P
jmk2142

6
माइंड ब्लोइंग उत्तर को बहुत कम कहने के लिए ... मैं यू द्वारा बताई गई सभी चीजों को समझने की कोशिश कर रहा हूं..क्योंकि आपके लिए सही होने के बावजूद बाकी चीजें थोड़ी मुश्किल दिखती हैं, आप निश्चित रूप से मुझे इस सवाल के बारे में समझा नहीं सकते ... मैं ' चीजों के माध्यम से फिर से जाना और कुछ समय में इसे स्वीकार करेंगे ... विस्तृत जवाब के लिए फिर से Thx ...
testndtv

2
जब मुझे समय मिलता है, तो मैं अपने उत्तर को अच्छे संदर्भों की सूची के साथ अपडेट करूंगा जो आपको खोज पर मदद कर सकते हैं। मैं आपको खतरनाक दुनिया का सामना करने के लिए एक लकड़ी की तलवार नहीं दे सकता, लेकिन मैं आपको उन साइटों के संसाधन लिंक दे सकता हूं जिन्होंने मेरी मदद की है। :-)
jmk2142

5
@testndtv क्या मैंने आपके सवाल का जवाब दिया? एक A चिह्न की सराहना की जाएगी।
jmk2142

2
इसमें कोई शक नहीं है कि यू ने इस सवाल का जवाब उम्मीद से ज्यादा दिया है ... मैंने अब जवाब स्वीकार कर लिया है..एक बार फिर मदद के लिए
धन्यवाद
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.