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

React连接后台服务

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

 

一、需求描述

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

二、问题分析

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

三、方案设计

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

四、具体实现

五、结果展示

1、启动zookeeper

2、启动dubbo的provider

3、启动前端代码

    Eclipse输出：

    数据库信息：

    数据查询成功！

4、增加人员

   

    

    

     增加成功！

5、编辑人员

      

     编辑成功！

6、删除人员

      删除wss

    

     删除成功！

六、链接

前端人员管理系统：https://blog.csdn.net/a153375250/article/details/52667739

react相关知识：

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

https://blog.csdn.net/zwp438123895/article/details/69374940

代码：https://pan.baidu.com/s/1I4rDebj-wsBQbM8W_iu4JQ

提取码：6t5t