springBoot+react实现增改查

1、页面查询功能带分页

后端代码：

1  /**
2     　* @Author Mc
3     　* @Description: 根据条件查询角色列表信息
4     　* @Date 2018/4/19 10:49
5     　*/
6    @Override
7    public Response<Paging<BvsRole>> findListPage(BvsRole bvsRole){
8        try {
9            // 调用PageHelper封装方法设置其实分页（拦截器）
10            PageHelper.startPage(bvsRole.getPageNo(),bvsRole.getPageSize());
11            // 查询角色数据
12            List<BvsRole> bvsRoles = bvsRoleDao.findList(bvsRole);
13            // 因重名，故全名引入
14            com.github.pagehelper.PageInfo pageInfo = com.github.pagehelper.PageInfo.of(bvsRoles);
15            // 转化为自己的paging对象，此方法可重写
16            Paging<BvsRole> paging = new Paging(pageInfo.getTotal(), bvsRoles);
17            // 检查状态
18            checkState(!Arguments.isNullOrEmpty(bvsRoles),"find.bvsRole.by.bvsRole.is.null");
19            return Response.ok(paging);
20        } catch (NullPointerException | IllegalStateException e) {
21            log.error("find by key fail bvsRole: {}, cause: {}", bvsRole, getStackTraceAsString(e));
22            return Response.fail(e.getMessage());
23        } catch (Exception e) {
24            log.error("find by key fail bvsRole: {}, cause: {}", bvsRole, getStackTraceAsString(e));
25            return Response.fail("find.bvsRole.by.bvsRole.fail");
26        }
27    }

前端代码：

1// JS页面
2// post 请求发送对象
3export function post(api, params = null) {
4  return request
5    .post(api)
6    .send(params)
7    .then(response => checkData(response), error => errorCatch(error));
8}
9// 查询用户角色
10export function getRoles(params) {
11  return (dispatch) => {
12    dispatch(receiveInit());
13    return post('/api/bvsRole/bvsRoleListPage', params==undefined?{}:params).then((data) => {
14      dispatch(receiveBvsRoles(data));
15    }, () => {
16      dispatch(receiveErrors());
17    });
18  };
19}
20//jsx页面
21// 分页
22const PAGE = {
23  current: 1,
24  pageSize: 10,
25  showSizeChanger: true,
26  showQuickJumper: true,
27};
28// 分页事件
29  handleTableChange(pagination) {
30    const { current, pageSize } = pagination;
31    const { form, query } = this.props;
32    const fieldsValues = form.getFieldsValue();
33    query({
34      pageNo: current,
35      pageSize,
36      ...fieldsValues,
37    });
38    this.setState({
39      pagination: {
40        current,
41        pageSize,
42      },
43    });
44  }
45
46<Table
47  columns={columns}
48  dataSource={bvsRoles.data}
49  loading={bvsRoles.fetching}
50  pagination={pagination}
51  onChange={
52    (paginations) => {
53      this.handleTableChange(paginations);
54    }
55  }
56/>

2、钻取方法获取树列表功能

后端代码：

