制作真正简单的应用程序，包括前端和后端技能（js，node.js，psql，react…）

Question

我正在尝试制作一个简单的待办事项应用程序，以了解前端和后端之间的连接方式。我阅读了一些网站，其中显示了有关使用和连接Rest API，Express Server和数据库的教程，但仍然无法从数据库中获取虚假数据。无论如何，我想检查一下我对它们之间如何连接以及彼此交谈的理解是否正确。因此，您能给我一些建议吗？

首先，我打算将Javascript＆HTML或React用于前端，将Express用于服务器，将Postgres用于数据库。我的计划是用户可以添加和删除他或她的任务。我已经在index.js文件中创建了服务器，并使用psql命令创建了数据库。现在，如果我键入“”，则将我带到说“你好”的页面（我创建了此端点），并且我无法将数据播种到数据库。这是我的问题↓

1. 我能够将伪造的数据播种到数据库之后，应该如何从数据库中获取数据并将其发送到前端？我认为在我的index.js文件中，创建一个新的终结点，例如“ app.get（“ / api / todo”，（res，req）=> ...“，然后在回调函数内部，我应该写类似“从[表名]中选择*”。另外，作为前端，我可能应该使用访存来访问某些端点。这正确吗？

2. 另外，如何存储从前端发送的数据？例如，如果我在字段中输入新的待办事项并单击添加，事件的顺序是什么样的？将事件侦听器添加到按钮并连接到服务器，然后在服务器中创建post方法并插入数据，（（？）<=抱歉，这对我来说还不清楚。

   3. 在前端显示任务对我也不清楚。如果我在前端使用诸如{task：清理房间，完成：false（或0？）}之类的对象，这是有道理的，但是，当我开始使用数据库时，我对如何显示那些尚未完成。为了显示每个任务，我不会使用GET方法从数据库中获取数据，对吧？

   4. 另外，我是否需要使用knex解决此类问题？ （或更佳的选择是有拐点，为什么？）我认为我的问题是我有点知道前端，服务器，数据库用于什么，但不清楚它们如何相互连接...

我也绘制了一些图表，所以希望它能帮助您理解我的模糊问题...

Answer 1

我应该如何从数据库中获取数据并将其发送到前端？我认为在我的index.js文件中，创建一个新的端点，例如“ app.get（” / api / todo“，（res，req）=> ...”和回调内部函数，我应该写类似“从[表名]中选择*”的内容。

通常使用控制器->服务->存储库模式：

• 控制器是一个薄层，基本上是您所引用的回调方法。它只是从请求中获取参数，然后以方法调用的形式将请求转发到服务（即，在服务上公开一些方法并调用这些方法）。它从服务层获取响应，并将其返回给客户端。如果服务层引发自定义异常，则您也可以在此处处理它们，并将适当的响应发送给客户端（错误状态代码，自定义消息）。
• 该服务接受请求并将其转发到存储库。在此层中，您可以执行任何自定义业务逻辑（通过委派给其他隔离的服务）。此外，该层将负责引发自定义异常，例如在数据库中找不到项目时（抛出新的NotFoundException）
• 存储库层连接到数据库。在此放置自定义的db逻辑（如您提到的查询），例如在使用https://node-postgres.com/之类的库时。您无需在此处放置任何其他逻辑，存储库只是与数据库的连接器。

此外，作为前端，我可能应该访问某些端点使用提取。这是正确的吗？

是。

而且，如何存储从前端发送的数据？对于例如，如果我在字段中输入新的待办事项并单击添加，那是什么事件的顺序看起来像什么？将事件监听器添加到按钮并连接到服务器，然后在服务器中创建post方法，并插入数据，类型（？）<=对不起，这部分内容对我来说还不清楚。

您有一些选择：

• 表格提交
• Ajax请求，手动序列化表格中的数据，并通过ajax发送POST请求。由于您正在考虑像React这样的客户端库，因此我建议使用这种方法。

在前端也无法显示任务。如果我使用像{task：清理我的房间，完成：false（或0？）}这样的对象前端，这很有意义，但是，当我开始使用数据库时，对于如何显示尚未完成的项目感到困惑。在为了显示每个任务，我不会使用GET方法来获取数据从数据库，对吧？

如果要使用REST，通常意味着您没有在使用后端MVC /服务器渲染。正如您提到的React一样，您选择保留客户端状态并通过REST与服务器同步。这意味着您将所有状态保留在前端（在内存/本地存储中），并且仅与服务器同步。通常应用的是所谓的乐观渲染。即您只需在前端中管理状态就好像服务器不存在一样；但是，当服务器发生故障时（您可以在ajax响应中看到此情况），您可以在UI和回滚状态中显示错误。

或者，您可以使用微调器，它们等待服务器同步完成。它降低了用户感知的性能，但是在技术上同样有效。

而且，我是否需要使用knex解决此类问题？ （或更好有膝盖，为什么？）我想我的问题是我有点知道前端，服务器，数据库，但不清楚它们的连接方式彼此...

您使用的内容并不重要。从理论上讲，您可以使用纯JS编写所有这些代码，但是没有理由这样做。就个人而言，我会选择堆栈：

• Node Express（REST），但可以是Koa，Resify ...
• React / Redux客户端
• 对于后端回购层，您可以使用Knex，我使用过的node-postgres对我来说效果很好。

附加信息：如果您不确定如何编写REST端点，我鼓励您看以下内容：https://www.youtube.com/watch?v=PgrP6r-cFUQ