关于一次前后端同时开发的体验---从接口开始

　　最近，项目测试，前端的修复工作基本交到我这边处理，后端去做完成其他工作，过程中需要加新功能，于是有个想法，为何我不把后端的接口也实现了呢，好奇心害死猫啊，花了整整两天时间搞了一个java的接口，再花了半天时间实现前端界面，还好现在有的是时间，不然项目经理不得劈了我。具体情况是这样子开始的：

　　前端技术栈：dva1／react／react-router／es6／antd

　　后端：java，aql server

【需求描述】

　　1、如果当前帐号没有被设置为付款主客户，则编辑时当前帐号可以设置付款主客户，编辑时提供输入和自动匹配的选择同时增加客户帐号是否存在校验；

　　2、如果当前帐号已经被设置为付款主客户，则显示当前帐号的关联客户，编辑时禁用设置改为提示信息；

【前台需求分析】

　　1、进入当前页面时查询接口  "customerFinance/mainAccounts" 获取mainAccounts (付款主客户或关联客户列表);

　　2、自定义组件 <ListPopoverView/> 用来装载数据和渲染UI；

　　3、关联客户处理：根据“数据下行／事件上行”原则，在组件中自定义事件componentHandleShowMainCustomerPopover，传回用户所选择的客户id，根据这个customerCode 动态 dispatch "customerFinance/changeMainAccountId"，从而获取当前的用户选择的客户数据，再传回组件进行显示；

　　4、编辑状态处理分两种情况：第一如果当前客户是付款主客户（列表显示是关联客户），给一个提示即可，即不可编辑；第二如果当前客户不是付款主客户，则可进行编辑，选择自己的付款主客户，则使用antd提供的自动补全功能的组件<AutoComplete/>进行处理，调用的查询接口为customerFinance/queryMainCustomers；

【前台需求总结】

　　1、需要新接口一个，即  "customerFinance/mainAccounts"，因为查询接口已有；

　　2、需要开发一个组件；

【后端需求分析】

　　因为我是先考虑的前端实现，然后后端配合进行的接口开发，所以这边基本实现我前端对接口的需求即可；

　　1、根据前端接口  "customerFinance/mainAccounts" 传回的参数 customerCode，从客户表里查询当前客户对应pay_account字段是否有值：如果有值再查pay_account的数据并返回。如果当前客户pay_account没有值，在查客户表所有客户列表的pay_account是否有值：如果有值，返回对应的客户信息，如果没有值返回空数组；

【后端需求总结】

　　1、提供一个接口用于返回付款主客户或者关联客户列表的信息；

【前端代码】

　　1、页面核心代码

　　　<ListPopoverView

               popoverContent={["customerCode", "客户名称", "customerName"]}

               list={mainAccounts}

               currCustomer={

               mainAccounts.filter(it => it.customerCode === mainAccountId)[0] || {}}

               dispatch={dispatch}

               handleMouseEvent={handleShowMainCustomerPopover}

         />

　　2、model部分核心代码　

　　* mainAccounts({payload}, {call, put}) {

      　　const {data: mainAccounts} = yield call(customerService.mainAccounts, payload)

      　　yield put({

        　　type: "saveMainAccounts",

        　　payload: mainAccounts

      　　})

    　},

      * queryMainCustomers({payload}, {call, put}) {

      　　const {data} = yield call(customerService.query, payload)

      　　yield put({

        　　type: "saveMainCustomers",

        　　payload: data

       }

 

【后端代码】

　　1、controller

　　//  watson 主付款客户相关 2017-11-9
　　@GetMapping(value = "/customer/mainAccounts")
　　public List<Object> getMainPayAccountsByCustomerCode(@NonNull String customerCode) {
   　　val list = new ArrayList();
   　　val currentCustomer = customerService.selectById(customerCode);
   　　if (currentCustomer.getPayAccount() != null && !currentCustomer.getPayAccount().isEmpty()) {
      　　val payAccount = customerService.selectById(currentCustomer.getPayAccount());
      　　list.add(payAccount);
   　　} else {
      　　val relevantCustomers = customerService.selectByPayAccount(customerCode);
      　　if (relevantCustomers.size() > 0) {
         　　for (val item: relevantCustomers) {
            　　list.add(item);
         　　}
      　　}
   　　}
   　　return list;
　　}

　　2、service

 

　　3、dao-queryCustomersByPayAccount

 

总结

1、为了完成这个功能，新学习了很多知识点，如数据库的sql server语句，java语句等；

2、让我前端开发的视角更为广泛，最基本的将前端的处理逻辑与后端的数据接口相结合，让用户操作更简单，让数据结构更为合理；

3、以后再也不会因为后端不能返我想要的数据结构而倍感嫌弃了；