1package net.haier.bvs.pub.util;
2
3import io.terminus.common.model.Response;
4import io.terminus.common.utils.Arguments;
5import lombok.extern.slf4j.Slf4j;
6import net.haier.bvs.pub.model.TreeNode;
7import java.lang.reflect.InvocationTargetException;
8import java.lang.reflect.Method;
9import java.util.ArrayList;
10import java.util.Collection;
11import java.util.LinkedList;
12import java.util.List;
13import static com.google.common.base.Preconditions.checkState;
14import static com.google.common.base.Throwables.getStackTraceAsString;
15
16@Slf4j
17public class TreeUtil {
18
19    private static final String TREEID = "getTreeId";
20    private static final String TREENAME = "getTreeName";
21    private static final String PARENTID = "getParentId";
22    /**
23    　* @Author Mc
24    　* @Description: 通过树列表
25    　* @Date 2018/5/14 15:29
26      * @param roots 根级数据
27      * @param allData 所有数据
28    　*/
29    public static <T> Response<List<TreeNode>> getTree(List<T> roots , List<T> allData){
30
31        List<TreeNode> nodes = new ArrayList<TreeNode>();
32        try {
33            // 选中树节点时不返回任何数据
34            // if(!"0".equals(this.id)) return null;
35
36            // 构建树结构
37            LinkedList<T> list = listToLinkedList(allData);
38            // 循环寻找子节点
39            roots.forEach(t -> {
40                TreeNode treeNode = buildNode(t);
41                buildTree(list, treeNode);
42                nodes.add(treeNode);
43            });
44            // 校验返回值
45            checkState(!Arguments.isNullOrEmpty(nodes),"find.nodes.by.nodes.is.null");
46            return Response.ok(nodes);
47        } catch (NullPointerException | IllegalStateException e) {
48            log.error("find by key fail nodes: {}, cause: {}", nodes, getStackTraceAsString(e));
49            return Response.fail(e.getMessage());
50        } catch (Exception e) {
51            log.error("find by key fail nodes: {}, cause: {}", nodes, getStackTraceAsString(e));
52            return Response.fail("find.nodes.by.nodes.fail");
53        }
54    }
55
56    /**
57     　* @Author Mc
58     　* @Description: listToLinkedList
59     　* @Date 2018/5/5 16:08
60     　*/
61    private static <T> LinkedList<T> listToLinkedList(List<T> allData){
62        if(allData instanceof LinkedList)
63            return (LinkedList<T>)allData;
64        LinkedList<T> result = new LinkedList<T>();
65        allData.forEach( r -> result.add(r));
66        return result;
67    }
68
69    /**
70     　* @Author Mc
71     　* @Description: 创建TreeNode对象
72     　* @Date 2018/5/5 17:54
73     　*/
74    private static <T> TreeNode buildNode(T t) {
75        // 树对象的创建
76        TreeNode treeNode = new TreeNode();
77        try {
78            // 获取泛型T的Class对象，反向的调用get方法，获取数据
79            Class listClass = t.getClass();
80            // 获取get()方法
81            Method treeId = listClass.getMethod(TREEID);
82            Method treeName = listClass.getMethod(TREENAME);
83            // 调用get()方法
84            treeNode.setKey(treeId.invoke(t) != null ? treeId.invoke(t).toString() : null);
85            treeNode.setTitle(treeName.invoke(t) != null ? treeName.invoke(t).toString() : null);
86        } catch (IllegalAccessException | InvocationTargetException | NoSuchMethodException e) {
87            e.printStackTrace();
88            log.error("find by key fail treeNode: {}, cause: {}", treeNode, getStackTraceAsString(e));
89        }
90        return treeNode;
91    }
92
93    /**
94     　* @Author Mc
95     　* @Description: 构建资源树
96     　* @Date 2018/5/4 17:57
97     　*/
98    private static <T> void buildTree(LinkedList<T> allDate,TreeNode parentNode){
99        if(allDate.isEmpty() || parentNode == null) return;
100        Collection<TreeNode> children = parentNode.getChildren();
101        if(children == null) parentNode.setChildren(new ArrayList<TreeNode>());
102        Long parentNodeId = Long.valueOf(parentNode.getKey());
103        try {
104            // 获取泛型T的Class对象，反向的调用get方法，获取数据
105            Class listClass = allDate.getFirst().getClass();
106            // 获取get()方法
107            Method treeId = listClass.getMethod(TREEID);
108            Method parentId = listClass.getMethod(PARENTID);
109            // 调用get()方法
110            allDate.forEach((T r) ->{
111                // 设置该资源的直接子元素-剔除自身
112                try {
113                    if(parentNodeId.equals(parentId.invoke(r) != null ? Long.valueOf(parentId.invoke(r).toString()) : null)
114                            && !parentNodeId.equals(treeId.invoke(r)!= null ? Long.valueOf(treeId.invoke(r).toString()) : null)){
115                        TreeNode treeNode = buildNode(r);
116                        parentNode.getChildren().add(treeNode);
117                    }
118                    // 从列表中删除父节点
119                    if(parentNodeId.equals(treeId.invoke(r) != null ? Long.valueOf(treeId.invoke(r).toString()) : null)){
120                        r = (T) new LinkedList<T>();
121                        return;
122                    }
123                } catch (IllegalAccessException | InvocationTargetException e) {
124                    e.printStackTrace();
125                }
126            });
127        } catch (NoSuchMethodException e) {
128            e.printStackTrace();
129        }
130        // 对子节点遍历
131        parentNode.getChildren().forEach(c->buildTree(allDate,c));
132    }    
133}

前端代码：

js：

1// 查询资源
2export function findResource() {
3  return (dispatch) => {
4    dispatch(receiveInit());
5    post('/api/resourceInfo/resourceTree',{}).then((data) => {
6      dispatch(receiveResourceTree(data));
7    }, () => {
8      dispatch(receiveErrors());
9    });
10  };
11}
12// 赋值资源树数据
13export function receiveResourceTree(treeDate) {
14  return {
15    type: RECEIVE_ADDROLE,
16    payload: {
17      fetching: false,
18      treeDate,
19    },
20  };
21}

jsx：

1import { Tree } from 'antd';
2const TreeNode = Tree.TreeNode;
3// 展开树事件
4  onExpand = (expandedKeys) => {
5    console.log('onExpand', arguments);
6    this.setState({
7      expandedKeys,
8      autoExpandParent: false,
9    });
10  }
11  // 勾选树事件
12  onCheck = (checkedKeys) => {
13    console.log('onCheck', checkedKeys);
14    this.setState({ checkedKeys });
15  }
16  // 选择树事件
17  onSelect = (selectedKeys, info) => {
18    console.log('onSelect', info);
19    this.setState({ selectedKeys });
20  }
21  // 数据加载事件
22  renderTreeNodes = (data) => {
23    return data.map((item) => {
24      if (item.children) {
25        return (
26          <TreeNode title={item.title} key={item.key} dataRef={item}>
27            {this.renderTreeNodes(item.children)}
28          </TreeNode>
29        );
30      }
31      return <TreeNode {...item} />;
32    });
33  }
34
35<Row>
36  {addRole.treeDate.length ? 
37    <Tree
38      checkable
39      onExpand={this.onExpand}
40      expandedKeys={this.state.expandedKeys}
41      autoExpandParent={this.state.autoExpandParent}
42      onCheck={this.onCheck}
43      checkedKeys={this.state.checkedKeys}
44      onSelect={this.onSelect}
45      selectedKeys={this.state.selectedKeys}
46      >
47      {this.renderTreeNodes(addRole.treeDate)}
48    </Tree>
49  : 'loading tree'}
50</Row>

