如何使用 Express / Node.JS 创建可在所有视图中访问的全局变量？

Question

好的，所以我使用Jekyll 构建了一个博客，您可以在文件_config.yml 中定义变量，这些变量可在所有模板/布局中访问。我目前正在使用Node.JS / Express 与EJS 模板和ejs-locals（用于部分/布局。我正在寻找类似于site.title 之类的全局变量，如果有人在_config.yml 中找到熟悉 Jekyll。我有网站标题（而不是页面标题）、作者/公司名称等变量，这些变量在我的所有页面上都保持不变。

这是我目前正在做的一个例子。：

exports.index = function(req, res){
    res.render('index', { 
        siteTitle: 'My Website Title',
        pageTitle: 'The Root Splash Page',
        author: 'Cory Gross',
        description: 'My app description',
        indexSpecificData: someData
    });
};

exports.home = function (req, res) {
    res.render('home', {
        siteTitle: 'My Website Title',
        pageTitle: 'The Home Page',
        author: 'Cory Gross',
        description: 'My app description',
        homeSpecificData: someOtherData
    });
};

我希望能够在一个地方定义变量，如我的网站的标题、描述、作者等，并通过 EJS 在我的布局/模板中访问它们，而不必将它们作为选项传递给每次调用 res.render .有没有办法做到这一点并且仍然允许我传递特定于每个页面的其他变量？

Answer 1

在有机会进一步研究Express 3 API Reference 之后，我发现了我正在寻找的东西。特别是 app.locals 的条目，然后再往下一点 res.locals 包含我需要的答案。

我自己发现函数app.locals 接受一个对象并将其所有属性存储为应用程序范围内的全局变量。这些全局变量作为局部变量传递给每个视图。但是，函数 res.locals 的范围仅限于请求，因此，响应局部变量只能由在该特定请求/响应期间呈现的视图访问。

所以对于我在app.js 中的情况，我所做的是添加：

app.locals({
    site: {
        title: 'ExpressBootstrapEJS',
        description: 'A boilerplate for a simple web application with a Node.JS and Express backend, with an EJS template with using Twitter Bootstrap.'
    },
    author: {
        name: 'Cory Gross',
        contact: 'CoryG89@gmail.com'
    }
});

那么在我看来，所有这些变量都可以访问为site.title、site.description、author.name、author.contact。

我还可以使用res.locals 为对请求的每个响应定义局部变量，或者只是在render 调用中将页面标题等变量作为options 参数传递。

编辑：此方法将允许您在中间件中使用这些本地变量。正如 Pickels 在下面的评论中建议的那样，我确实遇到了这个问题。在这种情况下，您将需要在他的替代（和赞赏）答案中创建一个中间件函数。您的中间件函数需要为每个响应将它们添加到res.locals，然后调用next。这个中间件函数需要放置在需要使用这些局部变量的任何其他中间件之上。

编辑：通过app.locals 和res.locals 声明本地变量的另一个区别是app.locals 的变量被设置一次并在应用程序的整个生命周期中持续存在。当您在中间件中使用 res.locals 设置本地变量时，每次收到请求时都会设置这些变量。您基本上应该更喜欢通过app.locals 设置全局变量，除非该值取决于传递给中间件的请求req 变量。如果值没有改变，那么在app.locals 中设置一次会更有效。

Answer 2

您可以通过将它们添加到通用中间件中的 locals 对象来做到这一点。

app.use(function (req, res, next) {
   res.locals = {
     siteTitle: "My Website's Title",
     pageTitle: "The Home Page",
     author: "Cory Gross",
     description: "My app's description",
   };
   next();
});

Locals 也是一个扩展 locals 对象而不是覆盖它的函数。所以下面的工作也是如此

res.locals({
  siteTitle: "My Website's Title",
  pageTitle: "The Home Page",
  author: "Cory Gross",
  description: "My app's description",
});

完整示例

var app = express();

var middleware = {

    render: function (view) {
        return function (req, res, next) {
            res.render(view);
        }
    },

    globalLocals: function (req, res, next) {
        res.locals({ 
            siteTitle: "My Website's Title",
            pageTitle: "The Root Splash Page",
            author: "Cory Gross",
            description: "My app's description",
        });
        next();
    },

    index: function (req, res, next) {
        res.locals({
            indexSpecificData: someData
        });
        next();
    }

};


app.use(middleware.globalLocals);
app.get('/', middleware.index, middleware.render('home'));
app.get('/products', middleware.products, middleware.render('products'));

我还添加了一个通用渲染中间件。这样您就不必为每个路由添加 res.render，这意味着您可以更好地重用代码。一旦您走上可重用中间件路线，您会发现您将拥有大量构建块，这将极大地加快开发速度。

Answer 3

对于 Express 4.0，我发现使用应用程序级变量的工作方式略有不同，Cory 的回答对我不起作用。

来自文档：http://expressjs.com/en/api.html#app.locals

我发现你可以在

中为应用声明一个全局变量

app.locals

例如

app.locals.baseUrl = "http://www.google.com"

然后在您的应用程序中，您可以访问这些变量，并且在您的快速中间件中，您可以在 req 对象中访问它们

req.app.locals.baseUrl

例如

console.log(req.app.locals.baseUrl)
//prints out http://www.google.com

Answer 4

在您的 app.js 中，您需要添加类似这样的内容

global.myvar = 100;

现在，在您想要使用此变量的所有文件中，您只需以myvar 的身份访问它

Answer 5

你也可以使用“全局”

例子：

这样声明：

  app.use(function(req,res,next){
      global.site_url = req.headers.host;   // hostname = 'localhost:8080'
      next();
   });

这样使用： 在任何视图或 ejs 文件中

在 js 文件中 console.log(site_url);

Answer 6

一种方法是在app.js 中更新该应用的app.locals 变量

通过关注设置

var app = express();
app.locals.appName = "DRC on FHIR";

获取/访问

app.listen(3000, function () {
    console.log('[' + app.locals.appName + '] => app listening on port 3001!');
});

使用来自@RamRovi 示例的屏幕截图进行详细说明，并略有增强。

Answer 7

有了不同的答案，我实现了这段代码以使用“app.locals”中加载的外部文件 JSON

参数

{
    "web": {
        "title" : "Le titre de ma Page",
        "cssFile" : "20200608_1018.css"
    }
}

应用程序

var express     = require('express');
var appli       = express();
var serveur     = require('http').Server(appli);

var myParams    = require('./include/my_params.json');
var myFonctions = require('./include/my_fonctions.js');

appli.locals = myParams;

EJS 页面

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title><%= web.title %></title>
    <link rel="stylesheet" type="text/css" href="/css/<%= web.cssFile %>">
</head>

</body>
</html>

希望对你有帮助

Answer 8

为了避免全局范围受到污染，我要做的是创建一个可以在任何地方包含的脚本。

// my-script.js
const ActionsOverTime = require('@bigteam/node-aot').ActionsOverTime;
const config = require('../../config/config').actionsOverTime;
let aotInstance;

(function () {
  if (!aotInstance) {
    console.log('Create new aot instance');
    aotInstance = ActionsOverTime.createActionOverTimeEmitter(config);
  }
})();

exports = aotInstance;

这样做只会创建一次新实例，并在包含文件的任何地方共享该实例。我不确定是因为变量被缓存还是因为应用程序的内部引用机制（可能包括缓存）。任何关于节点如何解决这个问题的 cmets 都会很棒。

也许还可以阅读本文以了解 require 的工作原理： http://fredkschott.com/post/2014/06/require-and-the-module-system/