随便取个名字_哈哈的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头像
最近浏览
刘亦菲9527 LV312月2日
星星星星星星
best2018 LV4212月1日
太阳太阳月亮月亮星星星星
仗剑走天下 LV311月29日
星星星星星星
center LV111月29日
星星
笛卡尔积 LV211月26日
星星星星
酒馆爱喝茶 LV111月25日
星星
wszzynbzdm LV611月22日
月亮星星星星
youwuzuichen LV811月18日
月亮月亮
码出奇迹 LV1211月18日
月亮月亮月亮
bukefeic LV1411月17日
月亮月亮月亮星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友