什么是现代 Web 应用程序中的“API 优先架构”

Question

我尝试了解 API 优先架构以应用于 Web 应用程序，并在此处找到了一些信息，Advantages of a separate REST backend API?

下面我附上一个例子，以便更好地回答问题。 我开始使用 Angular.js 作为前端。 Node.js、Express.js 用于服务器。

文件夹结构

|-- server.js
|-- app
        |-- models
        |-- views
            |-- index.html
            |-- about.html
            |-- contact.html
        |-- controllers
            |-- app.js
|-- node-modules

app 文件夹是 Angular 应用的 MVC 结构。所有 POST GET PUT DELETE、MongoDB、Redis 连接都在 server.js 中。但是当服务器文件变大时，组织这些业务逻辑的最佳方式是什么？

server.js 上没有设置视图引擎。如果我在 express 中创建“routes”文件夹，这是否实际执行 API 优先概念？比方说，当用户单击按钮直接从浏览器提交表单时，在这种情况下，服务器是否负责表示层？

index.html

 <form method='POST' action='/register'>
     // some code here..
    <button type='submit'>submit</button></form>

server.js

var rootPath = './app/views' 
router.post('/register' (req, res) =>{
  // some code here...
res.sendFile( rootPath + 'index.html');
}); 

提前致谢。

Answer 1

API 优先架构意味着您首先设计后端和前端之间的接口，而不关注实际的前端实现。这将使将来向您的 API 添加新客户端变得更加容易。有关一些好的介绍，请参阅：

• http://www.api-first.com/
• https://www.programmableweb.com/api-university/understanding-api-first-design
• https://medium.com/adobe-io/three-principles-of-api-first-design-fa6666d9f694
• https://dzone.com/articles/an-api-first-development-approach-1

在网络环境中，它通常使用带有 RESTful API 的单页应用程序 (SPA) 来完成，将所有数据作为 JSON 传递，后端不会生成 HTML。

如果你想制作一个现代的单页应用程序，那么你通常会为前端的每个请求提供相同的 HTML 文件，例如当用户点击这些链接中的任何一个时，应该返回相同的 HTML：

• http://www.example.com/
• http://www.example.com/some/page
• http://www.example.com/some/other/page

这里的棘手之处在于，您需要确保不为其他资产（如样式或图像）提供该 HTML，因此通常您为丢失的文件提供该 HTML。例如。当用户想要获取 /css/style.css 时，你提供实际的 CSS，但是当用户想要获取不存在的 /a/b/c 时，你提供 /index.html

所以前端文件——HTML、CSS、客户端 JavaScript、图像等在某种意义上总是静态的，服务器总是向客户端发送相同的内容。这些可以由与您的 API 相同的服务器或不同的服务器在相同或不同的域上发送（但当您为前端资产和后端 API 使用不同的域时，请确保正确处理 CORS）。

现在，前端与后端的所有交互都完成了 无需重新加载页面 - 因此您不会在服务器上提供 HTML 作为对表单提交的响应。您通常提供 JSON 数据或（不太常见的）XML 而不是 HTML。

例如，您的 router.post('/register') 处理程序可能会以 res.json({ some: { object: 'example' } }); 之类的内容进行响应，而不会发送 HTML。

这就是它通常的做法——你用明确定义的 API 的明确边界将前端与后端分开，并且一旦加载 HTML 网页就不要重新加载它。

搜索有关 SPA、REST、JSON、XML、AJAX、GraphQL 的更多信息以获取更多信息。