springboot vue front-end dan back-end antara muka ujian kaedah fungsi penambahan nod pokok

Uji pembangunan platform berdasarkan springboot+vue

1 Kaedah tambahkan kawalan pokok bahagian hadapan

Terdapat kaedah append di bawah kawalan pokok elementUI, yang boleh digunakan untuk menambah Tambah nod anak pada nod dalam .

Pada masa ini, kami telah melengkapkan antara muka senarai pokok Kami boleh mengeluarkan apa yang ada dalam data masuk dalam kaedah tambah.

console.log('传入的node：' + JSON.stringify(data))

Klik pada nod lalai peringkat atas, F12 untuk melihat konsol,

Anda boleh lihat:

Memformatkannya sebenarnya ialah struktur pokok bagi keseluruhan nod. Nod mana yang diklik, kandungan data adalah semua data nod di bawah nod ini.

Tetapi sebenarnya, saya hanya memerlukan data nod yang sedang diklik. Saya tidak perlu mengambil berat tentang kanak-kanak di bawah nod ini, bagaimanapun, memandangkan jumlah data tidak besar, saya hanya lulus ia ke bahagian belakang secara keseluruhannya.

2. Pelaksanaan back-end antara muka baharu nod

Fungsi yang saya ingin laksanakan ialah mengklik butang tambah nod mana, iaitu menambah nod anak nod ini, seperti sebagai:

Memandangkan bahagian hadapan boleh mendapatkan data nod semasa, idea menambah antara muka baharu juga ada:

Dapatkan masa penciptaan set data nod semasa yang diluluskan oleh bahagian hadapan, Set masa kemas kini ialah pos, iaitu susunan kedudukan nod anak yang baru ditambah antara nod adik-beradik ditetapkan, yang mana ialah tahap nod semasa + 1. Nod induk nod anak ialah antara muka masuk semasa Idset nod menambah nama nod baharu, = akhirnya masukkan

1 🎜>

Tambah kaedah pengawal yang sepadan:

@PostMapping("/add")
  public Result addNode(@RequestBody ApiModule node) {
      try {
          System.out.println(node);
          Long nodeId = apiModuleService.addNode(node);
          return Result.success(nodeId);
      } catch (Exception e) {
          return Result.fail(e.toString());
      }
  }

2. Lapisan perkhidmatan

Laksanakan kaedah addNode:

public Long addNode(ApiModule node) {
        node.setCreateTime(new Date());
        node.setUpdateTime(new Date());
        double pos = getNextLevelPos(node.getProjectId(), node.getLevel(), node.getId());
        node.setPos(pos);
        node.setLevel(node.getLevel() + 1);
        node.setParentId(node.getId());
        node.setName("ceshi111");
        apiModuleDAO.insert(node);
        return node.getId();
    }

Ini dilaksanakan mengikut idea di atas digantikan buat sementara dengan nilai tetap Pertama, semak sama ada antara muka baharu boleh dilaksanakan secara normal.

Pemprosesan pos di sini sedikit lebih menyusahkan Ini mewakili susunan kedudukan nod yang baru ditambah, jadi saya mengekstraknya dan menambah kaedah baharu untuk melaksanakan

: getNextLevelPos

private double getNextLevelPos(Long projectId, int level, Long nodeId) {
      // 查询项目下，同parentId下，所有节点
      QueryWrapper<ApiModule> queryWrapper = new QueryWrapper<>();
      queryWrapper.eq("projectId", projectId)
                  .eq("level", level + 1)
                  .eq("parentId", nodeId)
                  .orderByDesc("pos");
      List<ApiModule> apiModules = apiModuleDAO.selectList(queryWrapper);
      if (!CollectionUtil.isEmpty(apiModules)) {
          // 不为空，获取最新的同级结点 pos 再加 1，作为下一个
          return apiModules.get(0).getPos() + 1;
      } else {
          // 否则就是当前父节点里的第一个子结点，pos 直接为 1
          return 1;
      }
  }

Di bawah. projek pertanyaan, Sama seperti parentId, semua data nod, beri perhatian kepada syarat pertanyaan di sini.

.eq("level", level + 1), level semasa + 1 digunakan sebagai level node.eq("parentId", nodeId), nod semasa digunakan sebagai induk nod

dan kemudian dinilai Hasil daripada pertanyaan, jika senarai tidak kosong, pos nod anak terbaharu tambah 1 dikembalikan sebagai kedudukan nod anak seterusnya.

Jika tidak, nod yang baru ditambah ialah nod anak pertama dalam nod induk semasa dan 1 dikembalikan terus sebagai nilai pos.

3. Penyahpepijatan bersama bahagian hadapan dan belakang

Tulis antara muka di bahagian hadapan, dan kemudian panggil antara muka pada halaman.

Panggil antara muka, tambah gesaan kejayaan, dan kemudian muat semula senarai pokok.

berfungsi seperti biasa Nod anak dengan nama tetap "ceshi111" ditambah di bawah nod yang sepadan dan pepohon dimuatkan semula untuk memaparkan data terkini.

4. Edit nama nod

Di atas sudah selesai, yang membuktikan tiada masalah besar dengan fungsi tersebut masalah mengedit nama nod. Memutuskan untuk menggunakan kotak dialog untuk menyelesaikan masalah.

Klik butang Tambah untuk membuka kotak dialog, di mana anda boleh memasukkan nama nod dan menyimpannya. Kotak dialog ini juga tersedia untuk mengedit adegan.

Dalam fungsi pengurusan projek, saya telah menggunakan kotak dialog sekali saya terus menyalin kod yang berkaitan dan mengubah suainya.

sepadan dengan pulangan:

Akan ada 2 butang dalam kotak dialog: Batal dan Simpan. Apabila anda mengklik butang simpan, kaedah yang berbeza akan dipanggil bergantung pada sama ada ia baharu atau diubah suai.

1 Buka kotak dialog

Ubah suai kaedah tambah dan buka kotak dialog apabila mengklik butang baharu.

Terdapat satu lagi perkara penting, kerana menambah nod memerlukan penghantaran data, dan kini operasi penambahan sebenar ialah kaedah handleNodeAdd. Jadi anda perlu menyimpan data semasa membuka kotak dialog.

Jadi, buat medan currentNode baharu sebagai balasan: {}:

Tetapkan data kepada currentNode dalam kaedah tambah:

Di sini this.dialogStatus = 'create' adalah untuk memaparkan kotak dialog.

2. Tambahkan nod baharu

Masukkan nama nod dalam kotak dialog, klik Simpan, dan kemudian panggil kaedah handleNodeAdd untuk meminta antara muka hujung belakang.

Oleh kerana nama nod yang dihantar ke hujung belakang dimasukkan oleh kami, jadi di sini this.currentNode.name = this.form.nodeName.

Berikan gesaan selepas permintaan berjaya, dan kemudian kosongkan borang untuk mengelak daripada memaparkan kandungan terakhir selepas membuka kotak dialog.

3. Ujian

Untuk menguji sama ada fungsi itu normal, saya memadamkan nod di bawah project id=3.

Tambahkan nod ujian baharu:

Fungsi adalah normal.

Atas ialah kandungan terperinci springboot vue front-end dan back-end antara muka ujian kaedah fungsi penambahan nod pokok. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!