一、使前基础准备

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中，浪费很多无用功