Определить базовый HTML -представление?

StackOverflow https://stackoverflow.com/questions/4529586

Вопрос

У меня есть базовое приложение Node.js, которое я пытаюсь выйти из земли, используя Express Framework. у меня есть 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')

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

Это было полезно?

Решение

Вы можете иметь нефрит, включив простую HTML -страницу:

в представлениях/index.jade

include plain.html

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

<!DOCTYPE html>
...

и app.js все еще может просто рендерировать нефрит:

res.render(index)

Другие советы

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

Используя Express 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 Узел модуль. Если нет, запустите следующее на консоли узла:

npm install ejs --save

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

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

Так что вы либо создаете свой собственный простой рендерер, либо просто используете Джейд:

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

Более о app.register.

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

попробуй это. меня устраивает.

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

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

app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});

app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});

Если вы используете 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')

Я также столкнулся с той же проблемой в 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 шаблонный двигатель

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 в качестве двигателя просмотра. Там вы можете написать необработанные html в *.ejs View Files.

Если вам не нужно использовать Просмотры каталог, просто переместите HTML -файлы в публичный каталог ниже.

И затем добавьте эту строку в app.configure вместо «/представления».

server.use(express.static(__dirname + '/public'));

Структура папки:

.
├── 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>

выход:

Привет, мир

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

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

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

  • Вам нужно установить ejs модуль через npm как:

       npm install ejs --save

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

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

Этот код служит index.html для / запросы и сбросить.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);

С 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 Directory. Пример: /public/index.html

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

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

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

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/

Я не хотел зависеть от 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 );
} );

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

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

public/css/form.html
public/css/style.css

Тогда у вас есть статический файл из папки "Public":

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

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

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

Ваша клиентская сторона может обрабатывать маршрутизацию. Экспресс для обслуживания 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)
});

res.sendFile(__dirname + '/public/login.html');

Вот полная демонстрация File of Express Server!

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

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

  1. Заменить «Джейд» на «EJS» и «XYZ» (версия) на «*» в файле package.json

      "dependencies": {
   "ejs": "*"
  }

  2. Затем в вашем файле app.js добавьте следующий код:

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

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

  3. И помните, что сохраняйте все файлы .html в папке представлений

Ваше здоровье :)

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

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

Это сработало довольно хорошо.

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

Если вы пытаетесь обслуживать HTML -файл, в котором уже есть все его контент, то он не должен быть «визуализирован», его просто нужно «обслуживать». Рендеринг - это когда у вас есть обновление сервера или внедрение контента до отправки страницы в браузер, и для этого требуется дополнительные зависимости, такие как EJS, как показывают другие ответы.

Если вы просто хотите направить браузер в файл на основе их запроса, вам следует использовать res.sendfile () как это:

const express = require('express');
const app = express();
var port = process.env.PORT || 3000; //Whichever port you want to run on
app.use(express.static('./folder_with_html')); //This ensures local references to cs and js files work

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/folder_with_html/index.html');
});

app.listen(port, () => console.log("lifted app; listening on port " + port));

Таким образом, вам не нужны дополнительные зависимости, кроме Express. Если вы просто хотите, чтобы сервер отправил свои уже созданные HTML -файлы, вышеупомянутый способ сделать это очень легкий способ.

Для простых HTML вам не требуется никакого пакета NPM или промежуточного программного обеспечения

Просто используйте это:

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

index.js

var Express = require ('Express'); var app = express (); app.use (express.static (__ dirname + '/public'));

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


app.listen(3400, () => {
    console.log('Server is running at port 3400');
})

Поместите свой файл index.html в публичную папку

<!DOCTYPE html>
<html>
<head>
    <title>Render index html file</title>
</head>
<body>
    <h1> I am from public/index.html </h1>
</body>
</html>

Теперь запустите следующий код в вашем терминале

Узел index.js

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

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

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

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

Если вы используете 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.html.ejs

затем создайте form.js

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top