關於一次前后端同時開發的體驗---從接口開始

　　最近，項目測試，前端的修復工作基本交到我這邊處理，后端去做完成其他工作，過程中需要加新功能，於是有個想法，為何我不把后端的接口也實現了呢，好奇心害死貓啊，花了整整兩天時間搞了一個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、以后再也不會因為后端不能返我想要的數據結構而倍感嫌棄了；