系列文章目录
文章目录
- 系列文章目录
- 08-页面显示树形结构-前端-使用真实数据
- 09-准备zTree的API文档(因为现在没有图标)
- ==API文档发布到web服务器上去==
- 配置文件里面修改tomcat的默认端口号（只需改动3个地方）
- 10-前端-显示图标-分析思路（-页面显示树形结构）
- 11-前端-显示图标-代码实现（-页面显示树形结构）
- 12-页面显示树形结构-前端-点了不跑(不跳转页面)
- 13-页面显示树形结构-前端-添加按钮组-控制span显示
- 14-页面显示树形结构-前端-添加按钮组-填充具体按钮
- 按钮增删改查的规则
- 15-页面显示树形结构-前端-添加按钮组-小结
- 16-页面显示树形结构-前端-把生成树形结构的代码封装到函数
- 17-增删改-确认on()函数可以绑定单击响应函数
- ==注意ctrl+F5 连同js一起刷新，这样就不用清理缓存了==
- ==还有一种方式：引入外部js的时候?加任意数字==
- 18-添加子节点-目标和思路（下一篇）
08-页面显示树形结构-前端-使用真实数据
接上一篇，我们怎么把假数据变成真的数据？
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构](/i/li/?n=2&i=images/blog/202302/15164244_63ec9b04de20360528.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
数据从后端去拿，是哪个接口呢？其实就是我们之前写的那个接口
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_02](/i/li/?n=2&i=images/blog/202302/15164245_63ec9b053f90988453.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_03](/i/li/?n=2&i=images/blog/202302/15164245_63ec9b05ab85122023.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_04](/i/li/?n=2&i=images/blog/202302/15164246_63ec9b064a20460565.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_05](/i/li/?n=2&i=images/blog/202302/15164246_63ec9b06bcbc725237.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_06](/i/li/?n=2&i=images/blog/202302/15164247_63ec9b072427927512.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_07](/i/li/?n=2&i=images/blog/202302/15164247_63ec9b07ad71813987.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_08](/i/li/?n=2&i=images/blog/202302/15164248_63ec9b082be1e83758.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_09](/i/li/?n=2&i=images/blog/202302/15164248_63ec9b087a7ba24506.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
09-准备zTree的API文档(因为现在没有图标)
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_10](/i/li/?n=2&i=images/blog/202302/15164249_63ec9b09394f499543.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_11](/i/li/?n=2&i=images/blog/202302/15164249_63ec9b09a5bc867812.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_12](/i/li/?n=2&i=images/blog/202302/15164250_63ec9b0a3073456493.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
那这怎么办呢，火狐最新版也不支持这个了，我们只能听它的，部署到服务器上去了
API文档发布到web服务器上去
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_13](/i/li/?n=2&i=images/blog/202302/15164250_63ec9b0a8ba9c25997.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_14](/i/li/?n=2&i=images/blog/202302/15164250_63ec9b0ad2e3255700.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_15](/i/li/?n=2&i=images/blog/202302/15164251_63ec9b0b66b8610145.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
注意：要是我们的eclipse或者其它开发工具正在使用默认的端口号运行，这个时候服务是起不来的，默认端口就会被占用
所以我们要改一下默认的端口号
配置文件里面修改tomcat的默认端口号（只需改动3个地方）
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_16](/i/li/?n=2&i=images/blog/202302/15164251_63ec9b0bd209e33593.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_17](/i/li/?n=2&i=images/blog/202302/15164252_63ec9b0c8592538303.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_18](/i/li/?n=2&i=images/blog/202302/15164253_63ec9b0d3853d73637.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_19](/i/li/?n=2&i=images/blog/202302/15164253_63ec9b0dc8bed65223.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
就这三个地方改一下，其它地方不需要动
然后就可以正常运行了
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_20](/i/li/?n=2&i=images/blog/202302/15164254_63ec9b0e9734c47467.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
10-前端-显示图标-分析思路（-页面显示树形结构）
文档部署好之后，我们看看文档里面是怎么说图标这一块的知识的
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_21](/i/li/?n=2&i=images/blog/202302/15164255_63ec9b0f8cc961924.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_22](/i/li/?n=2&i=images/blog/202302/15164256_63ec9b106fbde56254.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_23](/i/li/?n=2&i=images/blog/202302/15164256_63ec9b10c511f88799.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_24](/i/li/?n=2&i=images/blog/202302/15164257_63ec9b111b72061469.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
写得很费解，我们直接写出来，打印一下这些参数看看
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_25](/i/li/?n=2&i=images/blog/202302/15164257_63ec9b119222e87149.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_26](/i/li/?n=2&i=images/blog/202302/15164258_63ec9b12067ff25516.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_27](/i/li/?n=2&i=images/blog/202302/15164258_63ec9b126febd44782.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_28](/i/li/?n=2&i=images/blog/202302/15164259_63ec9b1321c1448825.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_29](/i/li/?n=2&i=images/blog/202302/15164259_63ec9b136ea4232311.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_30](/i/li/?n=2&i=images/blog/202302/15164259_63ec9b13df33f63090.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_31](/i/li/?n=2&i=images/blog/202302/15164300_63ec9b1484c7e85043.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
然后就可以跑起来看看效果了
我们可以看到打印出了很多东西
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_32](/i/li/?n=2&i=images/blog/202302/15164300_63ec9b14e46ad99795.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
打印了很多的原因是每生成一个节点的时候，都会来调用一下这个函数
改一下
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_33](/i/li/?n=2&i=images/blog/202302/15164301_63ec9b153120649180.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
再打印一下
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_34](/i/li/?n=2&i=images/blog/202302/15164301_63ec9b1588a9393968.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_35](/i/li/?n=2&i=images/blog/202302/15164301_63ec9b15f16e641684.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_36](/i/li/?n=2&i=images/blog/202302/15164302_63ec9b165ea586328.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_37](/i/li/?n=2&i=images/blog/202302/15164302_63ec9b16e169263461.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
.（打个点）属性名就可以全部得到
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_38](/i/li/?n=2&i=images/blog/202302/15164303_63ec9b17626a341994.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_39](/i/li/?n=2&i=images/blog/202302/15164303_63ec9b17ebb7e95802.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
所以我们完全可以看出，图标就是由这个span标签来控制的
我们把span标签拿出来
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_40](/i/li/?n=2&i=images/blog/202302/15164304_63ec9b18530612000.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_41](/i/li/?n=2&i=images/blog/202302/15164304_63ec9b18bc7de19430.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_42](/i/li/?n=2&i=images/blog/202302/15164305_63ec9b194307d2680.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
到这里大方向就有了
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_43](/i/li/?n=2&i=images/blog/202302/15164305_63ec9b19d3f8188034.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
11-前端-显示图标-代码实现（-页面显示树形结构）
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_44](/i/li/?n=2&i=images/blog/202302/15164306_63ec9b1a4813d40896.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_45](/i/li/?n=2&i=images/blog/202302/15164306_63ec9b1ac7ced96744.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_46](/i/li/?n=2&i=images/blog/202302/15164307_63ec9b1b3048590.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_47](/i/li/?n=2&i=images/blog/202302/15164307_63ec9b1b7ae3f70803.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
由此我们可以知道 7 就是一个计数的东西，
每生成一个节点就计1个数即每生成一个节点就+1
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_48](/i/li/?n=2&i=images/blog/202302/15164307_63ec9b1bcfac372024.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_49](/i/li/?n=2&i=images/blog/202302/15164308_63ec9b1c2fb8054978.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_50](/i/li/?n=2&i=images/blog/202302/15164308_63ec9b1cb351571241.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_51](/i/li/?n=2&i=images/blog/202302/15164309_63ec9b1d2d23e59881.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
所以获取treeNode的object的tId就可以得到前面的东西了 ico 又是死的所以就很简单了
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_52](/i/li/?n=2&i=images/blog/202302/15164309_63ec9b1daab6f16978.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_53](/i/li/?n=2&i=images/blog/202302/15164310_63ec9b1e05deb3313.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
代码怎么写呢？这样写：
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_54](/i/li/?n=2&i=images/blog/202302/15164310_63ec9b1e5109d85648.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_55](/i/li/?n=2&i=images/blog/202302/15164310_63ec9b1ebeaf725277.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
刷新如果没生效，有时候需要清除一下缓存，因为浏览器会缓存js文件，有时候读取的就一直是旧的js文件
最后就可以了
这样这些图标就全部都是从数据库来的了
至此又完成了一个小目标
12-页面显示树形结构-前端-点了不跑(不跳转页面)
完成了这些之后，下一步，就是增删改查了
怎么在树形菜单上进行增删改，这个是我们接下来要考虑的问题了
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_56](/i/li/?n=2&i=images/blog/202302/15164311_63ec9b1f4d9f372326.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
在此之前我们还得解决一个问题，页面跳转问题，
这种操作问题不好描述，意思就是我们点菜单的时候它会跳转页面，怎么让它不跳
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_57](/i/li/?n=2&i=images/blog/202302/15164311_63ec9b1fbfa7656127.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
我们看文档，文档说的有点不是很清楚
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_58](/i/li/?n=2&i=images/blog/202302/15164312_63ec9b205298e90708.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_59](/i/li/?n=2&i=images/blog/202302/15164312_63ec9b20cf39b38470.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_60](/i/li/?n=2&i=images/blog/202302/15164313_63ec9b213535074922.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
为什么没有404，这是因为zTree给我们控制了，找不到就不发请求，不发请求自然就不会报404
13-页面显示树形结构-前端-添加按钮组-控制span显示
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_61](/i/li/?n=2&i=images/blog/202302/15164313_63ec9b21825b910347.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
移入
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_62](/i/li/?n=2&i=images/blog/202302/15164314_63ec9b223ee9585305.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
移除
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_63](/i/li/?n=2&i=images/blog/202302/15164315_63ec9b230e95c65477.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
14-页面显示树形结构-前端-添加按钮组-填充具体按钮
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_64](/i/li/?n=2&i=images/blog/202302/15164315_63ec9b238032219057.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
按钮增删改查的规则
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_65](/i/li/?n=2&i=images/blog/202302/15164315_63ec9b23d739079226.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_66](/i/li/?n=2&i=images/blog/202302/15164316_63ec9b241e80219062.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_67](/i/li/?n=2&i=images/blog/202302/15164316_63ec9b247d08a48012.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_68](/i/li/?n=2&i=images/blog/202302/15164316_63ec9b24ea8a05614.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
不同级别的菜单，下面对应的level不一样
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_69](/i/li/?n=2&i=images/blog/202302/15164317_63ec9b255ca6c16818.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_70](/i/li/?n=2&i=images/blog/202302/15164317_63ec9b25e7be364375.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_71](/i/li/?n=2&i=images/blog/202302/15164318_63ec9b26599d024973.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_72](/i/li/?n=2&i=images/blog/202302/15164318_63ec9b26b37ab47602.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_73](/i/li/?n=2&i=images/blog/202302/15164319_63ec9b270c6ba78642.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_74](/i/li/?n=2&i=images/blog/202302/15164319_63ec9b2773c6a4945.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_75](/i/li/?n=2&i=images/blog/202302/15164319_63ec9b27e1f1e39108.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_76](/i/li/?n=2&i=images/blog/202302/15164320_63ec9b285840a84949.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_77](/i/li/?n=2&i=images/blog/202302/15164320_63ec9b28c651626264.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_78](/i/li/?n=2&i=images/blog/202302/15164321_63ec9b293ae7c83350.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_79](/i/li/?n=2&i=images/blog/202302/15164321_63ec9b29c975474571.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_80](/i/li/?n=2&i=images/blog/202302/15164322_63ec9b2a5128529287.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
同理，把删除的、新增的都拿出来
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_81](/i/li/?n=2&i=images/blog/202302/15164322_63ec9b2aaad3f9699.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_82](/i/li/?n=2&i=images/blog/202302/15164323_63ec9b2b5d23155324.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
把其中的a标签 表示的 增 删 改 分别 提取出来
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_83](/i/li/?n=2&i=images/blog/202302/15164323_63ec9b2bc318c91442.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
只保留a标签即可
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_84](/i/li/?n=2&i=images/blog/202302/15164324_63ec9b2c51ade63983.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_85](/i/li/?n=2&i=images/blog/202302/15164324_63ec9b2cf095287509.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_86](/i/li/?n=2&i=images/blog/202302/15164325_63ec9b2d8a55847592.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
menu的所有属性，在treeNode里面都有
加个id 是为了后面的 this.id能够生效
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_87](/i/li/?n=2&i=images/blog/202302/15164326_63ec9b2e1fa0a65971.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_88](/i/li/?n=2&i=images/blog/202302/15164326_63ec9b2e7bc8958555.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
上图只是一个模板，还不能完全按照它的来，比如，如果下面还有子节点的情况，肯定不能删
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_89](/i/li/?n=2&i=images/blog/202302/15164327_63ec9b2f0f37264374.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_90](/i/li/?n=2&i=images/blog/202302/15164327_63ec9b2f8e7bf75735.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
加注释
// 在鼠标移入节点范围时添加按钮组
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_91](/i/li/?n=2&i=images/blog/202302/15164327_63ec9b2feeda323276.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
刷新看效果
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_92](/i/li/?n=2&i=images/blog/202302/15164328_63ec9b305660914223.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
15-页面显示树形结构-前端-添加按钮组-小结
记一下笔记没了
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_93](/i/li/?n=2&i=images/blog/202302/15164328_63ec9b30bbeff40176.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
再写一个离开的方法
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_94](/i/li/?n=2&i=images/blog/202302/15164329_63ec9b31156d929886.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_95](/i/li/?n=2&i=images/blog/202302/15164329_63ec9b315b5b115090.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
16-页面显示树形结构-前端-把生成树形结构的代码封装到函数
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_树形结构_96](/i/li/?n=2&i=images/blog/202302/15164329_63ec9b31b15d5866.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
所以我们把它封装到js文件里面去
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_97](/i/li/?n=2&i=images/blog/202302/15164330_63ec9b322916b44566.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_98](/i/li/?n=2&i=images/blog/202302/15164330_63ec9b32e0b8649182.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_99](/i/li/?n=2&i=images/blog/202302/15164331_63ec9b337596699377.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_子节点_100](/i/li/?n=2&i=images/blog/202302/15164332_63ec9b341753b52045.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_101](/i/li/?n=2&i=images/blog/202302/15164332_63ec9b34997d932608.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
17-增删改-确认on()函数可以绑定单击响应函数
前面我们说过 如果 on函数不行 我们就用 onclick( )
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_102](/i/li/?n=2&i=images/blog/202302/15164332_63ec9b34e99a020685.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
如果on 可以使用，那我们就可以不使用 onclick( )了
我们现在要做的就是确认一下
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_103](/i/li/?n=2&i=images/blog/202302/15164333_63ec9b358badb55007.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_java_104](/i/li/?n=2&i=images/blog/202302/15164334_63ec9b362441e47326.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
测试这个on能不能用 就是这么简单
然后刷新 测试一下
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_前端_105](/i/li/?n=2&i=images/blog/202302/15164334_63ec9b367f5f487356.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
注意ctrl+F5 连同js一起刷新，这样就不用清理缓存了
这个非常重要，我们有时候刷新之后，页面不生效，甚至我们要清理缓存页面才生效
原因是因为 浏览器会缓存js文件，所以我们修改了js后，浏览器默认读取的
还是浏览器缓存的旧的 js，所以我们必须要按Ctrl+F5，连同js一起刷新，或者清除缓存，
我以前不懂，所以一直清理缓存，也不知道其中缘由，所以我觉得这个技巧非常重要
大家一起共勉
还有一种方式：引入外部js的时候?加任意数字
![项目一众筹网05_02_[树形开发]菜单管理、API文档发布到web服务器、配置文件里面修改tomcat的默认端口号、zTree的使用、ctrl+F5 连同js一起刷新，这样就不用清理缓存了、清理缓存_tomcat_106](/i/li/?n=2&i=images/blog/202302/15164334_63ec9b36a8fa838850.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
18-添加子节点-目标和思路（下一篇）
19-添加子节点-前端：打开模态框
20-添加子节点-前端：发送Ajax请求
21-添加子节点-后端
22-更新节点-目标和思路
23-更新节点-前端：打开模态框
24-更新节点-前端：发送Ajax请求
25-更新节点-后端
26-更新节点-小结
27-删除节点-目标和思路
28-删除节点-前端：打开模态框
29-删除节点-前端：发送Ajax请求
30-删除节点-后端
31-@RestController注解