声明

此文系：Vue3.0 +Quasar+ ethers.js 以太坊智能合约交互 系列教程之一。

从本系列教程的标题（vue+Quasar+ ethers.js）上你就可以看出，我们与以太坊智能合约的交互是在前端进行的。

因此，我们可以完全理解为网站与以太坊智能合约交互是属于前端开发的范畴。

传统的前端开发

工作过的前端开发者都知道，我们一般性的前端开发就是用代码完成前端界面，之后如果是前后端分离的，那么就是我们的后端写好接口，前端开发者只需要去调用接口完成功能即可。

这时候我们前端功能的实现面对的就是后端。

智能合约交互的前端开发

其实，智能合约交互的前端开发也和上述开发一样。

只是这里我们面对的后端变了。此时我们面对的后端变成了智能合约。

因此我们可以理解为：智能合约就是我们一般性前端开发者所要面对的接口。

当然，它们之间也还是有区别的，其中对于我们前端开发者来说，两者最大的区别就是调用方式上的不同。

两者对比

到这里我们就可以从两者之间得到如下：

传统的API接口调用，是前端发起网络请求，后端代码根据网络请求找到对应方法，之后执行。

假设此时我们有一个接口是users，需要返回网站的用户，那么实现逻辑如下：

前端发起网络请求（xxx.com/users）->后端路由匹配users->后端代码调用对应方法->返回数据。

而调用智能合约则是：

前端调用智能合约对应方法(users)->智能合约返回数据

注意我这里说的是“对应方法”，也就是说它们两者最大的区别是：前者发起网络请求，后者则只需要调用智能合约中的方法就行了。

当然，在这里，前端调用智能合约方法时，这个方法是怎么执行的，有没有和传统接口一样有网络请求，我们不需要管。我们只需要知道：

传统前端开发是发起网络请求调用后端接口，而和智能合约交互是调用合约中的方法完成功能。