3、新增&编辑功能

后端代码：

1   /**
2     　* @Author Mc
3     　* @Description: 新增角色功能
4     　* @Date 2018/4/19 16:06
5     　*/
6    @Override
7    public Response<Boolean> saveBvsRole(BvsRole bvsRole) {
8        try {
9            boolean success = false;
10            // 根据isNewRcord和id判断新增还是修改
11            if(bvsRole.getId() == null || bvsRole.getIsNewRecord()){
12                // 新增操作
13                bvsRole.setId(bvsRoleDao.getRoleId());
14                bvsRole.setGmtCreate(new Date());
15                bvsRole.setGmtModified(new Date());
16                checkNotNull(bvsRole, "bvsRole.is.empty");
17                success = bvsRoleDao.create(bvsRole);
18                // 新增RoleResource表数据
19                bvsRoleDao.createRoleResource(bvsRole);
20            }else{
21                // 编辑操作
22                bvsRole.setGmtModified(new Date());
23                success = bvsRoleDao.update(bvsRole);
24                // 编辑下先全部删除RoleResource表数据
25                bvsRoleDao.deleteRoleResource(bvsRole.getId());
26                // 然后新增RoleResource表数据
27                bvsRoleDao.createRoleResource(bvsRole);
28            }
29            checkState(success, "create.bvsRole.fail");
30            return Response.ok(Boolean.TRUE);
31        } catch (NullPointerException e) {
32            log.error("failed to create bvsRole({}) , caused: {}", bvsRole, getStackTraceAsString(e));
33            return Response.fail(e.getMessage());
34        } catch (Exception e) {
35            log.error("failed to create bvsRole({}) , caused: {}", bvsRole, getStackTraceAsString(e));
36            return Response.fail("create.role.fail");
37        }

前端代码：

1// 新增角色 js页面
2export function createRole(param) {
3  return (dispatch) => {
4    dispatch(receiveInit());
5    return post('/api/bvsRole/saveBvsRole', param).then((data) => {
6      dispatch(receiveAddroles({data}));
7      return Promise.resolve(data);
8    }, () => {
9      dispatch(receiveErrors());
10      return Promise.reject(null);
11    });
12  };
13}
14// jsx页面
15
16  // 新增页面跳转
17  handleAdd(e) {
18    e.preventDefault();
19    browserHistory.push('/addRole');
20  }
21  // 编辑事件
22  editRole(e, id) {
23    e.preventDefault();    
24    browserHistory.push(`/addRole?id=${id}&isNewRecord=false`);
25  }
26
27componentWillMount (){
28    const { location,resource,findById } = this.props;  
29    // 如果编辑的话查询数据
30    if(location.query.isNewRecord === "false"){
31      // 赋值路由传值
32      this.setState({
33        isNewRecord: location.query.isNewRecord,
34        id: location.query.id,
35      });
36      // 执行完findById后能获取到数据
37      findById(location.query).then(
38        () => { 
39          const {addRole, form } = this.props;
40          form.setFieldsValue(addRole.bvsRole);
41          this.setState({
42            checkedKeys: addRole.checkTree,
43            expandedKeys: addRole.checkTree,
44          });}
45      );
46      }
47    // 调用树资源方法
48    resource();
49  }
50
51// 提交方法
52  handleSubmit(e) {
53    e.preventDefault();
54    const { form, createRole } = this.props;
55    form.validateFields((err, values) => {
56      if (err) {
57        return;
58      }else{
59        const fieldsValues = form.getFieldsValue();
60        const values = {
61          ...fieldsValues,
62          createBy:'mc',
63          lastModifiedBy:'mc',
64          pageNo: PAGE.current,
65          pageSize: PAGE.pageSize,
66          pagingFlag : 0,
67          checkedKeys: this.state.checkedKeys,
68          isNewRecord: this.state.isNewRecord,
69          id: this.state.id,
70        };
71        this.props.createRole(values).then((msg) => {
72          if (msg && msg.success == true) {
73            notification.success({
74              message: '操作成功',
75              description: `${values.isNewRecord == true ? '新增' : '编辑'}角色成功!`,
76            });
77            browserHistory.goBack();
78          }else{
79            notification.error({
80              message: '操作失败',
81              description: `${values.isNewRecord == true ? '新增' : '编辑'}角色失败!`,
82            });
83          }
84        });
85      }     
86    });
87    this.setState({
88      pagination: {
89        ...PAGE,
90      },
91    });
92  }

欢迎指正错误！