নোড.জেজে বেসিক এইচটিএমএল লোড হচ্ছে


207

আমি কীভাবে একটি বেসিক এইচটিএমএল ফাইল লোড এবং রেন্ডার করব তা জানার চেষ্টা করছি যাতে আমাকে কোডটি লিখতে হবে না:

response.write('...<p>blahblahblah</p>...');

উত্তর:


240

আমি মাত্র একটি উপায় fs লাইব্রেরি ব্যবহার করে খুঁজে পেয়েছি । যদিও এটি সবচেয়ে পরিষ্কার কিনা আমি নিশ্চিত নই।

var http = require('http'),
    fs = require('fs');


fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err; 
    }       
    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(8000);
});

মূল ধারণাটি কেবল কাঁচা ফাইল পড়া এবং বিষয়বস্তু ডাম্পিং করা। এখনও ক্লিনার বিকল্পগুলির জন্য উন্মুক্ত, যদিও!


14
আপনার ক্ষেত্রে আপনার fs.readFileSync ব্যবহার করা উচিত, পৃষ্ঠাটি অপরিজ্ঞাত হিসাবে প্রকাশ করা খারাপ হবে। তবে হ্যাঁ, এটি একটি বেসিক এইচটিএমএল সার্ভার তৈরি করার একটি ভাল উপায়
জেনারেলেনারি

1
sys = require('util')কনসোলে কিছুই মুদ্রিত না হওয়ায় এটির প্রয়োজন নেই।
বকুদান

1
এটি পুরো ফাইলটিকে মেমোরিতে এবং প্রতিটি অনুরোধে পড়ে। আপনার বাফারিংয়ের পরিবর্তে আপনার ডিস্ক থেকে ফাইলটি স্ট্রিমিং করা উচিত। এই জাতীয় জিনিসের জন্য ভাল মানের গ্রন্থাগারগুলির উপস্থিতি রয়েছে, যেমন সেনচলাবস.আর / সংযোগ এবং গিথুব
ড্রু নোকস

6
আমি মনে করি এটি লিখনহাইড হওয়া উচিত (...) লিখনহাইডার (...) না ... নোড.জেএস প্রতিক্রিয়া. রাইটহাইড ()
ড্যানি বুলিস

2
@ জেনারেলহেনরি আরও ভাল, ত্রুটিটি পরিচালনা করার অনুমতি দিয়ে fs.readFileকলটি কলটির অভ্যন্তরে স্থাপন করা যেতে পারে http.createServer। সাথে ব্যবহারের স্টিফেনস উত্তর বিবৃতি সহজ জিনিস যে, নতুন ব্যবহারকারী উপেক্ষা পারে। if (err) { console.log('something bad'); return res.end('Oops! Something bad happened.');}return
eenblam

47

এইচটিএমএল ফাইল পেতে অ্যাপ.জেট ব্যবহার করুন। ইহা সহজ!!

const express = require('express');
const app = new express();

app.get('/', function(request, response){
    response.sendFile('absolutePathToYour/htmlPage.html');
});

এটা ঐটার মতই সহজ. এই ব্যবহারের জন্য এক্সপ্রেস মডিউল। এক্সপ্রেস ইনস্টল করুন:npm install express -g


35
আপনি যে থাকতে হবে তা উল্লেখ করতে ভুলে গেছেন express
24:38

7
পরিবর্তে ব্যবহার করুন res.sendFile: প্রকাশ অবচিত res.sendfile stackoverflow.com/a/26079640/3166417
itzhar

1
ভাল উত্তর। এক্সপ্রেস ব্যবহারের জন্য কীভাবে এক্সপ্রেসটি ব্যবহার করবেন তা জানেন না তাদের জন্য ....:var express = require('express'); var app = express();
ইউজিনিজাস এস

2
npm install express --save-g এর পরিবর্তে ব্যবহৃত হয়েছে
মিস্টারওয়াটার

39

আপনি এফএস অবজেক্টটি ব্যবহার করে ম্যানুয়ালি ফাইলগুলি প্রতিধ্বনি করতে পারেন তবে আমি আপনার জীবনকে আরও সহজ করার জন্য এক্সপ্রেসজেএস ফ্রেমওয়ার্কটি ব্যবহার করার পরামর্শ দেব ।

... তবে আপনি যদি কঠোর উপায়ে এটি করার জন্য জেদ করেন:

var http = require('http');
var fs = require('fs');

