Загрузка базового HTML в Node.js

Question

Просто попробуйте Node.js noob здесь. Я пытаюсь выяснить, как загрузить и «отобразить» базовый HTML-файл, поэтому мне не нужно писать код, например, response.write('...<p>blahblahblah</p>...');.

Answer 1

Я только что нашел один путь с использованием fs library. Я не уверен, что это самое чистое.

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

Основная концепция - это просто чтение сырых файлов и сброс содержимого. Тем не менее, открытые для более чистых вариантов, хотя!

Answer 2

Вы можете эхо-файлы вручную, используя объект fs, но я бы рекомендовал использовать рамки ExpressJS, чтобы сделать вашу жизнь намного проще.

... Но если вы настаиваете на том, это трудный путь:

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

Answer 3

Я знаю, что это старый вопрос, но так как никто не упомянул об этом, я подумал, что стоит добавить:

Если вы в буквальном смысле хотите обслуживать статический контент (скажем, «о» странице, изображении, css и т. Д.), Вы можете использовать один из компонентов, обслуживающих статический контент, например node-static. (Есть другие, которые могут быть лучше/хуже - попробуйте search.npmjs.org.) С небольшим количеством предварительной обработки вы можете отфильтровать динамические страницы из статики и отправить их в нужный обработчик запросов.

Answer 4

Возможно, это будет лучше, поскольку вы будете передавать файлы, а не загружать их все в память, например 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); 

Answer 5

мы можем загрузить html-документ с помощью работы с рамой. Я разместил свой html-документ и связанные с ним изображения в общей папке моего проекта, где присутствуют приведенные ниже модули кода и узла.

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

Я попробовал метод ReadFile() из фс, но это не удается загрузить изображения, поэтому я использовал соединять рамки.

Answer 6

Я знаю, что это старый вопрос - вот простая утилита файлового сервера, если вы предпочитаете не использовать connect или express; а скорее 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') 
     } 
    }) 
} 

Answer 7

Это довольно старый вопрос ... но если ваш случай использования здесь просто послать определенный HTML-страницу в браузере на специальной основе, я хотел бы использовать что-то простое, как это:

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

Answer 8

Используйте app.get, чтобы получить файл html. это просто!!

app.get('/', function(request, response){ 
    response.sendfile('yourhtmlpagename.html'); 
}); 

его просто так. Для этого используйте экспресс-модуль. Установите экспресс: npm install express -g

Answer 9

Это обновление Muhammed Neswine's answer

Экспресс 4.x, SendFile устарела и SendFile функция должна быть использована. Разница заключается в том, что sendfile принимает относительный путь, а sendFile - абсолютный путь.Таким образом, __dirname используется, чтобы избежать жесткого кодирования пути.

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

Answer 10

использование EJS вместо нефрита

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

Answer 11

Лучший способ, которым я научился, использовать экспресс с html-файлами, поскольку экспресс дает много преимуществ. Также вы можете расширить его на платформу Heroku, если хотите. Просто скажите :)

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

Чистота и лучшее .. !!!

Answer 12

Простой способ - поместить все ваши файлы, включая index.html или что-то со всеми ресурсами, такими как CSS, JS и т. Д. В общую папку, или вы можете назвать ее как хотите, и теперь вы можете использовать express js и просто сказать приложению, чтобы использовать _dirname как:

в вашем server.js с помощью экспресса добавить эти

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

и если вы хотите иметь seprate каталог добавить новый реж под общим каталогом и используйте этот путь «/ public/YourDirName "

ТАК, что мы что вы здесь делаете? Мы создаем приложение с выраженным экземпляром с именем, и мы предоставляем адрес, если общий каталог имеет доступ ко всем ресурсам. Надеюсь, это поможет!

Answer 13

Как насчет использования экспресс-модуля?

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

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

    app.listen('8000'); 

затем, вы можете использовать браузер, чтобы получить/локальный: 8000

Answer 14

Я думаю, что это было бы лучшим вариантом, поскольку она показывает URL запуска сервера:

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

Answer 15

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

Вот мои простые демо-коды для статических файлов HTML-хоста с помощью Express-сервера!

надеюсь, что это поможет вам!

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

Answer 16

Это более гибкий и простой способ использовать 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...'); 

Answer 17

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