一、使前基础准备
1、登录后台系统 http://118.24.107.173:8090 ,注册一个账号
2、进入“个人信息”页,复制aph_key(开发者秘钥)
3、在spa项目中,修改 /config/dev.env.js配置文件内的“aph_key”字段,替换为自己的 “aph_key”
二、APH 控制台 使用介绍
1、【域名列表】
登录成功后,进入“域名列表”页,进行api域名管理,首先新增一个目标代理的api域名,注意,一定要带协议名,输入有效域名
域名呈单选列表方式,点选某一个域名,则设置该域名生效,并进入下一步【接口列表】
2、【接口列表】(很显然就是罗列接口的页面)
2.1 接口的增加有两种方式:
1️⃣自动填充:也就是劫持代理过程,自动cope代理的接口,填充入内,并按照代理的时间倒叙排列,“数据来源”默认为-“线上”
2️⃣手动增加:点击“新增”按钮,在“新增接口”对话框中,输入新增接口路径,和内容,这两项为必输项,‘接口描述’则非必须
3、【接口详情】
三、工程中如何配置(初级使用者可以略过)
使用axios的,在请求头中添加aph_key字段
四、原理介绍,已经诞生缘由(进阶内容,仅是使用的话,不用了解)
【APH】一个辅助前端独立于后端进行开发,提供接口数据的api server
APH是一个api服务端应用,可自由切换数据源(本地虚拟、真实远端),可独立使用某一个,也可混合使用。
功能: 1、混合模式可以当远端正常时,send远端真实数据,并缓存到本地数据库中。如远端当机,或某个接口500,则替补本地虚拟数据源,保证对前端的数据支持稳定; 2、可随时切换‘全部’或‘部分’接口源模式:真实远端 / 本地虚拟 / 混合; 3、本地虚拟数据源具备独立数据库MongoDB,可用工具自由修改,也可从ApiHelper提供的可视化操控界面增删改查; 4、因为具备真实远端源,所以能实时获取用户信息、token等,自由击穿鉴权,验证; 5、环境变动时 dev <=> test <=> stage,只需在ApiHelper修改下数据源即可,不用再改写config并重启webpack的web服务;
为了解决哪些痛点:
1、中途介入成熟项目时,往往面临大量接口,单纯使用mock一一手动建立,费时费力,这些需要一个能劫持代理,批量复制接口的功能支撑
2、线上test服务器不稳定时,api时不时404,500,或者测试时往往要频繁切换mock与线上环境,手动一一修改,麻烦费时,特别是在接口比较多的web端,特别厌烦
3、测试api不同内容不同交互的场景时,要频繁反复造新的数据内容(如多内容,空内容,报错内容时的交互场景),这时如果能备份接口的多个内容,随时切换,能省很多时间
4、开发环境变动时 dev <=> test <=> stage,需要改写config并重启webpack的web服务
产生原因,解决场景: 补充mock的短板
mock的短板 场景: 老项目增加新功能,之前未接入过mock,现在接入mock,意味着从0开始,新功能只是几个页面,涉及到的新接口不到10个,但是交互依赖老接口有几十个(比如获取用户信息,鉴权等)
方案一:接口区别化处理,老接口走线上,新接口接mock,手改代码,局部替换api baseHead 问题来了:在 dev <=> online 转换中要频繁改动代码,代码风险大,一不小心可能就把dev代码发到线上
方案二:卖苦力,所有新老接口都做一遍mock,这样就不用代码层改api baseHead,实现dev中统一走mock,一劳永逸 问题来了:开发完毕开始测试,但新页面交互复杂,很多场景依赖老接口内的特定值来触发,mock虽有随机数据机制,但场景过多情况下,很难应付的来(随机:就是看脸,万一,次次不刷出你要的数据,怎么办)
方案三:不能指望mock的随机数据,只能每次去手改接口了,那就把接口中这个字段手动改成我要的固定值 问题来了:如果这时线上老接口中其实已经有大量的数据,满足所有场景,你却只能每次复制粘贴到mock中,浪费很多无用功