Node.js'de temel HTML yükleniyor

Nasıl yüklemek ve böyle bir kod yazmak zorunda değilsiniz nasıl temel bir HTML dosyası render öğrenmek için çalışıyorum:

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

Ben sadece fs kütüphanesini kullanarak bir yol buldum . Yine de en temiz olup olmadığından emin değilim.

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);
});

Temel kavram sadece ham dosya okuma ve içeriği boşaltma. Yine de daha temiz seçeneklere açık!

html dosyasını almak için app.get kullanın. basit!!

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

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

bu kadar basit. Bunun için ekspres modül kullanın. Ekspres yükleyin:npm install express -g

Dosyaları fs nesnesini kullanarak el ile yansıtabilirsiniz, ancak hayatınızı daha kolay hale getirmek için ExpressJS çerçevesini kullanmanızı tavsiye ederim .

... Ama zor yoldan yapmakta ısrar ediyorsanız:

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);

Bu eski bir soru olduğunu biliyorum, ama kimse belirtmediği gibi eklemeye değer olduğunu düşündüm:

Kelimenin tam anlamıyla statik içerik sunmak istiyorsanız ('hakkında' sayfa, resim, css vb.), Statik içerik sunma modüllerinden birini, örneğin düğüm statikini kullanabilirsiniz. (Daha iyi / kötü olabilecek başkaları da vardır - search.npmjs.org'u deneyin.) Biraz ön işleme ile dinamik sayfaları statikten filtreleyebilir ve doğru istek işleyicisine gönderebilirsiniz.

Bu, muhtemelen fs.readFile gibi belleğe yüklemek yerine dosya (lar) akışını gerçekleştireceğinizden daha iyi olacaktır.

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);

Bu Muhammed Neswine cevabının bir güncellemesi

Express 4.x sürümünde sendfile kullanımdan kaldırıldı ve sendFile işlevi kullanılmalıdır. Fark sendfile göreceli yol alır ve sendFile mutlak yol alır. Bu nedenle, __dirname yolu kodlamayı önlemek için kullanılır.

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'));
});

Bu pipeyöntemi kullanmanın daha esnek ve basit bir yoludur .

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...');

Ben öğrendim en iyi yolu express html dosyaları ile express kullanarak çok avantaj sağlar. Ayrıca isterseniz bir Heroku platformuna genişletebilirsiniz ...

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");

Temiz ve en iyi .. !!!

Bunu yapmanın kolay yolu, index.html veya CSS, JS vb.Gibi tüm kaynaklara sahip bir dosyayı herkese açık bir klasöre koymak veya istediğiniz her şeyi adlandırabilir ve şimdi ekspres js'yi kullanabilir ve sadece uygulamaya söyleyebilirsiniz. _dirname'i şu şekilde kullanmak için:

Server.js dosyasında ekspres kullanarak bunları ekleyin

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

ve eğer ayrı bir dizinin genel dizin altına yeni dizin ekleyip "/ public / YourDirName" yolunu kullanabilirsiniz.

Peki burada tam olarak ne yapıyoruz? app adında express örneği oluşturuyoruz ve genel dizinin tüm kaynaklara erişmesi için adres veriyoruz. Bu yardımcı olur umarım !

Express modülünü kullanmaya ne dersiniz?

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

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

    app.listen('8000');

daha sonra / localhost almak için tarayıcıyı kullanabilirsiniz: 8000

   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 ");

Ben sunucuyu çalıştıran URL gösterir gibi bu daha iyi bir seçenek olacağını düşünüyorum:

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}/`);
        })
}); 

Bu snippet'i de kullanabilirsiniz:

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

Boru kullanırsanız gerçekten çok basit. Server.js kod snippet'i aşağıdadır.

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...');

Bu eski bir soru olduğunu biliyorum - burada connect veya express kullanmayı tercih ederseniz basit bir dosya sunucusu yardımcı programıdır; daha ziyade http modülü.

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')
         }  
    })
}

yeşim yerine ejs kullan

npm install ejs

app.js

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

./routes/index.js

exports.index = function(req, res){
res.render('index', { title: 'ejs' });};

Bu oldukça eski bir soru ... ama buradaki kullanım durumunuz tarayıcıya geçici olarak belirli bir HTML sayfası göndermekse, böyle basit bir şey kullanırdım:

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);

html belgesini bağlantı çerçevesi çalışması ile yükleyebiliriz. Html belgemi ve ilgili görüntüleri, aşağıdaki kod ve düğüm modüllerinin bulunduğu projemin ortak klasörüne yerleştirdim.

//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);

Ben fs readFile () yöntemini denedim, ancak görüntüleri yüklemek için başarısız, bu yüzden bağlantı çerçevesi kullanmış.

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

Express sunucusu kullanarak ana bilgisayar statik HTML dosyaları için basit demo kodlarım!

Umarım sana yardımcı olur!

// 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}!
    `);
});