मुझे नोडज प्रोजेक्ट में मेरी निर्देशिका संरचना इस तरह मिली है
और यहाँ मेरा login_nimda.html
सीएसएस लिंक के साथ स्निपेट है:
मैं nimda.js
से login_nimda.html
सेवा दे रहा हूं, लेकिन संबंधित CSS फ़ाइल लोड नहीं हो रही है।
जैसा कि आप देख सकते हैं कि मैंने रूट-रिलेटिव पथ का उपयोग किया है लेकिन मुझे अभी भी कोई परिणाम नहीं मिल रहा है। यही कारण है कि मुझे बूटस्ट्रैप के लिए सीडीएन का उपयोग करना पड़ा और डाउनलोड की गई फ़ाइल का उपयोग नहीं कर सका।
यह कैसा होना चाहिए? मैं लिंक की href
विशेषता के साथ कहां गलत हो रहा हूं?
संपादित करें: यह रहा मेरा nimda.js
स्निपेट जो HTML फ़ाइल login_nidma.html
परोस रहा है
router.get('/', function( req, res){
let html = fs.readFileSync(path.join(__dirname,'../static/login_nimda.html'));
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
});
2 जवाब
इसके बजाय स्थिर फ़ाइलों की सेवा के लिए
express.static
मिडलवेयर का उपयोग करें:router.get('/', function( req, res){ let html = fs.readFileSync(path.join(__dirname,'../static/login_nimda.html')); res.writeHead(200, {'Content-Type': 'text/html'}); res.end(html); });
https://expressjs.com/en/starter/static-files.html
यह न भूलें कि आपpath
मॉड्यूल और__dirname
चर का उपयोग कर सकते हैं (देखें यह SO प्रश्न)express.static(...)
को यह बताने में मदद करने के लिए कि आपकी स्थिर फाइलें कहां हैं।यदि आप अलग-अलग फाइलों में
app.use(express.static(...))
गुणा करना चाहते हैं, तो आपको यह सुनिश्चित करना होगा कि आप मिडलवेयर को उसीapp
इंस्टेंस पर लागू कर रहे हैं। मैंने उदाहरण के लिए एक कोड नमूना बनाया है।< /a> server.js#L10, मैंvar app
मेंroutes.js
मॉड्यूल (जो आपकेnimda.js
के बराबर है) में जाता हूं। में Routes.js#L4, मैं.use()
को उसीvar app
पर कॉल कर रहा हूं, जिस परserver.js
में बनाया गया था। आपके रिफैक्टेड संस्करण में जहां आप अपनेserver.js
औरnimda.js
दोनों मेंapp.use(express.static(...))
का उपयोग कर रहे हैं, मुझे लगता है कि आप प्रत्येक फ़ाइल में एक नयाvar app = express()
बना रहे हैं (जो ऐसी चीज है जिससे हम बचना चाहते हैं)।जब तक आपके पास ऐसा करने का एक बहुत अच्छा कारण न हो, मैं आपकी स्थिर संपत्तियों को 2 अलग-अलग स्थानों में विभाजित करने की अनुशंसा नहीं करता जैसे आपने चित्रित किया है। उन्हें एक केंद्रीय स्थान पर रखना< /strong> यह सुनिश्चित करके आपके ऐप में जटिलता की मात्रा को कम करने में आपकी सहायता करेगा कि हमें इस समय आपके लिए आवश्यक कार्यक्षमता के लिए एक अलग
routes.js
(उर्फnimda.js
) फ़ाइल की भी आवश्यकता नहीं है।
यदि आप एक्सप्रेस का उपयोग कर रहे हैं, तो आपको स्थिर सामग्री के अनुरोधों को बिल्कुल भी संभालना नहीं है। एक्सप्रेस स्वचालित रूप से आपके स्टैटिक्स लौटा देगा। राउटर और फ़ोल्डर संरचना के लिए बस पथ का उपयोग करें। जैसे कि
app.use('/my_statics',express.static(__dirname + "/public"));
अगर आपके पास /public/assets/css/a.css पर a.css नीचे काम करता है
http://example.com/my_statics/assets/css/a.css
यदि आपके पास नीचे /public/assets/b.html पर b.html काम करता है
http://example.com/my_statics/assets/b.html
संपादित करें: मैंने अपने साइडप्रोजेक्ट DataEndpoints के लिए एक समान सेटअप बनाया है। स्टेटिक और राउटर सेटअप के लिए app.js चेक करें। कैसे संभालना है यह देखने के लिए राउटर फ़ोल्डर भी देखें, आप दृश्य फ़ोल्डर में देखना चाहेंगे कि स्थिर फ़ाइल लिंक कैसे सेट करें