Визуализировать базовый вид HTML?

239

У меня есть базовое приложение node.js, которое я пытаюсь получить с помощью платформы Express. У меня есть папка views, где у меня есть файл index.html. Но при загрузке веб-браузера я получаю следующую ошибку.

Ошибка: не удается найти модуль 'html'

Ниже мой код.

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

app.use(express.staticProvider(__dirname + '/public'));

app.get('/', function(req, res) {
    res.render('index.html');
});

app.listen(8080, '127.0.0.1')

Что мне здесь не хватает?

Теги:
express
view

26 ответов

287
Лучший ответ

В jade можно добавить обычную HTML-страницу:

в views/index.jade

include plain.html

в представлениях /plain.html

<!DOCTYPE html>
...

и app.js все равно могут просто выполнить jade:

res.render(index)
  • 1
    Просто хочу отметить, что мне нужно было обслуживать только один файл .html, потому что мое приложение было одной страницей;)
  • 0
    Этот ответ отлично. Заметьте, что вы также можете продолжать использовать макет и просто поместить его в блок контента.
Показать ещё 5 комментариев
205

Многие из этих ответов устарели.

Используя экспресс 3.0.0 и 3.1.0, следующие работы:

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);

См. комментарии ниже для альтернативного синтаксиса и оговорок для express 3.4 +:

app.set('view engine', 'ejs');

Затем вы можете сделать что-то вроде:

app.get('/about', function (req, res)
{
    res.render('about.html');
});

Предполагается, что у вас есть свои представления в подпапке views, и вы установили модуль ejs node. Если нет, запустите на консоли node следующее:

npm install ejs --save
  • 1
    спасибо Дрю, это прекрасно работает с 3.1.0
  • 0
    @MichaelDausmann, ура, я включил эту информацию в ответ.
Показать ещё 8 комментариев
65

Из руководства Express.js: Просмотр рендеринга

Просмотр имен файлов принимает форму Express.ENGINE, где ENGINE - это имя модуля, который потребуется. Например, представление layout.ejs сообщит системе просмотра require('ejs'), загружаемый модуль должен экспортировать метод exports.render(str, options), чтобы соответствовать Express, однако app.register() можно использовать для сопоставления движков для расширения файлов, так что, например, foo.html может быть рендерингом jade.

Итак, либо вы создаете свой собственный простой рендерер, либо просто используете jade:

 app.register('.html', require('jade'));

Подробнее о app.register.

Обратите внимание, что в Express 3 этот метод переименовывается app.engine

  • 57
    Примечание - app.register был переименован в app.engine в Express 3.
  • 8
    Смотрите ответ от Эндрю Хомейера. Это фактический ответ.
Показать ещё 2 комментария
43

попробуйте это. он работает для меня.

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

  // make a custom html template
  app.register('.html', {
    compile: function(str, options){
      return function(locals){
        return str;
      };
    }
  });
});

....

app.get('/', function(req, res){
  res.render("index.html");
});
  • 2
    У меня были проблемы с точной конфигурацией, описанной выше, поэтому я удалил точку из «.html» и добавил: app.set ('view engine', 'html'); app.set ('views', __dirname + '/ views'); для идеального рендера
  • 8
    Это немного странно ... вы должны использовать HTML как статические файлы. Это также дает вам преимущество лучшего кэширования. Создание собственного "HTML-компилятора" кажется неправильным. Если вам нужно отправить файл из маршрута (что вам очень редко требуется), просто прочитайте и отправьте его. В противном случае просто перенаправить на статический HTML.
Показать ещё 5 комментариев
33

Вы также можете прочитать html файл и отправить его.

app.get('/', function(req, res) {
    fs.readFile(__dirname + '/public/index.html', 'utf8', function(err, text){
        res.send(text);
    });
});
  • 0
    должен быть res.send (), верно?
  • 0
    @barraponto обновлен, спасибо
Показать ещё 7 комментариев
16

Если вы используете express@~3.0.0, измените строку ниже в своем примере:

app.use(express.staticProvider(__dirname + '/public'));

примерно так:

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

Я сделал это, как описано на выражать страницу api, и это работает как шарм. С этой настройкой вам не нужно писать дополнительный код, чтобы он стал достаточно простым для вашего микропроизводства или тестирования.

