如何从客户端到服务器端共享变量?

时间:2020-08-21 09:26:20

标签: javascript node.js express express-handlebars

我需要在一个.js文件中随机生成问题,然后再通过 id 选中 input复选框并在最后输出结果。对于快速显示的问题,我使用.handlebars。我需要测验。 (模块-express,express-handlebars)

以防万一 server.js

const express = require("express"),
  app = express(),
  exphbs = require("express-handlebars");
const routes = require("./routes/index");
app.listen(3000);
app.use(express.static("public"));
app.engine(
  "handlebars",
  exphbs({
    defaultLayout: "main",
  })
);
app.set("view engine", "handlebars");
app.use("/", routes);

我有一个带有问题的 data.json 文件(实际上有1000多个)

(data = [
  {
    "ids": "1",
    "question": "how?",
    "answers": [
      "1assd",
      "2asdsa",
      "3sadas",
      "4asdas",
      "5asdsad"
    ],
    "correct": [1, 2, 3, 4]
  },
  {
    "ids": "2",
    "question": "where?",
    "answers": [
      "1sadas",
      "2sdadsaf",
      "3sadsa"
    ],
    "correct": [1, 2, 3]
  },
]

我在 public / js / app.js 中打开它,并随机分配问题

var mydata = JSON.parse(JSON.stringify(data));
let questi = []; // <------- to index.js ?
for (let i = 0; i <= 2; i++) {
  questi[i] = mydata[Math.floor(Math.random() * mydata.length)];
}
console.log(questi);

但是不知道 questi 如何发送到 routes / index.js

const express = require("express"),
  fs = require("fs"),
  router = express.Router();
router.get("/", function (req, res) {
  res.render("test", {
    style: "main",
    quests: questi, // <------------- from app.js ?
  });
});
module.exports = router;

是否可以以不同的方式执行此操作,以便我的 views / test.handlebars 可以轻松获取值?

{{#each quests}}
<div id={{ids}}>
    <ul>
        <h3>{{question}}</h3>
        {{#each answers }}
        <li><input type="checkbox" id={{../ids}}_{{@key}} value="{{@key}}">{{.}}</li>
        {{/each}}
        <hr>
    </ul>
</div>
{{/each}}
<p>answered:</p>

以防万一视图/布局/main.handlebars

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{title}}</title>
  <link rel="stylesheet" href="/css/{{style}}.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  {{{body}}}
</body>
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>

1 个答案:

答案 0 :(得分:0)

我为.json创建一个链接,并使用.collapse()取值