[TOC]
⼀般来说后端会提供接⼝将当前章节最新顺序上传，但项⽬中没有提供这样的接⼝，提供的是单个课时位置更新的接⼝，所以我们需要遍历列表，依次更新处理（好处是可以练习批量请求的处理操作）。

⾸先封装相关接⼝：

⽤于更新章节信息的 saveOrUpdateSection 接⼝。 ⽤于更新课时的 saveOrUpdateLesson 接⼝（位于⽂档的课时内容分类下）。 // services/course-section.js … // 新增或更新章节 export const saveOrUpdateSection = data => { return request({ method: ‘POST’, url: ‘/boss/course/section/saveOrUpdateSection’, data }) } // 新增或更新课时（因课时功能较少，此处未单独封装模块，可⾃⾏处理） export const saveOrUpdateLesson = data => { return request({ method: ‘POST’, url: ‘/boss/course/lesson/saveOrUpdate’, data }) }

Tree 组件提供了 node-drop ⽅法（事件）⽤于设置拖动后的处理。

// section.vue … … @node-drop=“handleNodeDrop” > … …

设置完毕，可以在请求过程中添加 loading 效果，以体会 Promise.all() 的好处。

示例中为“遍历+请求”结构，这时如果设置 await 就会变成⼀个⼀个顺序发送请求。 通过 Promise.all() 可以统⼀发送，并统⼀进⾏结束处理，⼗分⽅便。 // course-section.vue … v-loading=“isLoading” … > … 完成。此部分主要为业务练习，实际开发时让后端提供对应接⼝即可快速实现了。