需求背景
- 接前对禅道 -bug模块进行改造以适应公司线上问题处理流程，但是其中客户信息是保存在 后台 - 自定义 - 中统一对字段进行维护，后经使用人员反应这样维护不便。
- 涉及改动
-
- 客户信息从运维平台直接get请求获取，所涉及客户信息字段如下
-
-
- customerName 客户名称
- envName 客户环境
- engine 所用引擎
- engineVersion 引擎版本
- productPackageInfo 产品包信息
- 数据结构
- customerId -> 关联 env详细信息
- envId -> 关联具体的产品包信息
- 前言介绍完毕 ，开搞
确定涉及页面
- 首先可以确认的是上面的改动涉及页面 bug-create，bug-edit，bug-export
确定实现方式
- 通过编写js异步发送ajax请求去请求运维平台提供的接口。
- 先后顺序
-
- 先通过请求customer接口获取到customerId
- 通过customerId 请求env环境接口拿到环境信息envId
- 通过envId请求package相关接口拿到产品信息
找到需要改写/扩写的代码块
- 经反复debug F12等操作找到功能性代码在 module/bug/js/common.js 路径之下。common.js 里面封装了各种ajax请求代码，参考禅道原生进行改写扩写部分代码。
- onchange方法对应会去调用common.js 下面的loadCustomerDetails方法，this.value则为选框选中的value，实现由前端页面点击选框操作传值发送ajax请求到运维平台去取数据
前端修改代码
// FIXME 查询客户细节的ajax方法 参照别的方法来进行实现
function loadCustomerEnv(customerID){
// 要做的事情
// 调用control层方法根据customerid取得客户的详细信息 调用control层的方法取详细客户信息
link = createLink('bug','ajaxGetEnvList','customerID=' + customerID);
// 请求上面这个方法返回的data，进入判断，然后进行前端展示
// load 直接加载内容进去
// $('#envBox').prepend("<span class='input-group-addon' style='border-left-width: 1px;'>" + "环境" + "</span>");
$('#envBox').load(link, function(){$('#env').chosen();});
}
- createLink 为禅道原生封装的一个方法，可以直接从js发起对php后端代码的调用。其入参规则为
-
- createLink(moduleName,controlMethodName,paramter)
- 翻译一下就是 会调用某个模块下的control层的 某个方法，同时传入参数，返回执行结果/
- $('#envBox').load(link, function(){$('#env').chosen();});
- 上面这句代码中，$('#envBox') 为jquery写法，选中元素，load为js方法，加载资源直接替换到envBox下。而页面中 envBox处代码如下
后端修改代码 -control层
- 虽然禅道前后端耦合在一起，但是还是习惯性的进行这样分类。
- 首先延续上面的思路，createLink调用了control层的某个方法并传参，对应的要去编写相应的方法。
- echo 后的代码同样是禅道原生封装的，方便快速生成select标签，详情可见禅道官方文档二开说明。这里不展开叙述。
- ajaxGetEnvList做了哪些事情
-
- 调用bug模块下的getEnvlist方法并传入前端传入的参数。得到返回，
- 给返回的envs 数组添加一个头部空项，促使客户每次更改都能出发onchange方法。
- 输出 select的html代码。
后端修改代码 - model层
<?php
/*
* FIXME
* 根据customerid获取客户详情，支持前端异步请求
*
*
*/
// 环境信息
public
$envListUrl = 'http://xxxx:8887/api/getEnvList?customerId=';
// 产品包信息
public
$productUrl = 'http://xxxxxxx:8887/api/getProductInfo?envId=';
public function getEnvList($customerID){
// 拼接请求地址 发送请求获取返回
$envList = $this->curl($this->envListUrl . $customerID, [], 'GET');
$envList = json_decode($envList, true);
// envList['data'] 为环境信息的数组
// 判断 envList['data'] 数组非空，非空进入遍历
$envs = array();
// engine相关信息
$engineList = array();
if (count($envList['data']) > 0) {
foreach ($envList['data'] as &$env) {
// engineVersion engineType 需要加上非空 非null判断
// 所有的环境信息压入envs数组
$envs[$env['envId']] = $env['envName'];
}
}
return $envs;
}
遇到的坑
- php array_unshift($envs, " ");//向数组插入元素
-
- 该方法可以向php数组头部插入值，但是在数组为关联数组，即类似python中的dict kv对类型的数组的时候，此操作会重新打乱key的排序，
- 比如在model层对env信息进行了配对，形制如 envid，evnName对应的数组，使用此方法会完全重新计数envid，导致数据失真。
结语
- 本文只是拣取了其中一个例子来进行说明，并没有对全部修改过程进行记述，主要是思路性总结。
