现代Web应用程序中的“API第一架构”是什么?

我试着去理解应用于Web应用的API第一个体系结构,并在这里find了一些信息, 一个单独的REST后端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中创build“路由”文件夹,这实际上是执行一个API的第一个概念吗? 比方说,当用户点击一个button直接从浏览器提交表单时,在这种情况下,服务器是否负责表示层?

的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'); }); 

提前致谢。

API-first体系结构意味着您可以先devise后端和前端之间的接口,而不必关注实际的前端实现。 将来可以更轻松地为您的API添加新的客户端。 对于一些很好的介绍,请看:

在Web上下文中,通常使用带有RESTful API的单页面应用程序(SPA)完成以JSONforms传递所有数据,而在后端不生成HTML。

如果你想制作一个现代化的单页面应用程序,那么你通常为前端的每个请求提供相同的HTML文件,所以例如当用户点击任何链接时,应该返回相同的HTML:

这里有一点棘手的是,你需要确保你不要为样式或图像等其他资源服务器的HTML,所以通常你会为缺less的文件提供服务。 例如。 当用户想要获得/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网页。

search有关SPA,REST,JSON,XML,AJAX,GraphQL的更多信息以获取更多信息。