渲染基本的 HTML 视图？

A

Andrew Homeyer

您可以让翡翠包含一个纯 HTML 页面：

在意见/index.jade

include plain.html

在视图/plain.html

<!DOCTYPE html>
...

并且 app.js 仍然可以只渲染玉：

res.render(index)

只是要注意，我想要的是只提供一个 .html 文件，因为我的应用程序是单页的；）

我们可以使用这种方法包含多个 HTML/JS 页面吗？

难道你不应该能够在没有翡翠模板的情况下渲染那个html页面，只是为了对快递进行初步测试吗？

那么我们是否必须为每个 HTML 文件创建一个翡翠模板？

更多的是破解而不是解决方案。

D

Drew Noakes

其中许多答案已经过时。

使用 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

为什么 res.render 在这种情况下需要 .html 扩展名，但在默认情况下不需要使用 jam。使用样板代码，它只调用 res.render('index', { title: 'Express' });但在这里，它是： res.render('about.html');

@Transcendence，我不确定。也许你应该提出一个新问题。

使用 Express 3.4.2：app.set('view engine', 'ejs');

您应该使用命令“npm install ejs --save”来更新您的 package.json

为什么需要ejs？

n

nbro

来自 Express.js 指南：View Rendering

查看文件名采用 Express.ENGINE 的形式，其中 ENGINE 是所需模块的名称。例如视图 layout.ejs 会告诉视图系统 require('ejs')，被加载的模块必须导出方法exports.render(str, options) 以符合Express，但是可以使用app.register()将引擎映射到文件扩展名，以便例如 foo.html 可以由jade呈现。

因此，要么创建自己的简单渲染器，要么只使用翡翠：

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

More 关于 app.register。

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

注意 - app.register 在 Express 3 中已重命名为 app.engine。

请参阅 Andrew Homeyer 的回答。这是实际的答案。

从其他答案来看，对于 Express 4，我最终使用了 app.engine('.html', require('ejs').renderFile);

在 express 4 中，您还可以使用：app.set('view engine', 'jade');

E

Edwin Pratt

您还可以阅读 HTML 文件并将其发送：

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

这个解决方案很糟糕，因为没有缓存文件；每个请求都会读取它。

手动缓存它可能很容易。只需将读取的文件存储为变量，如果该变量为空，则仅再次读取。您还可以使用 JS 对象并将各种文件存储在各种变量中，并带有时间戳。当然，它比大多数人所做的工作要多，但是对于刚接触节点的人来说，这很好。这很容易理解

哎呀。这违背了面向约定的流线型架构（如 MVC）的全部意义。

@MarcelFalliere您假设他想要缓存文件，或者他不想使用自定义缓存解决方案。谢谢keegan3d的回答。

@MarcelFalliere 那么，正确的解决方案是什么？我看到其他需要新依赖项的答案。是否只需要提供 html 文件？

s

spectrum

尝试这个。这个对我有用。

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.set('view engine', 'html'); app.set('views', __dirname + '/views');完美渲染

这有点奇怪......您应该将 html 作为静态文件提供。这也为您提供了更好的缓存的好处。创建自定义“html 编译器”似乎是错误的。如果您需要从路由中发送文件（您很少需要这样做），只需阅读并发送它。否则只需重定向到静态 html。

@Enyo 这个评论似乎很奇怪，考虑到如何做你所说的应该做的是被问到的问题，而你的答案就是去做。你如何提供带有缓存的静态 html？

我在 app.register 上看到一个错误。也许它在 express 3.0.0.rc3 中已被弃用？ TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'

@enyo，您错过了流线型架构的要点。当模式是控制器/视图（或/处理器/视图，无论您的具体架构是什么）时，您都不能使用过时的扩展模型偏离该模式。您需要将您的 HTML 视为呈现的内容，就像其他所有内容一样。保持干燥，伙计。

n

nod

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

sendfile 在生产模式下不缓存，所以这不是一个好的解决方案。

@SeymourCakes 如果我错了，请纠正我，但我认为 sendFile 现在支持缓存：devdocs.io/express/index#res.sendFile

n

nbro

如果您使用的是 express@~3.0.0，请从您的示例中更改以下行：

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

像这样：

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

我按照 express api page 中的描述制作了它，它就像魅力一样。使用该设置，您不必编写额外的代码，因此它可以很容易地用于您的微生产或测试。

完整代码如下：

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.listen 启动服务器后重复 app.use(express.static(__dirname + '/public'));？

