javascript - 渲染基本的 HTML 视图？

Question

我有一个基本的 node.js 应用程序，我正在尝试使用 Express 框架启动它。我有一个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')

我在这里想念什么？

score 312 · Accepted Answer

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

在意见/index.jade

include plain.html

在视图/plain.html

<!DOCTYPE html>
...

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

res.render(index)

score 246 · Accepted Answer

其中许多答案已经过时。

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

score 72 · Accepted Answer

来自 Express.js 指南：查看渲染

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

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

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

更多关于app.register.

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

score 58 · Accepted Answer

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

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

score 46 · Accepted Answer

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

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

score 26 · Accepted Answer

26

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

于 2011-11-30T14:04:15.137 回答

score 20 · Accepted Answer

如果您使用的是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')

score 14 · Accepted Answer

express 3.X我在and中也遇到了同样的问题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。

score 9 · Accepted Answer

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

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

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

score 9 · Accepted Answer

文件夹结构：

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

输出：

你好世界

score 7 · Accepted Answer

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

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

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

您需要ejs通过以下方式安装模块npm：
```
   npm install ejs --save
```

score 7 · Accepted Answer

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

score 6 · Accepted Answer

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

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

score 4 · Accepted Answer

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

score 4 · Accepted Answer

快递 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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

在 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/

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

2

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

于 2015-02-27T10:07:32.403 回答

score 2 · Accepted Answer

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

将 package.json 文件中的“jade”替换为“ejs”，将“XYZ”（版本）替换为“*”
```
  "dependencies": {
   "ejs": "*"
  }
```
然后在您的 app.js 文件中添加以下代码：

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

app.set('view engine', 'html');
并记住将所有 .HTML 文件保存在视图文件夹中

干杯:)

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

很遗憾，快到 2020 年了，express 还没有添加不使用对象的方法来渲染 HTML 页面sendFile的方法。response使用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和的 HTML 文件about.html，那么要访问它们，我们可以访问：localhost:8153/index.html或者只是localhost:8153/加载index.html页面并localhost:8153/about.html加载about.html. 我们可以使用类似的方法通过将工件存储在views目录中或仅使用默认dist/<project-name>目录并在服务器 js 中配置它来为 react/angular 应用程序提供服务，如下所示：

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

score 1 · Accepted Answer

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

就用这个：

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

score 0 · Accepted Answer

我想允许对“/”的请求由 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');       
        });

这效果很好。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

我通常用这个

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

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

我希望它有帮助

score -2 · Accepted Answer

如果您对 node.js 使用 express 框架

安装 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 文件，扩展名为 ejs 文件名 form.html.ejs

然后创建 form.js

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

javascript - 渲染基本的 HTML 视图？

31 回答 31

Related

Reference