您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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

需求背景

  • 接前对禅道 -bug模块进行改造以适应公司线上问题处理流程,但是其中客户信息是保存在 后台 - 自定义 - 中统一对字段进行维护,后经使用人员反应这样维护不便。
  • 涉及改动
    • 客户信息从运维平台直接get请求获取,所涉及客户信息字段如下
      • customerName 客户名称
      • envName 客户环境
      • engine    所用引擎
      • engineVersion   引擎版本
      • productPackageInfo 产品包信息
  • 数据结构
  • image.pngimage.png
  • customerId -> 关联 env详细信息
  • envId -> 关联具体的产品包信息
  • image.png
  • 前言介绍完毕 ,开搞

确定涉及页面

  • 首先可以确认的是上面的改动涉及页面 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请求代码,参考禅道原生进行改写扩写部分代码。

image.png

  • onchange方法对应会去调用common.js 下面的loadCustomerDetails方法,this.value则为选框选中的value,实现由前端页面点击选框操作传值发送ajax请求到运维平台去取数据
  • image.png

前端修改代码

  • 接着来看一个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处代码如下
  • image.png

后端修改代码 -control层

  • 虽然禅道前后端耦合在一起,但是还是习惯性的进行这样分类。
  • 首先延续上面的思路,createLink调用了control层的某个方法并传参,对应的要去编写相应的方法。
  • image.png
  • 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;
}
  • model部分代码相对比较易懂,不再赘述

遇到的坑

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

结语

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

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进