无法理解前端和后端之间的连接



我面临的问题更多的是网络理解,而不是理解代码,这就是为什么我需要帮助,因为我似乎在任何地方都找不到答案。我只是模糊地理解它,如果我想擅长这一点,这还不够好。我的问题是,我不理解在这个编码示例中前端和后端是如何通信的。

链接到GitHub repo(不是我的,但我遵循了包含此代码的指南)https://github.com/bradtraversy/mern-tutorial

正如你们所看到的,这是关于MERN堆栈的,因此我在前端使用了axios,在后端使用了路由器。在authService.js文件中,我使用post方法发送数据,我的问题是userController.js中的RegisterUser函数如何识别我做了这件事,然后将这些东西保存到我制作的MongoDB服务器(集群、数据库)中。我正在使用桌面Mongo Compass(windows应用程序)来检查所有内容。

很难说你对Express.js/Node.js有多了解,所以我希望我不会太分解。不过,我觉得我解释得太多总比解释得太少好。

您所遵循的代码结构非常简洁,但绝非必要。它将后端代码的每一层功能分解为一个文件夹类别和单个文件。作者不是把所有东西都放在一个单独的JavaScript文件中,而是把路由放在";"路线";文件夹-什么都没有!任何逻辑都由控制器在它们各自的"逻辑"中处理;控制器";文件夹中,并且任何express.js中间件都在它们各自的"文件夹中;中间件";文件夹这对于较小的项目来说可能完全没有必要,但对于大型项目来说却是天赐之物,因为在大型项目中,很容易对发生的事情失去监督。

现在,为了回答您的问题,registerUser如何知道您发送了一个帖子方法:

  1. 例如,注册新用户的POST请求实际上在userRoutes.js中处理(或"已识别")(重要的一点是:注册用户的路由当前是根url"/",可能应该是"/register")
  2. 然后,它从userController.js文件调用registerUser,该文件包含在顶部的require
  3. registerUser然后处理任何类型的逻辑并分别作出响应

我希望这在某种程度上可以理解。TL;DR:registerUser不识别任何有关请求的内容,它只被调用。控制器仅用于";控制";而路由器仅用于";路由";。

以更广泛的方式:

在后端-

您开发rest api、api端点和您的软件(逻辑)。现在rest api是双向的。首先,它将数据以JSON格式传递给前端,其次,是理解从前端发送的JSON数据,并将这些数据转换为后端理解的格式(python、java),这些JSON数据在api端点可用。

您从axios发送的数据是json格式,并且您在api端点发送这些数据。

在Frotend-

您使用axios编写get语句来获取某个url上的数据,该url是后端创建的api端点。您还可以将数据发送到post并放在这个api端点上。

东西为你谷歌-

  1. 什么是Rest Api,以及所有替代方案
  2. 什么是JSON格式
  3. 什么是api端点
  4. 网络方法,如Get、Put、Post、Patch、Delete

一旦你了解了所有这些,你就可以找到你最喜欢/合适的后端语言,并为你的数据和逻辑创建api。

意味着您的前端完全独立于后端,反之亦然。

Rest框架不仅是一种方法,正如我所提到的,它还可以找到替代技术。

希望这能有所帮助,如果你有更多疑问,请写在这里。

Axios是Javascript中一个基于promise的HTTP客户端。您可能应该在这里了解HTTP。简单地说,HTTP是一种公认的互联网协议,它允许您的网站在浏览器中从服务器获取某些资源。

使用MERN堆栈,您基本上可以使用Express.js创建一个服务器,Express.js提供API和存储所有数据的MongoDB。Express API使用axios从React发送的HTTP请求中获取输入,处理API逻辑,并从MongoDB获取数据或将数据存储到MongoDB。在您的情况下,POST路由可以命名为/register。React获取HTTP响应并在浏览器上显示结果。

在计算机的本地开发中,您的计算机充当http://localhost:5000(或您喜欢的任何端口)。您位于localhost:3000的React网站向5000发送HTTP请求以获得响应。一旦您使用Heroku或Netlify等托管服务在真实服务器上托管MERN堆栈项目,您的React网站将使用您设置的URL向该服务器发送HTTP请求。

顺便说一句,Brad Traversy是一个非常优秀的年轻人,我也从他的课程中开始学习全栈开发:)

最新更新