Полный код, указанный ниже:

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

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res) {
    res.render('index.html');
});

app.listen(8080, '127.0.0.1')
  • 1
    Почему вы повторяете app.use(express.static(__dirname + '/public')); после запуска сервера с app.listen ?
  • 0
    Вы не на самом деле. Виноват. Просто исправил это.
Показать ещё 1 комментарий
16
app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});
  • 5
    sendfile не является кешем в производственном режиме, так что это не очень хорошее решение.
  • 0
    @SeymourCakes Пожалуйста, поправьте меня, если я ошибаюсь, но я думаю, что sendFile теперь поддерживает кэширование: devdocs.io/express/index#res.sendFile
14

Я также столкнулся с той же проблемой в express 3.X и node 0.6.16. Вышеупомянутое решение не будет работать для последней версии express 3.X. Они удалили метод app.register и добавили метод app.engine. Если вы попробовали вышеуказанное решение, вы можете получить следующую ошибку.

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
    at Function.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:37:5)
    at Function.configure (/home/user1/ArunKumar/firstExpress/node_modules/express/lib/application.js:399:61)
    at Object.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:22:5)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)
    at Function._load (module.js:308:12)
    at Array.0 (module.js:479:10)
    at EventEmitter._tickCallback (node.js:192:40)

Чтобы избавиться от сообщения об ошибке. Добавьте следующую строку в app.configure function

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

Примечание: вам нужно установить ejs engine engine

npm install -g ejs

Пример:

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

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

....

app.get('/', function(req, res){
  res.render("index.html");
});

Примечание.. Простейшим решением является использование шаблона ejs в качестве механизма просмотра. Там вы можете написать raw HTML в файлах *.ejs view.

  • 2
    Нужно ли устанавливать ejs всему миру?
  • 0
    это говорит мне, что не может найти файл index.html
7

Если вам не нужно использовать каталог views, просто переместите html файлы в каталог public ниже.

а затем добавьте эту строку в app.configure вместо '/views'.

server.use(express.static(__dirname + '/public'));
4
Структура папки

:

.
├── index.html
├── node_modules
│   ├──{...}
└── server.js

server.js

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

app.use(express.static('./'));

app.get('/', function(req, res) {
    res.render('index.html');
});

app.listen(8882, '127.0.0.1')

index.html

<!DOCTYPE html>
<html>
<body>

<div> hello world </div>

</body>
</html>

вывод:

привет мир

4

Для моего проекта я создал эту структуру:

index.js
css/
    reset.css
html/
    index.html

Этот код обслуживает index.html для запросов / и reset.css для /css/reset.css запросов. Достаточно простая и лучшая часть состоит в том, что она автоматически добавляет заголовки кэша.

var express = require('express'),
    server = express();

server.configure(function () {
    server.use('/css', express.static(__dirname + '/css'));
    server.use(express.static(__dirname + '/html'));
});

server.listen(1337);
3

Чтобы отобразить страницу Html в node, попробуйте следующее,

app.set('views', __dirname + '/views');

app.engine('html', require('ejs').renderFile);
  • Вам нужно установить модуль ejs через npm, например:

       npm install ejs --save
    
  • 0
    Это решение сработало для меня. Хотя я тоже попробовал статический вариант. Можете ли вы объяснить механизм, стоящий за этим. Спасибо!
3

Попробуйте функцию res.sendFile() в маршрутах Express.

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


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

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

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

app.listen(3000);

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

Читайте здесь: http://codeforgeek.com/2015/01/render-html-file-expressjs/

3

Я добавил ниже 2 строки, и это работает для меня

    app.set('view engine', 'html');
    app.engine('html', require('ejs').renderFile);
  • 0
    это выдает мне следующую ошибку: «Ошибка: не удается найти модуль 'ejs' в Function.Module._resolveFilename (module.js: 338: 15) в Function.Module._load (module.js: 280: 25) в Module.require ( module.js: 364: 17) по требованию («module.js: 380: 17)»
  • 0
    @LygubOrg запустите npm install ejs --save в вашем рабочем каталоге.
Показать ещё 1 комментарий
3

С Express 4.0.0 вам нужно только прокомментировать 2 строки в app.js:

/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.

И затем поместите свой статический файл в каталог /public. Пример:/public/index.html

