使用el-tree完成页面新增,修改,删除,拖拽,查询 功能 前端使用vue2 后台java实现完整接口过程

下面是使用 el-tree 完成页面新增、修改、删除、拖拽和查询功能的前端 Vue2 和后台 Java 实现完整的接口过程：

前端 Vue2 实现：

1. 安装 Element UI 和 axios：

npm install element-ui axios --save

2. 在 main.js 中引入 Element UI 和 axios：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';

Vue.use(ElementUI);
Vue.prototype.$http = axios;

3. 在组件中引入 el-tree 并添加相应的事件：

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
    @node-contextmenu="handleNodeContextmenu"
    @node-drop="handleNodeDrop"
    default-expand-all
    :filter-node-method="filterNode"
  >
    <template v-slot="{ node, data }">
      <span>{{ node.label }}</span>
      <span class="buttons">
        <el-button @click.stop="handleAddNode(node)">新增</el-button>
        <el-button @click.stop="handleEditNode(node)">修改</el-button>
        <el-button @click.stop="handleDeleteNode(node)">删除</el-button>
      </span>
    </template>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    handleNodeClick(data, node, instance) {
      // 点击节点事件
    },
    handleNodeContextmenu(data, node, instance) {
      // 节点右键菜单事件
    },
    handleNodeDrop(draggingNode, dropNode, type, ev) {
      // 拖拽事件
    },
    filterNode(value, data) {
      // 查询事件
    },
    handleAddNode(node) {
      // 新增节点事件
    },
    handleEditNode(node) {
      // 修改节点事件
    },
    handleDeleteNode(node) {
      // 删除节点事件
    },
  },
};
</script>

4. 在相应的事件中使用 axios 发送请求到后台：

handleAddNode(node) {
  this.$prompt('请输入节点名称', '新增节点', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(({ value }) => {
      this.$http.post('/api/addNode', {
        parentId: node.id,
        label: value,
      })
        .then(() => {
          this.$message.success('新增节点成功');
          this.loadData();
        })
        .catch((error) => {
          this.$message.error('新增节点失败');
        });
    })
    .catch(() => {});
},
handleEditNode(node) {
  this.$prompt('请输入节点名称', '修改节点', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: node.label,
  })
    .then(({ value }) => {
      this.$http.post('/api/updateNode', {
        id: node.id,
        label: value,
      })
        .then(() => {
          this.$message.success('修改节点成功');
          this.loadData();
        })
        .catch((error) => {
          this.$message.error('修改节点失败');
        });
    })
    .catch(() => {});
},
handleDeleteNode(node) {
  this.$confirm('是否删除该节点?', '删除节点', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      this.$http.post('/api/deleteNode', {
        id: node.id,
      })
        .then(() => {
          this.$message.success('删除节点成功');
          this.loadData();
        })
        .catch((error) => {
          this.$message.error('删除节点失败');
        });
    })
    .catch(() => {});
},

5. 在 mounted 钩子函数中加载数据：

mounted() {
  this.loadData();
},
methods: {
  loadData() {
    this.$http.get('/api/getData')
      .then((response) => {
        this.data = response.data;
      })
      .catch((error) => {
        this.$message.error('获取数据失败');
      });
  },
},

后台 Java 实现：

1. 使用 Spring Boot 框架创建项目：

spring init --dependencies=web,data-jpa,mysql PROJECT_NAME

2. 在 application.properties 中配置数据库连接信息：

spring.datasource.url=jdbc:mysql://localhost:3306/TREE_DATABASE?useUnicode=true&characterEncoding=utf8&useSSL=false&allowPublicKeyRetrieval=true
spring.datasource.username=USERNAME
spring.datasource.password=PASSWORD

3. 创建实体类：

@Entity
@Table(name = "tree_node")
public class TreeNode {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String label;
    private Long parentId;
    @OneToMany(mappedBy = "parent")
    private List<TreeNode> children;
    @ManyToOne
    @JoinColumn(name = "parent_id", insertable = false, updatable = false)
    private TreeNode parent;
    // getter 和 setter 方法
}

4. 创建 DAO 接口：

public interface TreeNodeRepository extends JpaRepository<TreeNode, Long> {
    List<TreeNode> findByParentId(Long parentId);
}

5. 创建 Service 类：

@Service
public class TreeNodeService {
    @Autowired
    private TreeNodeRepository treeNodeRepository;
    public List<TreeNode> findAll() {
        return treeNodeRepository.findByParentId(null);
    }
    public void add(TreeNode treeNode) {
        treeNodeRepository.save(treeNode);
    }
    public void update(TreeNode treeNode) {
        treeNodeRepository.save(treeNode);
    }
    public void delete(Long id) {
        treeNodeRepository.deleteById(id);
    }
}

6. 创建 Controller 类：

@RestController
@RequestMapping("/api")
public class TreeNodeController {
    @Autowired
    private TreeNodeService treeNodeService;
    @GetMapping("/getData")
    public List<TreeNode> getData() {
        return treeNodeService.findAll();
    }
    @PostMapping("/addNode")
    public void addNode(@RequestBody TreeNode treeNode) {
        treeNodeService.add(treeNode);
    }
    @PostMapping("/updateNode")
    public void updateNode(@RequestBody TreeNode treeNode) {
        treeNodeService.update(treeNode);
    }
    @PostMapping("/deleteNode")
    public void deleteNode(@RequestParam Long id) {
        treeNodeService.delete(id);
    }
}

7. 运行项目，后台接口就可以提供给前端使用了。

以上就是使用 el-tree 完成页面新增、修改、删除、拖拽和查询功能的前端 Vue2 和后台 Java 实现完整的接口过程。