http.createServer(function(req, res){
    fs.readFile('test.html',function (err, data){
        res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
        res.write(data);
        res.end();
    });
}).listen(8000);

7
হ্যাঁ, আমি মোটামুটি একই জিনিসটি দিয়েছি। এক্সপ্রেস পরামর্শের জন্য ধন্যবাদ। এটি বেশ মিষ্টি, এবং আমি নিশ্চিত যে আমি এটি আমার পরবর্তী প্রকল্পের জন্য ব্যবহার করব। আমার লক্ষ্যটি ছিল ফ্রেডওয়ার্কটি আমার জন্য ভারী উত্তোলন করার আগে এটি কীভাবে হুডের নীচে সম্পন্ন হয়েছিল তা নির্ধারণ করা।
ডেভিড গ্রানাডো

1
অ্যান্টি ভাইরাসের ফায়ারওয়াল এই পদক্ষেপটি অক্ষম করতে পারে
মোহাম্মদ ফারাহানী

22

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে যেহেতু এটির কথা কেউ উল্লেখ করেনি তাই আমি ভেবেছিলাম এটি যুক্ত করা ভাল:

আপনি যদি আক্ষরিকভাবে স্ট্যাটিক বিষয়বস্তু পরিবেশন করতে চান (একটি 'সম্পর্কে' পৃষ্ঠা, চিত্র, সিএসএস ইত্যাদি বলুন) আপনি স্ট্যাটিক সামগ্রী পরিবেশনকারী মডিউলগুলির একটি ব্যবহার করতে পারেন, উদাহরণস্বরূপ নোড-স্ট্যাটিক। (এমন আরও কিছু আছে যা আরও ভাল / খারাপ হতে পারে - Search.npmjs.org চেষ্টা করুন)) কিছুটা প্রাক-প্রক্রিয়াজাতকরণের পরে আপনি স্থির থেকে ডায়নামিক পৃষ্ঠাগুলি ফিল্টার করতে পারেন এবং ডান অনুরোধ হ্যান্ডলারের কাছে প্রেরণ করতে পারেন।


1
উত্তরটি জেএস ফাইলটি সঠিকভাবে লোড করে না, নোড-স্ট্যাটিক ব্যবহার করে আমার সমস্যা সমাধান করে।
এজেড

19

এটি সম্ভবত কিছু ভাল হবে যেহেতু আপনি ফাইল (গুলি) স্ট্রিমিংয়ের চেয়ে এগুলি সমস্ত fs.readFile এর মতো মেমোরিতে লোড না করেই স্ট্রিমিং করবেন।

var http = require('http');
var fs = require('fs');
var path = require('path');
var ext = /[\w\d_-]+\.[\w\d]+$/;

http.createServer(function(req, res){
    if (req.url === '/') {
        res.writeHead(200, {'Content-Type': 'text/html'});
        fs.createReadStream('index.html').pipe(res);
    } else if (ext.test(req.url)) {
        fs.exists(path.join(__dirname, req.url), function (exists) {
            if (exists) {
                res.writeHead(200, {'Content-Type': 'text/html'});
                fs.createReadStream('index.html').pipe(res);
            } else {
                res.writeHead(404, {'Content-Type': 'text/html'});
                fs.createReadStream('404.html').pipe(res);
        });
    } else {
        //  add a RESTful service
    }
}).listen(8000);

14

এটি মুহাম্মদ নেসওয়াইনের উত্তরের একটি আপডেট

এক্সপ্রেস ৪.x এ, সেন্ডফিল অবহেলা করা হয়েছে এবং সেন্ডফিল ফাংশনটি ব্যবহার করতে হবে। পার্থক্যটি হ'ল সেন্ডফিল আপেক্ষিক পাথ নেয় এবং সেন্ডফিল পরম পথ নেয়। সুতরাং, __ ডিরেক্টরিটি হার্ডকডিং এড়ানোর জন্য ব্যবহৃত হয়।

var express = require('express');
var app = express();
var path = require("path");

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/folder_name/filename.html'));
});

12

এটি pipeপদ্ধতিটি ব্যবহারের আরও নমনীয় এবং সহজ উপায় ।

var fs = require('fs');
var http = require('http');

http.createServer(function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/html'});

  var file = fs.createReadStream('index.html');
  file.pipe(response);

}).listen(8080);

console.log('listening on port 8080...');

10

