Đang tải HTML cơ bản trong Node.js

Tôi đang cố gắng tìm hiểu cách tải và hiển thị tệp HTML cơ bản để tôi không phải viết mã như:

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

Tôi chỉ tìm thấy một cách sử dụng thư viện fs . Tôi không chắc chắn nếu nó là sạch nhất mặc dù.

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

Khái niệm cơ bản chỉ là đọc tệp thô và bỏ nội dung. Vẫn mở cho các tùy chọn sạch hơn, mặc dù!

sử dụng app.get để lấy tệp html. nó đơn giản !!

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

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

Nó đơn giản như vậy. Đối với điều này sử dụng mô-đun express. Cài đặt nhanh:npm install express -g

Bạn có thể lặp lại các tệp theo cách thủ công bằng cách sử dụng đối tượng fs, nhưng tôi khuyên bạn nên sử dụng khung ExpressJS để làm cho cuộc sống của bạn dễ dàng hơn nhiều.

... Nhưng nếu bạn khăng khăng thực hiện nó một cách khó khăn:

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

Tôi biết đây là một câu hỏi cũ, nhưng vì không ai đề cập đến nó, tôi nghĩ rằng nó đáng để thêm vào:

Nếu bạn thực sự muốn phân phát nội dung tĩnh (giả sử trang 'about', hình ảnh, css, v.v.), bạn có thể sử dụng một trong các mô-đun phục vụ nội dung tĩnh, ví dụ như nút tĩnh. (Có những thứ khác có thể tốt hơn / tệ hơn - hãy thử tìm kiếm.npmjs.org.) Với một chút xử lý trước, bạn có thể lọc các trang động từ tĩnh và gửi chúng đến trình xử lý yêu cầu phù hợp.

Đây có thể là một số điều tốt hơn vì bạn sẽ truyền phát (các) tệp thay vì tải tất cả vào bộ nhớ như 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);

Đây là bản cập nhật cho câu trả lời của Muhammed Neswine

Trong Express 4.x, sendfile không được dùng nữa và hàm sendFile phải được sử dụng. Sự khác biệt là sendfile có đường dẫn tương đối và sendFile có đường dẫn tuyệt đối. Vì vậy, __dirname được sử dụng để tránh mã hóa đường dẫn.

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

Đó là cách linh hoạt và đơn giản hơn để sử dụng pipephương pháp.

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

Cách tốt nhất tôi học được là sử dụng express với các tệp html vì express mang lại rất nhiều lợi thế. Ngoài ra, bạn có thể mở rộng nó sang nền tảng Heroku nếu bạn muốn..Chỉ cần nói :)

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

Sạch sẽ và tốt nhất .. !!!

Cách dễ dàng là làm, đặt tất cả các tệp của bạn bao gồm index.html hoặc một cái gì đó với tất cả các tài nguyên như CSS, JS, v.v. vào một thư mục công khai hoặc bạn có thể đặt tên cho nó bất cứ điều gì bạn muốn và bây giờ bạn có thể sử dụng express js và chỉ cần nói với ứng dụng để sử dụng _dirname như:

Trong server.js của bạn bằng cách sử dụng express add

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

và nếu bạn muốn có thư mục riêng biệt, hãy thêm thư mục mới vào thư mục chung và sử dụng đường dẫn đó "/ public / YourDirName"

Vậy chính xác những gì chúng ta đang làm ở đây? chúng tôi đang tạo ứng dụng có tên thể hiện rõ ràng và chúng tôi sẽ cung cấp cho địa chỉ nếu thư mục công cộng truy cập tất cả các tài nguyên. Hi vọng điêu nay co ich !

Làm thế nào về việc sử dụng mô-đun express?

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

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

    app.listen('8000');

sau đó, bạn có thể sử dụng trình duyệt để nhận / localhost: 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 ");

Tôi nghĩ rằng đây sẽ là một tùy chọn tốt hơn vì nó hiển thị URL đang chạy máy chủ:

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

Bạn cũng có thể sử dụng đoạn trích này:

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

Nó thực sự đơn giản nếu bạn sử dụng đường ống. Sau đây là đoạn mã server.js.

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

Tôi biết đây là một câu hỏi cũ - đây là một tiện ích máy chủ tệp đơn giản nếu bạn không muốn sử dụng kết nối hoặc thể hiện; mà là mô-đun 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')
         }  
    })
}

sử dụng ejs thay vì ngọc

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

Đây là một câu hỏi khá cũ ... nhưng nếu trường hợp sử dụng của bạn ở đây chỉ đơn giản là gửi một trang HTML cụ thể đến trình duyệt trên cơ sở đặc biệt, tôi sẽ sử dụng một cái gì đó đơn giản như thế này:

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

chúng ta có thể tải tài liệu html với kết nối khung làm việc. Tôi đã đặt tài liệu html của mình và các hình ảnh liên quan vào thư mục công cộng của dự án nơi có các mô-đun mã và nút bên dưới.

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

Tôi đã thử phương thức readFile () của fs, nhưng không tải được hình ảnh, đó là lý do tại sao tôi đã sử dụng khung kết nối.

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

Đây là mã demo đơn giản của tôi để lưu trữ các tệp HTML tĩnh bằng cách sử dụng máy chủ Express!

Hy vọng nó sẽ giúp cho bạn!

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