如何在 ejs 中存储和更新变量,在不同的路由上访问它



我对javascript,express,node,ejs等绝对是初学者,请放轻松:D。

我正在创建一个网站,这是我的项目画廊。您可以看到它们的网格,只需单击 gif 即可查看实时版本。每个项目(两个小游戏(在点击时会转到不同的路线(/squareTap,/guessColor(。现在我想在网站中实现不同的语言。我添加了引导下拉列表,您可以使用它来选择所需的语言。它适用于主页,可以很好地更改文本。但是当你去任何项目时,这些信息都会丢失......我需要它让游戏知道它应该用哪种语言显示癫痫警告,并相应地更改游戏描述。

这是网站的结构: 使用"节点应用程序.js"运行;每个 EJS 文件都有其对应的 JS 和 CSS 文件

//app.js
require('dotenv').config();
const express = require('express'),
app = express(),
bodyParser = require('body-parser'),
https = require('https'),
http = require('http'),
fs = require('fs');
var setToEnglish = false;
// app.locals.setToEnglish = false;
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/views'));
app.use('/node_modules', express.static(__dirname + '/node_modules/'));
app.use('/sounds', express.static(__dirname + '/sounds/'));
app.use('/images', express.static(__dirname + '/images/'));
app.set('view engine', 'ejs');
const options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem')
};
app.get("/", function(req, res){
res.render("main", { setToEnglish : setToEnglish});
});
app.get("/squareTap", function(req, res){
res.render("squareTap", { setToEnglish : setToEnglish});
});
app.get("/guessColor", function(req, res){
res.render("guessColor", { setToEnglish : setToEnglish});
});
https.createServer(options, app)
.listen(process.env.HTTPS_PORT, function () {
console.log('Serving the https');
});
http.createServer(function (req, res) {
res.writeHead(301, { 'Location': 'https://www.' + process.env.DOMAIN});
res.end();
}).listen(process.env.HTTP_PORT);

我尝试了 ejs 全局变量(如果它是这样称呼的(。基本上我在app.js中创建了一个变量setToEnglish,将其传递给每个视图(ejs文件(,无法弄清楚如何将其传递给js文件,所以我在ejs文件中做了一个函数声明,并在每次用户通过单击下拉选项更改语言时在js中执行这些声明。

<script>
function setGlobalToEnglish() {
<% setToEnglish=true %>;
}
function setGlobalToPolish() {
<% setToEnglish=false %>;
}  
</script>

它不起作用,它确实更改了变量,但仅在当前文件的范围内。当用户单击项目时,他仍然收到不变的默认值。

我读了一些关于res.locals,app.locals的信息,并尝试了一下,但无法使其工作。Js 和 ejs 文件无法识别任何内容。

这是我的目标:我需要某种方法来知道用户设置的语言,它应该根据用户点击的内容而变化,可以访问视图文件(在他们的 js 中会很棒(。游戏要做的第一件事是检查语言并相应地编辑文本。

请帮忙

编辑 1:我已将setToEnglish声明为全局变量(在 app.js 内(,首先 - 通过删除var部分。然后我尝试在main.js中console.log(setToEnglish);,得到未定义的错误,然后在main.ejs中,在<script></script>内部,也得到未定义的错误。然后我将变量的声明更改为此形式global.setToEnglish = false,然后重试。在所有情况下都出现未定义的错误。

编辑2:想不通,所以我改变了方法。我摆脱了语言更改下拉列表,并在我的每个视图中添加了 if 语句,这不会完全按照我的意愿做,但足够接近。它通过检查浏览器的设置来检测用户的首选语言,并相应地交换网站上的文本。

let preferredLanguage = window.navigator.language;
if(preferredLanguage.includes('en')) { 
//changing text to english 
} else if(preferredLanguage.includes('pl')) {
//changing text to polish
} ...

可以从另一个答案中获取一些参考。

所以这肯定会有所帮助。主要概念是,如果我们将其添加到应用程序中的全局 Express 实例中(在您的应用程序局部变量内(,我们可以在应用程序中全局设置函数/变量。

最新更新