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

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

Ответы

Ответ 1

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

в views/index.jade

include plain.html

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

<!DOCTYPE html>
...

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

res.render(index)

Ответ 2

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

Используя экспресс 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

Ответ 3

Из руководства 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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

Я также столкнулся с той же проблемой в 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.

Ответ 9

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

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

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

Ответ 10

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

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

вывод:

привет мир

Ответ 11

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

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

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

Вам нужно установить модуль ejs через npm, например:
```
   npm install ejs --save
```

Ответ 12

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

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

Ответ 13

С 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

Ответ 14

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

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

Ответ 15

Попробуйте функцию 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/

Ответ 16

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

Ответ 17

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

Вы можете создать свой кеш файлов.
Использовать метод 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"] );                                
};);

Ответ 18

Я пытался настроить приложение 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)
});

Ответ 19

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

Ответ 20

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

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

Ответ 21

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

Замените "jade" на "ejs" и "X.Y.Z" (версия) с помощью "*" в файле package.json
```
  "dependencies": {
   "ejs": "*"
  }
```
Затем в файле app.js добавьте следующий код:

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

app.set('view engine', 'html');
И запомните все файлы .HTML в представлениях Папка

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

Ответ 22

app.get('/', function(req, res, next) {
    res.send('
        <html>
            <body>
                <h1>My Server</h1>
            </body>
        </html>
    ')
});

Ответ 23

Я хотел разрешить запросы "/" обрабатываться с помощью экспресс-маршрута, где ранее они обрабатывались промежуточным программным обеспечением 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');       
        });

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

Ответ 24

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

Ответ 25

Если вы пытаетесь обработать 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));

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

Ответ 26

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

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

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

Ответ 27

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>

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

node index.js

Ответ 28

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

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

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

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

Ответ 29

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

Ответ 30

//@Ошибка: не удается найти модуль '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!
// ([email protected]://nodejs.org/docs/latest/api/index.html)