2

Вот полная демонстрационная версия экспресс-сервера!

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

Я не хотел зависеть от ejs для просто доставки HTML файла, поэтому я просто написал крошечный рендеринг:

const Promise = require( "bluebird" );
const fs      = Promise.promisifyAll( require( "fs" ) );

app.set( "view engine", "html" );
app.engine( ".html", ( filename, request, done ) => {
    fs.readFileAsync( filename, "utf-8" )
        .then( html => done( null, html ) )
        .catch( done );
} );
2
res.sendFile(__dirname + '/public/login.html');
2

Я пытался настроить приложение angular с помощью экспресс-API RESTful и приземлялся на этой странице несколько раз, хотя это не помогло. Вот что я нашел, что сработало:

app.configure(function() {
    app.use(express.static(__dirname + '/public'));         // set the static files location
    app.use(express.logger('dev'));                         // log every request to the console
    app.use(express.bodyParser());                          // pull information from html in POST
    app.use(express.methodOverride());                      // simulate DELETE and PUT
    app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});

Затем в обратном вызове для ваших маршрутов api выглядит так: res.jsonp(users);

Структура вашей клиентской стороны может обрабатывать маршрутизацию. Express предназначен для обслуживания API.

Мой домашний маршрут выглядит следующим образом:

app.get('/*', function(req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});
2

1) Лучший способ - установить статическую папку. В основном файле (app.js | server.js |???):

app.use(express.static(path.join(__dirname, 'public')));

публичный/CSS/form.html
общественный /CSS/style.css

Затем вы получаете статический файл из "общедоступной" папки:

http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css

2)

Вы можете создать свой кеш файлов.
Использовать метод fs.readFileSync

var cache = {};
cache["index.html"] = fs.readFileSync( __dirname + '/public/form.html');

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

Добавьте в свой код следующие строки

  • Замените "jade" на "ejs" и "X.Y.Z" (версия) с помощью "*" в файле package.json

      "dependencies": {
       "ejs": "*"
      }
    
  • Затем в файле app.js добавьте следующий код:

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

    app.set('view engine', 'html');

  • И запомните все файлы .HTML в представлениях Папка

Приветствия:)

0

В server.js укажите

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


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});
0

Я хотел разрешить запросы "/" обрабатываться с помощью экспресс-маршрута, где ранее они обрабатывались промежуточным программным обеспечением statics. Это позволит мне отображать обычную версию index.html или версию, которая загружает конкатенированные + миниатюрные JS и CSS в зависимости от настроек приложения. Вдохновленный ответом Andrew Homeyer, я решил перетащить файлы HTML - немодифицированные - в папку представлений, настроить Express так

   app.engine('html', swig.renderFile);
   app.set('view engine', 'html');
   app.set('views', __dirname + '/views');  

И создал такой обработчик маршрута

 app.route('/')
        .get(function(req, res){
            if(config.useConcatendatedFiles){
                return res.render('index-dist');
            }
            res.render('index');       
        });

Это получилось довольно неплохо.

0

Я обычно использую этот

app.configure(function() {
    app.use(express.static(__dirname + '/web'));
});

Просто будьте осторожны, потому что это будет передавать что-либо в каталоге /web.

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

-1

если вы используете express framework для node.js

установить npm ejs

затем добавьте файл конфигурации

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router)

;

отобразить страницу из модуля экспорта form.js иметь html файл в представлениях dir  с расширением имени файла ejs как form.html.ejs

затем создайте форму.

res.render('form.html.ejs');

-5

//@Ошибка: не удается найти модуль 'html'

//.. файл находится где-то еще!!!

console.log('Current uri: ' + uri); // u are lookin for this file
console.log('Current directory: ' + process.cwd()); //!!!>>> Current directory: c:\Program Files\nodejs\node_modules

// put into working dir
console.log('Starting directory: ' + process.cwd());
try {
  process.chdir('c:\\3W\\JavaScript\\node.js\\x4node\\sampleDir');
  console.log('New directory: ' + process.cwd()); //!!!>>> New directory: c:\3W\JavaScript\node.js\x4node\sampleDir
}
catch (err) {
  console.log('chdir: ' + err);
}
// try this to see where u are!
// (process.cwd@http://nodejs.org/docs/latest/api/index.html)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню