前后端 增删改查 开发总结

前端主要写样式，没有较复杂的逻辑处理。

 

后端也没有太多复杂的逻辑处理，只有在分享菜单时候，涉及到了数组和树的转换，以及由树结构带来的一些明显逻辑问题。

 

平铺的数组结构为 id，pid

将其转换为树结构，只需要遍历数组，找每一个的父亲结点，然后在父亲结点的children中push该节点。这块逻辑，由于后端接口已经返回了平铺的数组结构，所以我将其放在前端处理。

 

由于菜单是树结构，而且是由平铺的表格维护的，带来的逻辑问题是：

1. 修改菜单项的父级时，不能简单的将所有节点加载出来，而是需要判断，很显然，菜单的孩子和后代不能作为该菜单项的父级候选；

2. 删除节点时，如果当前结点有孩子，是不能被删除的。如果只是单选删除，那么很简单，只需要判断一个节点是否作为其他节点的pid，但是，我写的删除方法是可以多选删除的。

多选删除时如果仅仅因为一个节点有孩子节点就返回报错信息，并拒绝删除，用户体验是非常之差的。

所以我的想法是，将能删除的节点删除，然后根据是否剩余节点未删除返回相应的提示信息。

这意味着，如果该节点和它的后代节点都被选中了，那么逻辑上讲，它是可以被删除的，所以我进行了处理，写了一个循环删除的方法，首先删除所有可以删除的叶节点，然后判断是否还有父节点在列表中，如果有，则进行下一个循环，重新判断所有未删除的节点性质，直到所有的父节点都确认是父节点。

 

搜索功能参考了之前的代码，没有调用接口，直接用列表已有的数据进行筛选。

 

新增和编辑时弹出的是同一个窗口，在逻辑处理中，也调用同一个函数，通过一个值判断当前是新增状态还是编辑状态，从而调用不同的接口。

 

一个完整的前后端联合开发流程：

首先确定功能和需求，以及涉及到的数据表和数据类型。

从前向后：

写页面 tsx

确定需要调用的接口和提供的数据 actions.ts constants.ts sagas.ts

一些公用的数据还会用到 reducer.ts selectors.ts

后端

controller 层定义调用接口

dto层（data transfer object）定义数据类型

service层 定义提供服务的接口

service.impl层 实现接口定义的方法

dao层 （data access object）mapper接口，实现接口到数据库的映射

mybatis的mapper层 xml语法数据库语句 放一个mybatis官网文档 https://mybatis.org/mybatis-3/sqlmap-xml.html