将 html 页面作为静态服务与仅使用 express 加载非静态页面有什么区别？

p

phant0m

我在 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 模板作为视图引擎。在那里，您可以在 *.ejs 视图文件中编写原始 HTML。

是否必须全局安装 ejs？

它告诉我找不到“index.html”文件

K

KARTHIKEYAN.A

文件夹结构：

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

服务器.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')

索引.html

<!DOCTYPE html>
<html>
<body>

<div> hello world </div>

</body>
</html>

输出：

你好世界

s

spectrum

如果您不必使用views 目录，只需将html 文件移动到下面的公共目录即可。

然后，将此行添加到 app.configure 而不是“/views”中。

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

B

Bhargav Rao

如果你想渲染 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() 内它会起作用

C

Community

对于我的项目，我创建了这个结构：

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

server.configure 已弃用，因此直接使用 server.use

G

Geeky Ninja

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

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

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

您需要通过 npm 安装 ejs 模块，例如： npm install ejs --save

这个解决方案对我有用。虽然我也尝试过静态选项。你能解释一下它背后的机制吗？谢谢！

u

u84six

使用 Express 4.0.0，您唯一需要做的就是在 app.js 中注释掉 2 行：

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

然后将您的静态文件放入 /public 目录。示例：/public/index.html

D

Drozerah

快递 4.x

res.sendFile(路径 [, 选项] [, fn])

发送 .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

我不得不使用 var app = express(); app.set('views', path.join(__dirname, '../views'));。如果没有“../folderName”，它会在路由文件夹中查找。

N

Naren Chejara

我在 2 行以下添加，它对我有用

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

它给了我以下错误“错误：在 Function.Module._load (module.js:280:25) at Module.require ( module.js:364:17) 在需要 (module.js:380:17) "

@LygubOrg 在您的工作目录中运行 npm install ejs --save。

是否需要仅添加依赖项来提供 html 文件？

S

Shaikh Shahid

在 Express 路由中尝试 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/

O

Oliver Salzburg

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

T

Tomáš

1）最好的方法是设置静态文件夹。在您的主文件（app.js | server.js | ???）中：

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

public/css/form.html public/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"] );                                
};);

不错！这是一个完整的文件演示！ https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

C

Connor Leech

我试图用一个快速的 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);

您的客户端框架可以处理路由。 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)
});

A

Aleksandr M

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

A

Amulya Kashyap

将以下行添加到您的代码中

在 package.json 文件 "dependencies": { "ejs": "*" } 中用 "ejs" 和 "XYZ"(version) 替换 "jade": { "ejs": "*" } 然后在你的 app.js 文件中添加以下代码： engine('html', require('ejs').renderFile); app.set('视图引擎', 'html');并记住将所有 .HTML 文件保存在视图文件夹中

干杯:)

x

xgqfrms

这是快递服务器的完整文件演示！

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

希望对你有帮助！

// HTML 页面的简单快速服务器！ // ES6 风格 const express = require('express');常量 fs = 要求（'fs'）;常量主机名 = '127.0.0.1';常量端口 = 3000；常量应用程序 = 快递（）； let cache = [];// 数组没问题！缓存[0] = fs.readFileSync(__dirname + '/index.html');缓存[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(` 服务器运行在 http://${hostname}:${port}/ 服务器主机名 ${hostname} 正在监听端口 ${port}！` ); });

V

Vighnesh Raut

很遗憾，快到 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 页面和 { 8} 加载about.html。我们可以通过将工件存储在 views 目录中或仅使用默认 dist/<project-name> 目录并在服务器 js 中配置它来使用类似的方法来提供 react/angular 应用程序，如下所示：

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

P

Pavan Dittakavi

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>

现在在您的终端中运行以下代码

节点索引.js

S

Shivam Chhetri

对于纯 html，您不需要任何 npm 包或中间件

就用这个：

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

C

Community

我想允许对“/”的请求由 Express 路由处理，而之前它们由静态中间件处理。这将允许我渲染 index.html 的常规版本或加载连接 + 缩小 JS 和 CSS 的版本，具体取决于应用程序设置。受 Andrew Homeyer's answer 的启发，我决定将我的 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');       
        });

这效果很好。

s

shumana chowdhury

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

a

aleph_one

如果您尝试提供一个已经包含所有内容的 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 文件，那么上面是一种非常轻量级的方式。

D

DiogoNeves

我通常用这个

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

请小心，因为这将共享 /web 目录中的任何内容。

我希望它有帮助

渲染基本的 HTML 视图？

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们