TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 5、《API服务设计》

1、前言

在实际业务开发中，会遇到这样一种需求，使用VUE的页面须要支持SEO，同时对首屏有指标性要求，目前市面上广泛使用的是Nuxt.js解决方案，在引入的同时还须要考虑与现有的全栈工程结合，本系列文章探讨的是此类全栈工程的解决方案，同时使用的是TypeScript应用于先后端编程，文章中介绍的工程与技术要点源码已上传至Github，有须要的朋友可自行下载：
Nuxt.js和Nest.js同构工程

复制代码

文章意在抛砖引玉，先后端使用同一种语言TypeScript编写，示例已包含基本接口请求，数据库链接应用，公用模块封装等实际开发中使用到的内容。

效果预览:

如下为该系列文章入口列表:
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 1、《简介》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 2、《框架融合》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 3、《配置服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 4、《UI系统》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 5、《API服务设计》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 6、《SEO功能实现》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 7、《Vuex使用》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 8、《接入Mongo DB服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 9、《TypeScript》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 10、《工程化部署》

示例中的远程服务调用系统采用直连和服务端中转2种方式进行，在实际业务开发中，跨域状况比较常见，在现今先后端各司其职状况下，引入Nest.js服务，通常前端能自行解决。跨域方法类型这里不做缀述。主要有:
1.NGINX设置
2.服务端开放
3.其它
这里讨论的是Nest.js中转的方式进行，通常来说，若是API不须要跨域，则只须要前端直接发起请求便可。但若是API是跨域，在这里示例中使用的是Nest.js中转的方式进行，同时使用中转也能统一请求出口入口，鉴权，请求参数监控和日志监控等的统一处理。本示例中使用到的服务远程调用主要围绕axios组件使用展开。

2、前端API服务基类实现(axios封装)

在nuxt.config.ts配置中导出全局引用

在插件实现类中定义拦截和响应逻辑。

3、服务端API服务基类实现(axios封装)

服务端则经过中间件形式，引入axios，注册拦截器，charles抓包代理，原理同客户端实现大同小异。

4、服务端中转服务实现(RESTful)

与客户端axios实现区别是，由于做了服务端中转，因此须要重写实现全部RESTful系列方法。

5、调用举例

• 非中转服务调用举例

  

  

• 中转服务调用举例

  

  

  

  创建中转专用模块:

  

  中转模块服务继承自ServiceTransport实现：

  

  对外暴露controller服务,经过/api/trasport/getTransportData方式访问：

  

  注册模块：

  

  从截图能够比较看出，中转与非中转服务调用，对客户端来讲区别不大，主要取决于Service类继承的类是否为TransportService，而TransportService则又继承自BaseService只不过是重写了底层实现。
  

6、子类服务实现，按域名分类复用思想

客户端远程服务调用，建议以调用域名区分，同一域名服务下接口请求都归类到同一文件中，进行代码复用，例如：

示例中，当cart和goods页面都同时须要调用goods接口的时候，这里将接口封装在一个Service类中，对于每一个业务页面来讲，只须要进行类的导入，而后是接口调用，达到复用目的。