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

编程问答 2022-08-15

问题描述

我需要在一个.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"
    ],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>

解决方法

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

expressexpressexpressexpress-handlebarsjavascript