【问题标题】:How do I use HTML as the view engine in Express?如何在 Express 中使用 HTML 作为视图引擎?
【发布时间】:2013-07-28 11:41:11
【问题描述】:

我尝试从种子中进行这个简单的更改并创建了相应的 .html 文件(例如 index.html)。

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

这个文件保持不变:

exports.index = function(req, res){
  res.render('index');
};

但在跑步时我得到了

500 错误:找不到模块“html”

我唯一的选择是使用“ejs”吗?我的意图是结合 AngularJS 使用纯 HTML。

【问题讨论】:

标签: html node.js express


【解决方案1】:

其他链接上的答案会起作用,但要提供 HTML,根本不需要使用视图引擎,除非您想设置时髦的路由。相反,只需使用静态中间件:

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

【讨论】:

  • 我继续注释掉对 app.set('view engine', html) 的引用。然后我收到一条错误消息,提示“未指定默认引擎且未提供扩展名”,这是预期的。但是当我将 res.render("index") 更改为 res.render("index.html") 时,出现以下错误:TypeError: Property 'engine' of object # is not a function。跨度>
  • 没有更多的视图引擎,所以我认为res.render() 不会再工作了。相反,将您的原始 HTML 文件放在 public 中,让静态中间件直接处理这些文件。如果您需要比这更高级的路线,您可以设置自己的 HTML 视图引擎。
  • 那么你在 app.get() 调用中写了什么?
  • @ajbraus 你根本不需要 app.get() 调用。这将直接提供您在 /public 文件夹中的任何 html 文件。所以在浏览器中,你直接指向html就行了……基本上没有路由
  • 我遇到的问题是,如果您在加载页面后刷新页面,则会显示错误消息:未指定默认引擎且未提供扩展名。那么如果你使用 Auth, {provide: LocationStrategy, useClass: HashLocationStrategy} ],它会在你的 url 中添加一个哈希值,这对于其他原因来说是很痛苦的。有没有办法解决这个问题?
【解决方案2】:

为你的服务器配置试试这个

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

那么您的路由回调函数将如下所示:

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

