如何使用客户端Javascript数组并通过node.js API发布到MongoDB数据库中？

Question

我有一个单一的网页，最初有两个表单输入，一个是名字列表，另一个是游戏标题。我编写了一些JavaScript/jQuery,它使用X个名称,并为每个人的特定分数创建更多X个表单输入。然后,javascript在单击Names/Scores表单的submit按钮时创建以下变量：

gameTitle = Monopoly
users = [Bob, Bill, Jim, Janet]
scores = [100, 110, 90, 80]
positions = [2, 1, 3, 4]

然后将MongoDB模式设置为：

const SessionSchema = new mongoose.Schema({
gameTitle: String,
users: [],
scores: [],
positions: []
});

和node.js处理程序：

const express = require('express');
const router = express.Router();
const bodyParser = require('body-parser');
const timestamps = require('mongoose-timestamp');

router.use(bodyParser.urlencoded({ extended: true }));
router.use(bodyParser.json());

const Session = require('./Session');

//Post a session to the database
router.post('/', function(req, res) {
    Session.create({
        gameTitle : req.body.gameTitle,
        users : req.body.user,
        scores : req.body.score,
        positions : req.body.position
    },
    function (err, session) {
        if (err) return res.status(500).send("There was a problem adding the information to the database");
        res.status(200).send(session);
    });
});

使用Postman，我可以看到当我使用以下格式时，张贴是有效的：

邮递员邮局

邮递员得到

我如何使用创建的javascript变量，并在单击Names/Scores表单的submit按钮时，通过API将它们发布到MongoDB数据库中？

如果我错过了任何重要的信息/代码，请原谅--我没有充分考虑后端的工作原理。

Answer 1

听起来你的后端工作正常。您缺少的是API请求。由于您的网站与API服务器不在同一host:port下，因此当从浏览器执行时，您将面临CORS问题。让我们稍后再谈这个问题：

首先，您将进行一个API调用。您可以使用axios或Fetch。让我们用fetch来表示：

fetch(url, {
  body: JSON.stringify(yourJavascriptVariablesAsAnObject),
  headers: {
    'Content-Type': 'application/json'
  },
  method: 'POST',
})
  .then(response => {
    // here you can check for status if you want.
    // ...

    return response.json(); // assuming server returns JSON.
  })
  .then(responseBody => {
    // Do something with the server's response body
  });

对于CORS问题，如果您的客户端应用程序来自create-react-app，或者至少您使用的是webpack-dev-server，那么您可以很容易地代理请求。

如果不允许，则需要在nodeJS服务器上允许CORS。最简单的方法是使用库。

ps：CORS基本上意味着您不能从浏览器向位于不同的`url:port:中的服务请求，除非该服务明确地表示它是OK的。

第三种选择是将UI和服务器项目都放在像Nginx这样的Web服务器之后，并代理请求，但这听起来对您需要的来说太复杂了。