云侧接口SDK设计思路

SDK设计的初衷，是为了简化商户接入的过程。在此前的支撑沟通中，发现主要的问题在于签名验签等固有机制的处理上，因此需要将该部分逻辑封装，使开发者聚焦于接口业务出入参的处理上。

然而业务当前仍处于快速迭代发展过程中，不断存在新的产品能力及开放接口上线，为了便于后续快速更迭，sdk内接口的新增需要能做到流程体系化——依托于云侧接口的原始设计，可以自动生成新的sdk接口及配套验证demo。

1. 整个业务对接过程的配置，涉及到全局的对接配置放到一个类中，涉及到单个请求的配置，放到一个类中。
2. 使用全局配置类初始化client对象，在调用方法时单接口的配置可选传入。
3. 为了便于商户使用自定义的http client。对外定义了doPost和doGet接口使业务开发者自由实现。
4. 最终对外暴露一个execute(String httpMethod, String apiUrl, Class rspType, RequestConfig requestConfig, Object requestObj)方法。这里除了requestConfig和requestObj，其他的接口信息，都可以在接口定义中提取到。
5. 最后使用swagger-codegen插件，配合自定义的mustache模板，生成GenerateApiService.generateFunc方法，该方法内，入参就仅需传入入参及请求配置了。最终暴露到开发者层面的使用也将非常简洁。
6. 同理，也可以模板化自动生成test用例，使用接口设计时定义的示例入参做连通性访问的测试。

重构认知：

所谓重构（refactoring） 是这样一个过程： 在不改变代码外在行为的前提下， 对代码做出修改， 以改进程序的内部结构。

存量产品问题：

难以添加新特性：添加1行代码都需要阅读理解相关的几千行代码 存量代码难以理解：培训和维护都异常困难，新员工成长缓慢，某些代码完全依赖于特定的一位老员工，人员依赖风险极大 难以保证产品质量：缺乏有效的自动化测试，添加或修改1行代码都必须手工执行所有的测试用例 接口混乱，组件难以复用：文档缺失、模块内外耦合严重，典型表现为头文件混乱 简单堆砌式实现：各种全局性的控制变量多，并且不断的异常性增加

项目构建及工程化说明

1. 初始化uni-app项目，vue3+ts：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 

前言：

在线上项目中,需要统计产品中用户行为和使用情况，从而可以从用户和产品的角度去了解用户群体，从而升级和迭代产品，使其更加贴近用户。 用户行为数据可以通过前端数据监控的方式获得，除此之外，前端代码的稳定性以及性能等也被开发运维人员所关注。 我们需要实现性能监控和异常监控以及时响应现网问题处理定位。其中性能监控包括首屏加载时间、白屏时间、http请求时间和http响应时间。异常监控包括前端脚本执行报错等。 本文针对整个前端监控，以一个具体的业务场景设计适用的方案。本文的主要内容分为：

一、数据监控类型

前端监控可以分为三类：数据监控、性能监控和异常监控。下面我们来一一的了解。

业务背景：

支付产品构建收银台能力。对于H5应用的商户，提供H5收银台的支付能力；对于App应用的商户，如果用户未安装该支付应用app，通过SDK拉起H5收银台完成支付。

商户应用集成H5收银台时的体验要求：

在手机浏览器上基础的接集成体验：

a. 商户拉起： 外部商户直接对接H5收银台时，通过post表单提交拉起H5收银台；或通过后台预下单获取到跳转地址，跳转到H5收银台；

b. 用户登录：对于外部商户集成，用户需要进行帐号登录的操作；但对于内部同一个账号体系的商户，可以通过鉴权方式实现免登录进入H5收银台；

优化重构背景：

随着前端项目的业务逻辑越来越复杂，代码也逐渐劣化。因为js弱类型的语言特性，变量没有类型约束。任何变量在运行态都变得不可知，函数的出入参也不可知。这不仅导致了各种低级问题的产生，还使代码逻辑难以理解，数据流不可控。 即使想对代码进行重构也是举步维艰。

考虑引入ts改造vue项目，主要看中了ts的如下优势可以解决项目痛点：

a. 清晰的函数参数/接口属性，增加了代码可读性和可维护性。 b. 静态检查，可以约束随意的变量读写；配合现代编辑器，各种提示可以提升编码效率。

项目改造步骤

1. 新增必要依赖项——以支持编译ts为js

打包改造背景：

前端项目代码仓里，同时包含了PC端和mobile端的页面代码，此前整个项目都是打包成一个单文件。考虑业务场景的解耦和加载性能的优化，准备将PC端和mobile端的代码分别打包成独立的页面。彼此的router/page/component独立，但项目中的工具类和业务service逻辑处理层，可以抽离统一处理。

打包改造步骤：

### 1. webpack打包改造(vue中直接在vue.config.js配置）      

打包成两个html文件如下： 

项目及改造：

1. ts项目改造

2. 单页面改造多页面

3. webpack拆包优化

4. 运营页面iframe加载配置

5. UT能力构建

6. 打点能力构建

7. 用户前后端敏感数据加密国密改造

微重构动作：

变量类型约束：接口出入参结构化，跨页面、文件传递的数据结构化；

所有业务异常提示统一弹窗处理（dialogUtil）

通过AOP实现端到端敏感字段加解密机制

本文内的代码写法仅表示其基本含义，实际项目中需要做更精确的调整。

1. 基本AOP切面能力

指定切面

在每一个controller类里的接口方法内，对web前台页面传入的参数进行解密

    @Before("execution(public * com.xxx.yyy.controller.*.*(..))")
    public void decrypt(JoinPoint joinPoint) throws CException {
        // 捕获方法参数列表
        List<Object> methodArgs = AspectHelper.getMethodArgs(joinPoint);
        if (methodArgs.size() == 0) {
            return;
        }
        for (Object item : methodArgs) {
            // 对参数项进行敏感字段解密处理
            try {
                argHandlerDecrypt.strategyhandle(item);
            } catch (Exception e) {
                log.error("failed to decrypt, message: ", e);
                throw new CException(ErrorCode.RSA_DECRYPT_FAIL);
            }
        }
    }