第十四届蓝桥杯Web大学组第十题组课神器

第一问，功能为根据请求⽅式 method 不同，拿到树型组件的数据并返回

注意点在于要用好ajax方法中的三个参数url method data

async function ajax({ url, method = "get", data }) {
  let result;
  // TODO：根据请求方式 method 不同，拿到树型组件的数据
  // 当method === "get" 时，localStorage 存在数据从 localStorage 中获取，不存在则从 /js/data.json 中获取
  // 当method === "post" 时，将数据保存到localStorage 中，key 命名为 data
  if(method === "get"){
    const localData = localStorage.getItem("data")
    if(localData){
        result = JSON.parse(localData)
    }else{
      const res = await axios.get(url)
      result = res.data.data
    }
  }else if(method === "post"){
      localStorage.setItem("data",JSON.stringify(data))
  }
  return result;
}

第二问，补全 js/index.js ⽂件中的 treeMenusRender 函数，使⽤所传参数 data ⽣成指定 DOM 结构 的模板字符串（完整的模板字符串的 HTML 样例结构可以在 index.html 中查看），并在包含 .tree-node 的元素节点上加上指定属性如下

我的做法是直接使用循环来进行渲染，然后将数据直接放入到模板字符串中，拼接好返回

function treeMenusRender(data, grade = 0) {
  let treeTemplate = "";
  // TODO：根据传入的 treeData 的数据生成树型组件的模板字符串
  for(let i = 0;i < data.length;i++){
    grade = 1
    treeTemplate += `<div class="tree-node" data-index="${data[i].id}" data-grade="${grade}">
      <div class="tree-node-content" style="margin-left: 0px">
      <div class="tree-node-content-left">
        <img src="./images/dragger.svg" alt="" class="point-svg" />
        <span class="tree-node-label">${data[i].label}</span>
        <img class="config-svg" src="./images/config.svg" alt="" />
      </div>
    </div>
    <div class="tree-node-children">
      `
  let treeNodeChildrenTemplate = ""
    for(let j = 0;j < data[i].children.length;j++){
      grade = 2
      treeNodeChildrenTemplate += `<div class="tree-node" data-index="${data[i].children[j].id}" data-grade="${grade}">
      <div class="tree-node-content" style="margin-left: 15px">
      <div class="tree-node-content-left">
        <img src="./images/dragger.svg" alt="" class="point-svg" />
        <span class="tree-node-label">${data[i].children[j].label}</span>
        <img class="config-svg" src="./images/config.svg" alt="" />
      </div>
    </div>
    <div class="tree-node-children">`
      let treeNodeContentTemplate = ''
      for(let k = 0;k < data[i].children[j].children.length;k++){
        grade = 3
        treeNodeContentTemplate += `<div class="tree-node" data-index="${data[i].children[j].children[k].id}" data-grade="${grade}">
        <div class="tree-node-content" style="margin-left: 30px">
          <div class="tree-node-content-left">
            <img src="./images/dragger.svg" alt="" class="point-svg" />
            <span class="tree-node-tag">${data[i].children[j].children[k].tag}</span>
            <span class="tree-node-label">${data[i].children[j].children[k].label}</span>
          </div>
          <div class="tree-node-content-right">
            <div class="students-count">
              <span class="number"> 0人完成</span>
              <span class="line">|</span>
              <span class="number">0人提交报告</span>
            </div>
            <div class="config">
              <img class="config-svg" src="./images/config.svg" alt="" />
              <button class="doc-link">编辑文档</button>
            </div>
          </div>
        </div>
      </div>`
      }
      treeNodeChildrenTemplate += treeNodeContentTemplate + `</div>
      </div>`
    }
    treeTemplate += treeNodeChildrenTemplate + `</div>
    </div>`
  }
  return treeTemplate;
}

第三问，补全 js/index.js ⽂件中的 treeDataRefresh 函数，功能为：根据参数列表 { dragGrade, dragElementId }, { dropGrade, dropElementId } 重新⽣成拖拽后的树型组件 数据 treeData （ treeData 为全局变量，直接访问并根据参数处理后重新赋值即可）。

步骤是先找到需要移动的数据并保存到变量当中，随后将需要移动的数据删除，然后寻找需要移动要的位置，插入数据即可

function treeDataRefresh(
  { dragGrade, dragElementId },
  { dropGrade, dropElementId }
) {
  if (dragElementId === dropElementId) return;
  // TODO：根据 `dragElementId, dropElementId` 重新生成拖拽完成后的树型组件的数据 `treeData`
  if( dragGrade == dropGrade || dragGrade - dropGrade == 1){
    let drapItem = {}
    for(let i = 0;i < treeData.length;i++){
      if(treeData[i].id === Number(dragElementId)){
        drapItem = treeData[i]
        treeData.splice(i,1)
        break
      }
      for(let j = 0;j < treeData[i].children.length;j++){
        if(treeData[i].children[j].id === Number(dragElementId)){
          drapItem = treeData[i].children[j]
          treeData[i].children.splice(j,1)
          break
        }
        for(let k = 0;k < treeData[i].children[j].children.length;k++){
          if(treeData[i].children[j].children[k].id === Number(dragElementId)){
            drapItem = treeData[i].children[j].children[k]
            treeData[i].children[j].children.splice(k,1)
            break
          }
        }
      }
    }
    if(dragGrade == dropGrade){
      for(let i = 0;i < treeData.length;i++){
        if(treeData[i].id === Number(dropElementId)){
          treeData.splice(i+1,0,drapItem)
          return
        }
        for(let j = 0;j < treeData[i].children.length;j++){
          if(treeData[i].children[j].id === Number(dropElementId)){
            treeData[i].children.splice(j+1,0,drapItem)
            return
          }
          for(let k = 0;k < treeData[i].children[j].children.length;k++){
            if(treeData[i].children[j].children[k].id === Number(dropElementId)){
              treeData[i].children[j].children.splice(k+1,0,drapItem)
              return
            }
          }
        }
      }
    }else if(dragGrade - dropGrade == 1){
      for(let i = 0;i < treeData.length;i++){
        if(treeData[i].id === Number(dropElementId)){
          console.log( treeData[i])
          treeData[i].children.unshift(drapItem)
          return
        }
        for(let j = 0;j < treeData[i].children.length;j++){
          if(treeData[i].children[j].id === Number(dropElementId)){
            treeData[i].children[j].children.unshift(drapItem)
            return
          }
        }
      }
    }
  }
}