需求背景

接前对禅道 -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请求到运维平台去取数据
前端修改代码
接着来看一个ajax请求的实例代码 ```javascript // FIXME 查询客户细节的ajax方法参照别的方法来进行实现 function loadCustomerEnv(customerID){ // 要做的事情 // 调用control层方法根据customerid取得客户的详细信息调用control层的方法取详细客户信息 link = createLink(‘bug’,’ajaxGetEnvList’,’customerID=’ + customerID); // 请求上面这个方法返回的data，进入判断，然后进行前端展示 // load 直接加载内容进去 // $(‘#envBox’).prepend(““ + “环境” + ““); $(‘#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处代码如下
- ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1608527/1622083082249-6d95261c-3c5d-49c9-a93d-5a846bab5072.png#align=left&display=inline&height=224&margin=%5Bobject%20Object%5D&name=image.png&originHeight=448&originWidth=1379&size=425299&status=done&style=none&width=689.5)
<a name="OE0Qx"></a>
# 后端修改代码 -control层
- 虽然禅道前后端耦合在一起，但是还是习惯性的进行这样分类。
- 首先延续上面的思路，createLink调用了control层的某个方法并传参，对应的要去编写相应的方法。
- ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1608527/1622083222045-e5505073-7773-417f-8339-981f9555a9ee.png#align=left&display=inline&height=292&margin=%5Bobject%20Object%5D&name=image.png&originHeight=584&originWidth=1728&size=437081&status=done&style=none&width=864)
- echo 后的代码同样是禅道原生封装的，方便快速生成select标签，详情可见禅道官方文档二开说明。这里不展开叙述。
- ajaxGetEnvList做了哪些事情
   - 调用bug模块下的getEnvlist方法并传入前端传入的参数。得到返回，
   - 给返回的envs 数组添加一个头部空项，促使客户每次更改都能出发onchange方法。
   - 输出 select的html代码。
<a name="Q00Iy"></a>
# 后端修改代码 - model层
```javascript
<?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;
}

model部分代码相对比较易懂，不再赘述

遇到的坑
php array_unshift($envs, “ “);//向数组插入元素
- 该方法可以向php数组头部插入值，但是在数组为关联数组，即类似python中的dict kv对类型的数组的时候，此操作会重新打乱key的排序，
比如在model层对env信息进行了配对，形制如 envid，evnName对应的数组，使用此方法会完全重新计数envid，导致数据失真。

结语
本文只是拣取了其中一个例子来进行说明，并没有对全部修改过程进行记述，主要是思路性总结。

PHP - 禅道二次开发

禅道二开 - 客户信息同步运维平台

需求背景

确定涉及页面

确定实现方式

找到需要改写/扩写的代码块

前端修改代码

遇到的坑

结语