最近，项目测试，前端的修复工作基本交到我这边处理，后端去做完成其他工作，过程中需要加新功能，于是有个想法，为何我不把后端的接口也实现了呢，好奇心害死猫啊，花了整整两天时间搞了一个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、以后再也不会因为后端不能返我想要的数据结构而倍感嫌弃了；