Question

我正在尝试制作一个解析大量推文的简单应用。

首先，基本文件结构是：

在首页（index.html）上，用户在文本输入字段中输入Twitter用户名：

<input type="text" id="user-input" maxlength="25">
<button id="grabInput" onclick="storeInput()">Submit</button>

storeInput()函数位于后端的app.js文件中，可以访问我用来点击Twitter API的Node模块。

我尝试将脚本元素中的文件路径更改为<script src="../app.js"></script>，但它不起作用。

任何人都可以帮助我了解前端如何在Node / Express应用程序中与后端进行通信？我非常沮丧，因为我的应用程序的每个'一半'测试都没问题，但我无法连接它们。

谢谢！

Answer 1

您需要了解Web应用程序的基础知识。

您不能直接从浏览器调用服务器端storeInput() JavaScript函数。

您的网络应用程序有两个部分。服务器端和客户端。

您现有的storeInput()正在尝试在客户端执行，例如。在浏览器中。因此，您需要它向服务器发出请求并配置服务器以将该请求重定向到app.js。然后app.js将使用nodeModule Twitter API来获取数据并相应地响应请求。然后，您可以根据服务器发送的响应呈现客户端。

但是如果您只想在没有任何服务器端操作的情况下显示来自Twitter的帖子，那么您不必完成所有这些操作。 Twitter有一个API，您可以直接从客户端调用并提取数据。如果您想简单地显示帖子，我强烈建议您使用Twitter API，因为它更快，更简单，更安全。

Answer 2

执行示例应该应用通用表单post + express

<强> HTML

<form method="POST" action="/foo-route">
   <input type="text" id="bar" name="bar" />
   <button type="submit">Send</button>
</form>

快速路线

router.post('/foo-route',(req,res) => {
  if(typeof req.body.bar === 'undefined'){
    // The parameter is missing, example response...
    res.status(400).json({ error: 'missing parameter bar', data: null }); // Only an  example
    return;
  }

  let bar = req.body.bar;

  res.status(200).json({ error: null, data: bar }); // We received the value and only to show the example, returns it in a json within the key 'data'

});

上面的示例向您展示了如何处理表单中的输入文本，以及如何在后端正确处理。适应你的麻烦应该很容易。如果没有，请告诉我。请记住，在输入中添加字段名称=“..”。 <input type="text" id="something" name="myGreatName" />，然后使用req.body.myGreatName访问它。

Answer 3

为什么不使用HTML get表单？通过这种方式，您可以将用户输入发送回服务器，您可以在其中处理此输入，与twitter API交互，然后呈现结果。

在Node / Express中将用户输入从前端传递到后端

3 个答案: