基于dubbo实现人员管理系统的增删改查

React连接后台服务

刚开始接触reactjs, nodejs，dubbo等，写的也只是自己搭建应用时的一些想法，中间有表述不对的地方还请大家多多指正 20180518。

一、需求描述

用Java实现一个web程序，可以实现对数据库的增删改查；
前端部分，采用react实现的人员管理系统(后附链接);
服务部分，结合使用 dubbo实现。

二、问题分析

目前人员管理系统的数据源是从局部变量中读取到的，增删改查等操作是通过监听相应的控件进而修改局部变量，并重新渲染页面实现的，存在的一个问题是不能持久化保存数据，上述需求1与2要求的其实也就是持久化保存数据；
在实现上，需求3要求不能直接从数据库中读取数据，要通过dubbo提供的服务来操作数据库；
相关知识：react中的connection()用于实现外部与前端的通信，connect方法接受两个参数，mapStateToProps和mapDispatchToProps，后者用于实现输出逻辑，即定义了哪些用户操作应该编程Action，传给store；前者用于实现输入逻辑，即将外部数据（操作的结果）转换为UI组件的参数，传回前端（主要参考阮一峰老师的教程，后附链接）；
相关知识：redux-saga用于异步计算，redux-saga用于监听被dispatch的action当接收到的action被触发时，可以根据action.type执行不同异步请求，并取得执行结果；
相关知识：reducer，reducer函数接受两个参数：之前已经累积运算的结果和当前要被累积的值，返回的是一个新的累积结果。在 dva 中，reducer通过actions 中传入的值，与当前 reducers 中的值进行运算获得新的 state;
人员管理系统有四个操作涉及与数据库的交互，分别是：增加操作、删除操作、编辑操作（详情里的修改->完成）、查询操作（在页面打开后，显示数据库中已经存在的数据）；
在人员管理系统中，用户在页面上进行的操作都会调用到ManageSystem的相应的方法改变state，重新render以更新页面。

三、方案设计

采用connect方法将UI组件ManageSystem与容器组件ConnectManageSystem关联起来，在mapDispatchToProps中返回四种方法(增删改查)并对应四种action。
增、删、改操作可以直接在ManageSystem的相应方法中调用，查是在初始化时调用，也就是通过store.dispatch调用查询操作；
增、删、改操作是对用户操作进行相应时调用的，仅仅需要修改数据库，并不需要从数据库中取数据，查询操作是在页面打开后需要显示从数据库中都出来的用户数据，具体操作如下；
通过store.dipatch方法输出查询Action,通过redux-saga执行异步操作，取得操作结果后，将结果转换为需要的格式存储，存储到action的data属性中，同时更新action.type属性，返回action；
Reducer中判断action.type，如果是查询操作的结果，则更新state的相应属性为action.data，并返回更新后的state；
在manageSystem中通过mapStatetoProps，更新state的相应属性；
在ManageSystem的render方法中，判断下是否已经初始化完成，如果没有初始化，并且从数据库中取到的数据结果不为空的话，更新state中staff的allStaff, staff以及staffItem.key，以便渲染后能够显示最新数据；
通过redux-saga的watchFetchSearchData()方法更具Action的类型分发到不同的页面上，服务器端通过Express的get方法捕获不同的页面请求，并调用zookeeper上dubbo的相应的方法，实现远程调用。