【讨论】:

    【解决方案3】:

    通过路由到服务器html页面,我已经做到了。

    var hbs = require('express-hbs');
    app.engine('hbs', hbs.express4({
      partialsDir: __dirname + '/views/partials'
    }));
    app.set('views', __dirname + '/views');
    app.set('view engine', 'hbs');
    

    并将我的 .html 文件重命名为 .hbs 文件 - 车把支持纯 html

    【讨论】:

      【解决方案4】:

      要让渲染引擎接受html而不是jade,您可以按照以下步骤操作;

      1. consolidateswig 安装到您的目录。

         npm install consolidate
         npm install swig
        
      2. 将以下行添加到您的 app.js 文件中

        var cons = require('consolidate');
        
        // view engine setup
        app.engine('html', cons.swig)
        app.set('views', path.join(__dirname, 'views'));
        app.set('view engine', 'html');
        
      3. 将您的视图模板作为 .html 添加到“views”文件夹中。重新启动节点服务器并在浏览器中启动应用程序。

      虽然这会毫无问题地呈现 html,但我建议您通过学习来使用 JADE。 Jade 是一个了不起的模板引擎,学习它可以帮助您实现更好的设计和可扩展性。

      【讨论】:

      • 没有方法 'engine' - 在所有步骤之后
      • 您使用的是哪个版本的 express? Express 4.x 包含 app.engine API。更多信息是@expressjs.com/en/api.html#app.engine
      • 效果很好!我喜欢一年前的答案第一次起作用。
      • 为什么它仍然无法渲染我的 css 和其他
      【解决方案5】:

      可以使用 ejs 引擎渲染 HTML 文件:

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

      并确保“/views”下的文件以“.ejs”命名。

      例如“index.ejs”。

      【讨论】:

      • 它可以工作,但感觉有点hacky。您知道使用 .ejs 代替 .html 是否有任何注意事项?为可能建议的最快修复干杯!
      【解决方案6】:

      在你的 apps.js 中添加

      // view engine setup
      app.set('views', path.join(__dirname, 'views'));
      app.engine('html', require('ejs').renderFile);
      app.set('view engine', 'html');
      

      现在您可以使用 ejs 视图引擎,同时将视图文件保留为 .html

      来源:http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

      你需要安装这两个包:

      npm install ejs --save
      npm install path --save
      

      然后导入需要的包:

      var path = require('path');
      


      这样您可以将视图保存为 .html 而不是 .ejs
      在使用支持 html 但不识别 ejs 的 IDE 时非常有用。

      【讨论】:

      • app.set('views', path.join(__dirname, '/path/to/your/folder')); app.set("查看选项", {layout: false}); app.engine('html', function(path, opt, fn) { fs.readFile(path, 'utf-8', function(error, str) { if (error) return str; return fn(null, str) ; }); });
      【解决方案7】:

      如果您想将 Angular 与简单的纯 html 文件一起使用,则不需要视图引擎。这是如何做到的: 在您的route.js 文件中:

      router.get('/', (req, res) => {
         res.sendFile('index.html', {
           root: 'yourPathToIndexDirectory'
         });
      });
      

      【讨论】:

      • 绝对是最简单的解决方案。我没有安装/配置视图引擎并发送了 html。
      【解决方案8】:

      要让渲染引擎接受html而不是jade,您可以按照以下步骤操作;

      Install consolidate and swig to your directory.
      
       npm install consolidate
       npm install swig
      
      add following lines to your app.js file
      
      var cons = require('consolidate');
      
      // view engine setup
      app.engine('html', cons.swig)
      app.set('views', path.join(__dirname, 'views'));
      app.set('view engine', 'html');
      
      add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.
      

      这应该可以工作

      【讨论】:

        【解决方案9】:

        答案很简单。 您必须使用 app.engine('html') 来呈现 *.html 页面。 试试这个。它一定能解决问题。

        app.set('views', path.join(__dirname, 'views'));
        **// Set EJS View Engine**
        app.set('view engine','ejs');
        **// Set HTML engine**
        app.engine('html', require('ejs').renderFile);
        

        .html 文件将起作用

        【讨论】:

        • 答案不完整。这些变化是在哪里进行的?假设 app.js 但您的答案需要具体。此外,这可能不是所有需要更改的,因为仅进行这三个更改/添加的结果是“找不到模块'ejs'”。您的答案可能很接近,但您需要添加更多信息恕我直言。
        • 另外,渲染与提供文件不同。渲染需要服务器预处理文件并将任何动态内容添加到渲染方法中。也许这就是 OP 想要的,但有些人将渲染与服务混为一谈。非常不同的概念。
        • @wade 用于渲染 html 文件而不是 ejs 文件。
        【解决方案10】:

        试试这个简单的解决方案,它对我有用

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

        【讨论】:

        • 你应该添加你所有的行,这本身是行不通的。
        【解决方案11】:

        我推荐使用https://www.npmjs.com/package/express-es6-template-engine - 极光波和极快的模板引擎。这个名字有点误导,因为它也可以在没有 expressjs 的情况下工作。

        在您的应用程序中集成express-es6-template-engine 所需的基础知识非常简单且易于实现:

        const express = require('express'),
          es6Renderer = require('express-es6-template-engine'),
          app = express();
          
        app.engine('html', es6Renderer);
        app.set('views', 'views');
        app.set('view engine', 'html');
         
        app.get('/', function(req, res) {
          res.render('index', {locals: {title: 'Welcome!'}});
        });
         
        app.listen(3000);
        这是位于“views”目录中的index.html 文件的内容:
        <!DOCTYPE html>
        <html>
        <body>
            <h1>${title}</h1>
        </body>
        </html>
        

        【讨论】:

        • 这几乎让我进入了 React 页面的服务器端渲染,所有的一页 HTML/CSS/JS/React。我没有意识到我现在实际上可以在我的 React 渲染中执行 &lt;div&gt;${customer.name}&lt;/div&gt; !我希望我能找到如何提取{locals: { rows: [ ]} 来绘制一组元素。有什么线索吗?
        【解决方案12】:

        html 不是视图引擎,但 ejs 提供了在其中编写 html 代码的可能性

        【讨论】:

          【解决方案13】:

          注释掉html的中间件,即

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

          改为使用:

          app.get("/",(req,res)=>{
              res.sendFile("index.html");
          });
          

          【讨论】:

            【解决方案14】:

            安装ejs模板

            npm install ejs --save

            在 app.js 中引用 ejs

            app.set('views', path.join(__dirname, 'views'));`
            app.set('view engine', 'ejs');
            

            在views/indes.ejs 等视图中创建ejs 模板并在路由器中使用ejs 模板

            router.get('/', function(req, res, next) {
                res.render('index', { title: 'Express' });
            });
            

            【讨论】:

              【解决方案15】:

              在 swig 的帮助下渲染 html 模板。

              //require module swig    
                  var swig = require('swig');
              
              // view engine setup    
                  app.set('views', path.join(__dirname, 'views'));
                  app.engine('html', swig.renderFile);
                  app.set('view engine', 'html');
              

              【讨论】:

                【解决方案16】:

                Html 文件不需要渲染。
                渲染引擎所做的是将不是 Html 文件的文件转换为 Html 文件。
                要发送 Html 文件,只需:

                res.sendFile("index.html");
                

                您可能需要使用 __dirname+"/index.html",以便 express 知道确切的路径。

                【讨论】:

                  猜你喜欢
                  • 2020-02-01
                  • 1970-01-01
                  • 2012-07-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2013-05-04
                  相关资源
                  最近更新 更多