गोंडस मांजरीचे वेब अ‍ॅप (जॅंगो + व्ह्यूजे) सेटिंग्ज

मला बांधकाम प्रकल्पांबद्दल कोणतेही अनुकूल स्त्रोत सापडत नाहीत जे जेंगोला बॅकएंड सर्व्हिस म्हणून वापरतात आणि व्ह्यूजेज फ्रंट एंड म्हणून वापरतात. दोन्ही फ्रेमवर्कचे फायदे मिळविणे हे ध्येय आहे.

  • डेटाबेस व्यवस्थापित करण्यासाठी, संगणकीय आणि डेटा सर्व्हिंग करण्यासाठी जाँगो
  • व्ह्यूजेएस सह आपण शक्तिशाली वेब घटक तयार करू शकता, त्यांचा कोठेही पुन्हा वापर करू शकता आणि डीजॅंगो एपीआय रेस्ट वर विनंत्या करू शकता

सारांश

भाग I - सेटिंग्ज

भाग दुसरा - व्ह्यूजेचे दृश्य तयार करा

भाग तिसरा - डीआरएफसह रेस्ट एपीआय तयार करा

भाग IV - VueJs सह API वरून डेटा मिळवा

येथून!

आपल्याला आता काय आवश्यक आहे

- जॅंगो - व्ह्यूजेस २.० - वेबपॅक -

अगोदर पायथन आणि नोडजे स्थापित करणे आवश्यक आहे.

झांगो प्रोजेक्ट तयार करा

कमांड शेल उघडा आणि आपला Jango प्रोजेक्ट तयार करा

पायथन पाइप स्थापित करा जॅंगो // इंस्टाग्राम जॅंगो जॅंगो-अ‍ॅडमीन स्टार्टप्रोजेक्ट // एक जँगो प्रोजेक्ट तयार करा सीडी मॅनेज.पी रनसर्व्हर // स्थानिक सर्व्हर प्रारंभ करते

आपला ब्राउझर उघडा आणि http: // लोकलहोस्ट: 8000 वर जा. आपण हा मजकूर पृष्ठावर पहावा.

आपल्या एक्सप्लोररमध्ये आपल्या प्रोजेक्ट नावाचे एक नवीन फोल्डर अस्तित्त्वात असावे.

माझा प्रकल्प | _ माझा प्रकल्प | _ मॅनेज.पी

ऑर्डर झाली! आपला प्रकल्प टेम्पलेट प्रस्तुत करतो. आता आम्हाला व्ह्यूजेएसला आमच्या प्रकल्पात समाकलित करायचे आहे

VueJS भाग समाकलित करा

गृहीत धरुन नोडजे आपल्या संगणकावर स्थापित आहेत. शेल मध्ये खालील कमांड कार्यान्वित करा. आपण माझ्या प्रकल्प फोल्डरमध्ये असणे आवश्यक आहे

एनपीएम स्थापित करा -जी वू-क्लाइव्ह व्हीईइयू वेबपॅक-साधे

शेवटची कमांड व्ह्यूजेज प्रोजेक्ट तयार करते जो वेबपॅकसह कार्य करण्यासाठी कॉन्फिगर केली होती. शेल काही प्रश्न विचारेल

सद्य निर्देशिकेत प्रकल्प तयार करायचा? हो प्रोजेक्ट नाव: माझा प्रकल्प? प्रकल्प वर्णन: मानक वर्णन वापरायचे? लेखक: मानक? लीन्से: मानक? Sass वापरा: होय

आपण आपल्या मायप्रोजेक्ट फोल्डरमध्ये पहात असल्यास, तेथे नवीन फायली आहेत.

-माई प्रकल्प | _ मायप्रोजेक्ट | _ एसआरसी | _ मालमत्ता | _अॅप.व्ह्यू | _ मुख्य.js
| _ .babelrc | _ .editorconfig | _ अनुक्रमणिका. html | _ मॅनेज.पी | | _ पॅकेज.जेसन | _ README.md | _ webpack.config.js

तुमचा अनुप्रयोग योग्यरित्या चालविण्यासाठी आवश्यक असलेल्या अवलंबन माहिती पॅकेज.जेसन फाइलमध्ये आहे. हे असे दिसते:

"नाव": "मायप्रोजेक्ट", "वर्णन": "एक व्ह्यू.जेएस प्रोजेक्ट", "आवृत्ती": "०.०.०", "स्क्रिप्ट्स": dev "देव": "क्रॉस-एनव्ही एनओडी ENएनव्ही = वेबपॅक-डेव्हलपमेंट -सर्व्हर --open --hot "," बिल्ड ":" क्रॉस-एनव्ही NODE_ENV = उत्पादन वेबपॅक --progress --hide-modules "}," अवलंबन ": {" vue ":" ^ 2.5.11 "} , ... "डेव्हिडपेंडेन्सीज": {"बेबील-कोर": "^ 6.26.0", "बेबील-लोडर": "^ 7.1.2", "बेबेल-प्रीसेट-एन्व्ह": "^ 1.6.0", "बेबेल-प्रीसेट-स्टेज -3": "^ 6.24.1", "क्रॉस-एनव्हीव्ह": "^ 5.0.5", सीएसएस लोडर: ^ 0.28.7 "फाइल-लोडर": "^ 1.1.4" , "नोड-सस": "^ 4.5.3", "सस-लोडर": "^ 6.0.6", "व्ह्यू-लोडर": "^ 13.0.5", "व्ह्यू-टेम्पलेट-कंपाईलर": "^ 2.4.4 "," वेबपॅक ":" ^ 3.6.0 "," वेबपॅक-डेव्ह-सर्व्हर ":" ^ 2.9.1 "}

आपण एनपीएम स्थापना चालवित असताना, सर्व अवलंबन नोड_मॉड्यूल फोल्डरमध्ये स्थापित केल्या जातात.

एनपीएम स्थापित // आणि प्रतीक्षा करा

आपला VueJs अनुप्रयोग आता वापरासाठी सज्ज आहे.

एनपीएम रन देव

आपला अ‍ॅप विकास मोडमध्ये तयार केला आहे. आपला ब्राउझर अनुक्रमणिका. एचटीएमएल द्वारे प्रविष्ट केला आहे. त्यामध्ये त्याला src / main.js लोड करण्याची सूचना आढळली

src \ main.js
'./App.vue' वरुन 'vue' येथून अ‍ॅप आयात करा व्यू आयात करा
नवीन व्ह्यू ({el: '#app', प्रस्तुत करा: एच => एच (अॅप)})

येथे आम्ही एक व्ह्यू तयार करतो आणि src / App.vue वरून अ‍ॅप सामग्री प्रदान करतो

src \ App.vue