随便取个名字_哈哈的gravatar头像
随便取个名字_哈哈2021-09-09 23:32:28
前后端分离2---之tree树结构的增删改查

先晒出成果图:

前后端分离2---之tree树结构的增删改查

首先还是说一下步骤:

一、先画出静态效果(用静态数据填充页面)

二、看静态数据的结构特征,后台造出和这个一样的数据结构

三、将静态数据变成动态请求,将请求的结果替换静态数据

 

一、先画出静态效果(用静态数据填充页面)

Elementplus官网是这样写静态页面的,

前后端分离2---之tree树结构的增删改查

 

 

Data是数据源,所以,接下来要重点关注这个data的数据结构

前后端分离2---之tree树结构的增删改查

 

 

二、看静态数据的结构特征,后台造出和这个一样的数据结构

 

Data数据结构如下,id是唯一标识,如果唯一标识不叫id,就要在node-key后面改成那个唯一标识的名字,label是标签名,也就是节点显示的名字,children是一个对象数组,它里面可以嵌套id,label,children,childern代表的是子节点,所以,关键问题是怎么把一个节点下面的所有子节点,都放到这个children中。

设计数据库:

前后端分离2---之tree树结构的增删改查

Id为2和3的父节点是id为1的,id为4,5,6的,父节点是id为2的,依次类推

 

编写后台接口代码,查询所有组织:

前后端分离2---之tree树结构的增删改查

先查询所有的数据,将所有的数据,转换成一个VO对象(最好不要直接将实体与视图层对接,中间还要放一层VO),利用递归算法,获取符合前端的,有层次结构的数据。

LoopQuery递归算法如下所示:

前后端分离2---之tree树结构的增删改查

如果当前节点的父节点为0的话,将当前节点加入到子节点中,并以当前节点的id作为父节点继续遍历,查询有节点的父节点是当前节点的id的,就把这个节点加入到当前节点的子节点中。

GetAllOrgs请求后的数据如下:

前后端分离2---之tree树结构的增删改查

Data后面就是前端要的数据

 

三、将静态数据变成动态请求,将请求的结果替换静态数据

调用getAllOrgs接口,将返回的数据赋值给数据源data

可以发现GetAllOrgs请求后的数据,组织名字是orgName,子节点数据是childrenOrgs,不是前端要求的label和children,所以,需要要用orgName替换掉label,childrenOrgs替换children。替换的代码如下:

前后端分离2---之tree树结构的增删改查

前后端分离2---之tree树结构的增删改查

每个节点右边的增删改查,代码如下:

前后端分离2---之tree树结构的增删改查

这里的data是每个节点的数据,data.id代表的是当前节点的id,使用data.orgName,可以获取当前节点的名字

 

 

新增和修改的代码如下:

前后端分离2---之tree树结构的增删改查

新增只需要获取id就行,修改不仅要获取当前节点id,还需要获取当前节点名字

 

 

 

新增和修改,提交数据给接口的代码如下:

前后端分离2---之tree树结构的增删改查

如果弹窗窗口的标题名字是新增,就调用新增接口,用当前节点的id作为pid。如果是修改,就用当前节点的id作为id进行修改。

 


打赏

已有1人打赏

最代码官方的gravatar头像
最近浏览
ltq50736 LV4昨天
月亮
ssm_er LV2前天
星星星星
fengzf LV16前天
太阳
mengyr LV39月14日
星星星星星星
curry LV19月13日
星星
最代码官方 LV1619月11日
皇冠皇冠太阳太阳星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友