"res.render"是什么,html文件长什么样子?

39

res.render 是做什么的?html 文件是什么样子的?

我的最终目标是将任意以逗号分隔的值从一个文本文件加载到 html 文件中(例如)。我只能推断出 view 是 html 文件,而回调函数给出该 html 文件。

以下是官方文档:http://expressjs.com/api.html#res.render

现在,在我找到的一些示例代码的情况下,有关使用 ejs(嵌入式 JavaScript)和 <% 以及 %> 的内容。

但如果我可以补充一下,我只是无能还是文档真的非常模糊,假定读者知道所有内容?我应该如何自行解决这个问题?是否有任何官方文档,以便我可以全面了解使用、优劣势以及陷阱?


编辑1

我只想补充说,我正在学习 node.js,但遇到了很多困难。是我太菜还是通用文档确实含糊不清?除了像上面那样糟糕的解释外,还没有关于参数或返回值的类型说明。


编辑2

在代码上面,让我问你一些更具体的问题。

实际的 orders.ejs 文件位于 views/orders.ejs。这段代码如何引用它?

HTML 摘录:

<tbody>
  <% for(var i=0; i<orders.length; i++) {%>
     <tr>
       <td><%= orders[i].id %></td>
       <td><%= orders[i].amount %></td>
       <td><%= orders[i].time %></td>
     </tr>
     <% } %>

请参见/orders,其中包括JS代码。

  // Define routes for simple SSJS web app. 
// Writes Coinbase orders to database.
var async   = require('async')
  , express = require('express')
  , fs      = require('fs')
  , http    = require('http')
  , https   = require('https')
  , db      = require('./models');

var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('port', process.env.PORT || 8080);

// Render homepage (note trailing slash): example.com/
app.get('/', function(request, response) {
  var data = fs.readFileSync('index.html').toString();
  response.send(data);
});

// Render example.com/orders
app.get('/orders', function(request, response) {
  global.db.Order.findAll().success(function(orders) {
    var orders_json = [];
    orders.forEach(function(order) {
      orders_json.push({id: order.coinbase_id, amount: order.amount, time: order.time});
    });
    // Uses views/orders.ejs
    response.render("orders", {orders: orders_json});
  }).error(function(err) {
    console.log(err);
    response.send("error retrieving orders");
  });
});

// Hit this URL while on example.com/orders to refresh
app.get('/refresh_orders', function(request, response) {
  https.get("https://coinbase.com/api/v1/orders?api_key=" + process.env.COINBASE_API_KEY, function(res) {
    var body = '';
    res.on('data', function(chunk) {body += chunk;});
    res.on('end', function() {
      try {
        var orders_json = JSON.parse(body);
        if (orders_json.error) {
          response.send(orders_json.error);
          return;
        }
        // add each order asynchronously
        async.forEach(orders_json.orders, addOrder, function(err) {
          if (err) {
            console.log(err);
            response.send("error adding orders");
          } else {
            // orders added successfully
            response.redirect("/orders");
          }
        });
      } catch (error) {
        console.log(error);
        response.send("error parsing json");
      }
    });

    res.on('error', function(e) {
      console.log(e);
      response.send("error syncing orders");
    });
  });

});

// sync the database and start the server
db.sequelize.sync().complete(function(err) {
  if (err) {
    throw err;
  } else {
    http.createServer(app).listen(app.get('port'), function() {
      console.log("Listening on " + app.get('port'));
    });
  }
});

// add order to the database if it doesn't already exist
var addOrder = function(order_obj, callback) {
  var order = order_obj.order; // order json from coinbase
  if (order.status != "completed") {
    // only add completed orders
    callback();
  } else {
    var Order = global.db.Order;
    // find if order has already been added to our database
    Order.find({where: {coinbase_id: order.id}}).success(function(order_instance) {
      if (order_instance) {
        // order already exists, do nothing
        callback();
      } else {
        // build instance and save
          var new_order_instance = Order.build({
          coinbase_id: order.id,
          amount: order.total_btc.cents / 100000000, // convert satoshis to BTC
          time: order.created_at
        });
          new_order_instance.save().success(function() {
          callback();
        }).error(function(err) {
          callback(err);
        });
      }
    });
  }
};

1
你对文档含糊不清的看法并没有错。也许当你有更多经验后,可以更新它们。我也想这么做,但我可能比你还缺乏经验。 - trysis
3个回答

36

res.render函数是用来做什么的?生成的html文件是什么样子的?

res.render() 函数会编译模板(请勿使用ejs),插入本地变量,并将这两个内容合成为html输出。


回答Edit 2部分。

// here you set that all templates are located in `/views` directory
app.set('views', __dirname + '/views');

// here you set that you're using `ejs` template engine, and the
// default extension is `ejs`
app.set('view engine', 'ejs');

// here you render `orders` template
response.render("orders", {orders: orders_json});

所以,模板路径是views/(第一部分)+ orders(第二部分)+ .ejs(第三部分)=== views/orders.ejs


总之,Express.js文档很好地完成了它的任务。它是API参考,而不是“如何使用node.js”书籍。


但是谁说render()使用“views”和“view engine”设置。文档中在哪里可以找到这个信息? - user2316667
1
http://expressjs.com/api.html 上说:views - 视图目录路径,默认为 "process.cwd() + '/views'" - alex
1
从同一份文档中:view engine - 默认情况下使用的引擎扩展名(当省略时) - alex
算了,这是个小问题,我稍后会通过测试解决。非常感谢!如果你看到这条消息,最后一个问题:render() 函数有描述吗?例如,没有上面的示例代码,我永远不会知道 'locals' 是一个被处理后渲染 HTML 文件的字典。 - user2316667
非常感谢。抱歉,那是一个愚蠢的问题,因为我本可以轻易地进行实验。不过我已经在上面编辑了我的评论,说明了我遇到的根本问题。我很难找到学习资源。 非常感谢您在设置中找到了视图和视图引擎。如果您也能为我找到render()的文档,因为我找了一个小时,只找到了示例代码。我的担心是我错过了整个信息库,我将继续遇到我不知道函数作用的问题。 - user2316667
显示剩余3条评论

6
渲染视图并将渲染后的HTML字符串发送给客户端。
res.render('index');

或者

res.render('index', function(err, html) {
  if(err) {...}
  res.send(html);
});

文档在这里:https://expressjs.com/en/api.html#res.render

0

我也遇到了res.render的问题,但它使用了模板引擎“pug”,当我更新了我的http://localhost:3007/auth/login时,它就是这样的。

我的路由如下:

router.get('/login', (req, res) => {res.render('auth/login)

现在通过新路由出现了这样的情况。

router.get('/login', (req, res) => {res.render('auth/login.pug')});

始终要检查我们文件所在的路径。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接