呈现基本的 HTML 视图?

IT技术 javascript html node.js mongodb express
2021-01-30 06:56:39

我有一个基本的 node.js 应用程序,我正在尝试使用 Express 框架启动它。我有一个views文件夹,里面有一个index.html文件。但是我在加载 Web 浏览器时收到以下错误。

错误:找不到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')

我在这里错过了什么?

6个回答

您可以让 jade 包含一个纯 HTML 页面:

在视图/index.jade

include plain.html

在视图/plain.html

<!DOCTYPE html>
...

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

res.render(index)
我们可以用这种方法包含多个 HTML/JS 页面吗?
2021-03-22 06:56:39
更多的是黑客而不是解决方案。
2021-03-30 06:56:39
那么我们是否必须为我们的每个 HTML 文件创建一个 jade 模板?
2021-04-02 06:56:39
难道您不应该能够在没有 jade 模板的情况下呈现该 html 页面,仅用于 express 的初始测试吗?
2021-04-09 06:56:39
请注意,我想要的只是提供一个 .html 文件,因为我的应用程序是单页的;)
2021-04-11 06:56:39

这些答案中有许多已经过时了。

使用 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节点module。如果没有,请在 Node 控制台上运行以下命令:

npm install ejs --save
您应该使用命令“npm install ejs --save”来更新您的 package.json
2021-03-14 06:56:39
使用 Express 3.4.2: app.set('view engine', 'ejs');
2021-03-28 06:56:39
为什么需要ejs?
2021-03-29 06:56:39
为什么 res.render 在这种情况下需要 .html 扩展名,但在 jade 的默认情况下不需要。使用样板代码,它只是调用 res.render('index', { title: 'Express' }); 但在这里,它是: res.render('about.html');
2021-04-02 06:56:39
@Transcendence,我不确定。也许你应该打开一个新问题。
2021-04-05 06:56:39

来自 Express.js 指南:视图渲染

视图文件名的格式为Express.ENGINE,其中ENGINE是所需module的名称。例如视图layout.ejs会告诉视图系统require('ejs'),被加载的module必须导出exports.render(str, options)符合Express的方法,但是app.register()可以用于将引擎映射到文件扩展名,以便例如foo.html可以通过jade进行渲染。

因此,要么创建自己的简单渲染器,要么只使用 jade:

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

更多关于app.register.

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

从其他一些答案中,对于 Express 4,我最终使用了 app.engine('.html', require('ejs').renderFile);
2021-03-20 06:56:39
请参阅 Andrew Homeyer 的回答。这是实际的答案。
2021-03-27 06:56:39
在 express 4 中,你也可以使用: app.set('view engine', 'jade');
2021-04-03 06:56:39
注意- app.register 已在 Express 3 中重命名为 app.engine。
2021-04-05 06:56:39

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

app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});
@MarcelFalliere 您假设他想要缓存文件,或者他不想使用自定义缓存解决方案。谢谢keegan3d 的回答。
2021-03-17 06:56:39
oop。这违背了面向约定的流线型架构(如 MVC)的全部意义。
2021-03-20 06:56:39
这个解决方案很糟糕,因为没有缓存文件;它为每个请求读取。
2021-03-21 06:56:39
手动缓存它可能很容易。只需将读取的文件存储一个变量,如果该变量为空,则只能再次读取。您还可以使用 JS 对象并将各种文件存储在各种变量中,并带有时间戳。当然,它的工作量比大多数人都多,但对不熟悉 node 的人来说很好。很容易理解
2021-04-04 06:56:39
@MarcelFalliere 那么,正确的解决方案是什么?我看到其他需要新依赖项的答案。是否只需要提供 html 文件?
2021-04-10 06:56:39

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

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");
});
@enyo,您错过了蒸汽内衬架构的重点。当模式是控制器/视图(或/处理器/视图,无论您的特定架构是什么)时,您都不能使用过时的扩展模型偏离它。您需要像其他所有内容一样将 HTML 视为呈现的内容。保持干燥,伙计。
2021-03-12 06:56:39
@Enyo 这个评论似乎很奇怪,考虑到如何做你所说的应该做的事情是被问到的问题,你的答案就是去做。你如何提供带有缓存的静态 html?
2021-03-14 06:56:39
这有点奇怪……您应该将 html 作为静态文件提供。这也为您提供了更好的缓存的好处。创建自定义的“html 编译器”似乎是错误的。如果您需要从路由内发送文件(您很少需要这样做),只需阅读并发送它。否则只需重定向到静态 html。
2021-03-18 06:56:39
我看到一个错误app.register也许它在 express 3.0.0.rc3 中已被弃用?TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
2021-03-30 06:56:39
上面的确切配置有问题,所以我从“.html”中删除了点并添加了这个: app.set('view engine', 'html'); app.set('views', __dirname + '/views'); 为了完美的渲染
2021-04-07 06:56:39