আমি শিখেছি সেরা উপায়টি এইচটিএমএল ফাইলগুলির সাথে এক্সপ্রেস ব্যবহার করা হিসাবে এক্সপ্রেস প্রচুর সুবিধা দেয়। এছাড়াও আপনি চাইলে এটি হিরোকু প্ল্যাটফর্মে প্রসারিত করতে পারেন..জাস্ট বলছেন :)

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
});

app.listen(3000);



console.log("Running at Port 3000");

পরিষ্কার এবং সেরা .. !!!


6

করার সহজ উপায় হ'ল, আপনার সমস্ত ফাইল যা সূচি html সহ সমস্ত ফাইল যেমন সিএসএস, জেএস ইত্যাদির মতো কোনও ফোল্ডারে পাবলিকের মধ্যে রেখে দিন বা আপনি যা খুশি নামকরণ করতে পারেন এবং এখন আপনি এক্সপ্রেস জেএস ব্যবহার করতে পারেন এবং কেবল অ্যাপ্লিকেশনটি বলতে পারেন _নির্দেশটি হিসাবে ব্যবহার করতে:

আপনার সার্ভার.জেজে এক্সপ্রেস ব্যবহার করে এগুলি যুক্ত করুন

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));

এবং আপনি যদি সেপ্রেট ডিরেক্টরিটি রাখতে চান তবে সর্বজনীন ডিরেক্টরিতে নতুন দির যুক্ত করুন এবং সেই পথটি "/ সর্বজনীন / আপনারডিরনাম" ব্যবহার করুন

আমরা এখানে ঠিক কী করছি? আমরা এক্সপ্রেস উদাহরণস্বরূপ অ্যাপ তৈরি করছি এবং যদি জনসাধারণের ডিরেক্টরিতে সমস্ত সংস্থান অ্যাক্সেস করতে হয় তবে আমরা ঠিকানাটি দিচ্ছি। আশাকরি এটা সাহায্য করবে !


6

এক্সপ্রেস মডিউল ব্যবহার সম্পর্কে কীভাবে?

    var app = require('express')();

    app.get('/',function(request,response){
       response.sendFile(__dirname+'/XXX.html');
    });

    app.listen('8000');

তারপরে, আপনি / লোকালহোস্ট: 8000 পেতে ব্রাউজারটি ব্যবহার করতে পারেন


5
   var http = require('http');
   var fs = require('fs');

  http.createServer(function(request, response) {  
    response.writeHeader(200, {"Content-Type": "text/html"});  
    var readSream = fs.createReadStream('index.html','utf8')
    readSream.pipe(response);
  }).listen(3000);

 console.log("server is running on port number ");

2
আমি এটা মনে করি না response.writeHeader(), বরং response.writeHead(),।
এডউইন

response.writeHeader()এবং response.writeHead()উভয়ই বৈধ।
ডেকে

4

আমি মনে করি এটি সার্ভারে চলমান ইউআরএল দেখায় এটি একটি আরও ভাল বিকল্প হবে:

var http = require('http'),
    fs = require('fs');

const hostname = '<your_machine_IP>';
const port = 3000;

const html=fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err; 
    }
        http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(port, hostname, () => {
            console.log(`Server running at http://${hostname}:${port}/`);
        })
}); 

4

আপনি এই স্নিপেট ব্যবহার করতে পারেন:

var app = require("express");
app.get('/', function(req,res){
   res.sendFile(__dirname+'./dir/yourfile.html')
});
app.listen(3000);

4

আপনি যদি পাইপ ব্যবহার করেন তবে এটি সত্যিই সহজ। নিম্নলিখিত সার্ভার.জেএস কোড স্নিপেট।

var http = require('http');
var fs = require('fs');

function onRequest(req, res){

    console.log("USER MADE A REQUEST. " +req.url);
    res.writeHead(200, {'Content-Type': 'text/html'});
    var readStream = fs.createReadStream(__dirname + '/index.html','utf8'); 
    
/*include your html file and directory name instead of <<__dirname + '/index.html'>>*/

    readStream.pipe(res);

}

http.createServer(onRequest).listen(7000);
console.log('Web Server is running...');


