从编程小白到全栈开发:服务的调用

最新推荐:《Vue3.0抢先学》系列学习教程

忙带懒,好久没有更新文章了(其实主要是想留给你们一些消化前面文章知识点的时间,哈哈哈)。

我们在前文 《从编程小白到全栈开发:基于框架开发服务端》中,初步学习了如何使用Node.js服务端框架Express来编写后端服务,并基于Express,对我们先前的简易计算器程序的代码进行了一次重构。如果你是个初学者的话,相信通过阅读和实践前面的几篇文章,你已经能开始自己写一些代码了,并能对一个程序的各个组成部分建立起更加清晰直观的认识,知道什么是客户端,什么是服务端。

今天,在这个基础上,我想拓展一下你们对于客户端的理解。如果我没猜错的话,应该很多人都会把网页,移动app,桌面程序等用户直接可以操作的部分,当做客户端。从一个程序的用户角度来说,这种说法是没错的。不过,从程序本身来说的话,客户端的定义就会广泛许多,来看下图:

从编程小白到全栈开发:服务的调用_第1张图片

在该图示意的系统中,我们有多个后端服务(在一个实际的软件系统中,这个是非常常见的),这些后端服务之间也会互相的进行调用;后端服务也会调用其他第三方提供的服务。这种情况下,我们会把提供服务的叫做服务端,调用服务的叫做客户端。因此,该图中的界面UI后端服务1后端服务2在其有限的范围内,都可以被称作客户端:界面UI后端服务1后端服务2的客户端;后端服务1后端服务2第三方服务1的客户端,以此类推。

客户端调用服务端的时候,需要遵循事先的约定,也就是我们常说的协议。到目前为止,我们开发的服务都是基于HTTP协议,所以在客户端我们也都需要使用HTTP协议来发起调用。

在浏览器中调用HTTP服务

在浏览器中,我们通常可以通过

表单或XMLHttpRequest的来调用服务端的HTTP服务。

使用

我们先来看一下使用,如何来调用我们之前写的计算器后端服务/calc

在我们的html代码会像是这样:


    

    

    

    

在这个表单中,

标签上的action属性设置为目标调用的服务路径,method设置为调用所使用的HTTP方法。然后在表单下的