渲染基本HTML视图?

我有一个基本的Node.js应用程序，我试图使用Express框架启动。我有一个views文件夹，其中有一个index.html文件。但是我在加载网页时收到以下错误:

Error: Cannot find module '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')

我错过了什么?

517134 次浏览
小开

从Express.js指南:视图呈现

视图文件名采用Express.ENGINE的形式，其中ENGINE是所需模块的名称。例如，视图__ABC2将告诉视图系统require('ejs')，模块被加载必须导出方法exports.render(str, options)以符合Express，然而app.register()可用于将引擎映射到文件扩展名，因此，例如foo.html可以由jade渲染。

所以你要么创建自己的简单渲染器，要么使用jade:

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

关于app.register的更多的。

注意，在Express 3中，这个方法被重命名为app.engine

小开

你也可以读取HTML文件并发送它:

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

试试这个。这对我很管用。

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");
});
小开 
app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});
小开
最佳答案

你可以让jade包含一个普通的HTML页面:

在视图/ index.jade

include plain.html

在视图/ plain.html

<!DOCTYPE html>
...

而app.js仍然可以渲染jade:

res.render(index)
小开

对于我的项目，我创建了这样的结构:

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

这段代码为/请求提供index.html，为/css/reset.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 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视图文件。

小开

这些答案很多都已经过时了。

使用快捷3.0.0和3.1.0，以下工作:

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

请参阅下面的注释，了解表达式3.4+的替代语法和注意事项:

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

然后你可以这样做:

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

这里假设你的视图在views子文件夹中，并且你已经安装了ejs节点模块。如果不是，在Node控制台中执行以下命令:

npm install ejs --save
小开

如果你不需要使用的观点目录，只需将html文件移动到下面的公共目录。

然后，将这一行添加到app.configure中，而不是'/views'。

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

如果你正在使用express@ ~ 3.0.0，从你的例子中更改下面的行:

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

就像这样:

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

我做了在Express 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')
小开

我通常用这个

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

只是要小心，因为它会共享/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)

；

从exports模块form.js渲染页面 HTML文件在视图目录 扩展ejs文件名称为 form.html.ejs < / p >

然后创建form.js

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

小开
< p > 1) 最好的办法是设置静态文件夹。在你的主文件(app.js | server.js | ??):

app.use(express.static(path.join(__dirname, 'public')));
公共/ css / form.html < p > < br > 公共/ css / style.css < / p >

然后你从“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创建一个angular应用，并多次登陆这个页面，尽管它并没有什么帮助。以下是我发现有效的方法:

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

在Express 4.0.0中，你唯一要做的就是注释掉app.js中的两行:

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

然后将静态文件放到/public目录中。例如:/公共/ index . html

小开

我想允许对“/”的请求由Express路由处理，而以前它们是由静态中间件处理的。这将允许我渲染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');
});

结果很好。

小开

我添加以下2行，它为我工作

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

尝试Express routes中的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/

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

在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.
});
小开

向代码中添加以下行

  1. 把“jade”换成“ejs”&"X.Y.Z"(版本)，包中有"*"。json文件

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

  2. Then in your app.js File Add following Code :

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

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

  3. And Remember Keep All .HTML files in views Folder

Cheers :)

小开

我不想依赖于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 );
} );
小开

要在节点中呈现Html页面，请尝试以下操作，

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


app.engine('html', require('ejs').renderFile);
  • 你需要像这样通过npm安装ejs模块:

       npm install ejs --save
小开

这里是一个完整的文件演示的express服务器!

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

小开

文件夹结构:

.
├── 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文件，其中已经有它所有的内容在里面，那么它不需要被“渲染”，它只需要被“服务”。呈现是指在页面发送到浏览器之前让服务器更新或注入内容，并且它需要额外的依赖项，如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

小开

非常遗憾的是，大约到2020年，express还没有添加一种不使用response对象的sendFile方法来呈现HTML页面的方法。使用sendFile不是问题，但以path.join(__dirname, 'relative/path/to/file')的形式传递参数给它感觉不太对。为什么用户应该将__dirname连接到文件路径?默认情况下应该这样做。为什么服务器的根不能默认为项目目录?同样，仅仅为了呈现静态HTML文件而安装模板依赖也是不正确的。我不知道正确的方法来解决这个问题，但如果我必须提供一个静态HTML，那么我会这样做:

const PORT = 8154;


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


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


app.listen(PORT, () => {
console.log(`Server is listening at port http://localhost:${PORT}`);
});

上面的例子假设项目结构有一个views目录，静态HTML文件在其中。例如，假设views目录有两个名为index.html和about.html的HTML文件，然后要访问它们，我们可以访问:localhost:8153/index.html或localhost:8153/来加载index.html页面，localhost:8153/about.html来加载about.html。我们可以使用类似的方法来服务react/angular应用，将工件存储在views目录中，或者只使用默认的views0目录，并在server js中配置它，如下所示:

app.use(express.static('dist/<project-name>'));
小开

表达4.倍

发送.html文件，没有模板引擎…

//...
// Node modules
const path = require('path')
//...
// Set path to views directory
app.set('views', path.join(__dirname, 'views'))
/**
* App routes
*/
app.get('/', (req, res) => {
res.sendFile('index.html', { root: app.get('views') })
})
//...

.
├── node_modules
│
├── views
│   ├──index.html
└── app.js
小开

如果你想渲染HTML文件，你可以使用sendFile()方法而不使用任何模板引擎

const express =  require("express")
const path = require("path")
const app = express()
app.get("/",(req,res)=>{
res.sendFile(**path.join(__dirname, 'htmlfiles\\index.html')**)
})
app.listen(8000,()=>{
console.log("server is running at Port 8000");
})

我在htmlfile里面有一个HTML文件，所以我使用路径模块来渲染index.html路径是节点中的默认模块。如果你的文件是在根文件夹刚刚使用

res.sendFile(path.join(__dirname, 'htmlfiles\\index.html'))

在app.get()中，它将工作


提交答案