যদি কেউ এটিকে নির্বিচারে নেস্টেড ডিরেক্টরিগুলিতে স্বেচ্ছাসেবী ফাইলগুলি ফিরিয়ে দিতে প্রসারিত করার চেষ্টা করে, আপনি নিশ্চিত হয়ে নিন যে আপনার ব্যবহারকারী যে ডিরেক্টরিটি পাস করেছে সেই ডিরেক্টরিতে এর মতো জিনিস নেই ../। যদি __dirname + "/index.html'কিছু না করে কিছু করার পরিবর্তিত হয় তবে __dirname + requestedPageFromHeaderআমি বিশ্বাস করি যে ফলাফলের কোডটিতে এই দুর্বলতা থাকবে। ডিরেক্টরি ~অন্তর্ভুক্ত করার মতো অক্ষরগুলির অক্ষর যতক্ষণ না আপনার অন্তর্ভুক্ত থাকে ঠিক ততক্ষণ ঠিক থাকবে __dirname +- ব্যবহারকারী যদি পথটির সূচনা নির্ধারণ করতে পারে তবে এগুলিও পরীক্ষা করা দরকার।
জন

2

আমি জানি এটি একটি পুরানো প্রশ্ন - আপনি যদি কানেক্ট বা এক্সপ্রেস না ব্যবহার করতে পছন্দ করেন তবে এখানে একটি সরল ফাইল সার্ভার ইউটিলিটি রয়েছে; বরং http মডিউলটি।

var fileServer = require('./fileServer');
var http = require('http');
http.createServer(function(req, res) {
   var file = __dirname + req.url;
   if(req.url === '/') {
       // serve index.html on root 
       file = __dirname + 'index.html'
   }
   // serve all other files echoed by index.html e.g. style.css
   // callback is optional
   fileServer(file, req, res, callback);

})
module.exports = function(file, req, res, callback) {
    var fs = require('fs')
        , ext = require('path').extname(file)
        , type = ''
        , fileExtensions = {
            'html':'text/html',
            'css':'text/css',
            'js':'text/javascript',
            'json':'application/json',
            'png':'image/png',
            'jpg':'image/jpg',
            'wav':'audio/wav'
        }
    console.log('req    '+req.url)
    for(var i in fileExtensions) {
       if(ext === i) {    
          type = fileExtensions[i]
          break
       }
    }
    fs.exists(file, function(exists) {
       if(exists) {
          res.writeHead(200, { 'Content-Type': type })
          fs.createReadStream(file).pipe(res)
          console.log('served  '+req.url)
          if(callback !== undefined) callback()
       } else {
          console.log(file,'file dne')
         }  
    })
}


1

এটি বেশ পুরানো প্রশ্ন ... তবে আপনার ব্যবহারের ক্ষেত্রে যদি এখানে কোনও নির্দিষ্ট এইচএমএল পৃষ্ঠাকে বিজ্ঞাপনের ভিত্তিতে ব্রাউজারে সহজভাবে প্রেরণ করা হয় তবে আমি এই জাতীয় কিছু সহজ ব্যবহার করব:

var http = require('http')
,       fs = require('fs');

var server = http.createServer(function(req, res){
  var stream = fs.createReadStream('test.html');
  stream.pipe(res);
});
server.listen(7000);

0

আমরা সংযুক্ত ফ্রেমের কাজের সাথে এইচটিএমএল ডকুমেন্টটি লোড করতে পারি। আমি আমার প্রকল্পের পাবলিক ফোল্ডারে আমার এইচটিএমএল নথি এবং সম্পর্কিত চিত্রগুলি রেখেছি যেখানে নীচের কোড এবং নোড মডিউল উপস্থিত রয়েছে।

//server.js
var http=require('http');
var connect=require('connect');

var app = connect()
  .use(connect.logger('dev'))
  .use(connect.static('public'))
  .use(function(req, res){
   res.end('hello world\n');
 })

http.createServer(app).listen(3000);

আমি এফএস এর রিডফিল () পদ্ধতিটি চেষ্টা করেছি, তবে এটি চিত্রগুলি লোড করতে ব্যর্থ হয়েছে, এজন্যই আমি সংযোগ কাঠামোটি ব্যবহার করেছি।


0

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

এক্সপ্রেস সার্ভার ব্যবহার করে হোস্ট স্ট্যাটিক এইচটিএমএল ফাইলগুলির জন্য আমার সাধারণ ডেমো কোডগুলি এখানে!

আশা করি এটি আপনার জন্য সহায়ক!

// simple express server for HTML pages!
// ES6 style

const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();

let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[0] );
});

app.get('/test', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[1] );
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/ 
        Server hostname ${hostname} is listening on port ${port}!
    `);
});

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.