谷粒商城实战-58-商品服务-API-三级分类-删除-批量删除小结

news2024/11/13 10:18:58

文章目录

一，增加一个批量删除的按钮并绑定事件
二，全栈工程师
三，逆向工程在全栈开发中的应用
- 提升效率的方式：
- 使用案例：

这一节的主要内容是开发批量删除分类的功能。

一，增加一个批量删除的按钮并绑定事件

在这里插入图片描述

  <el-button type="danger" @click="batchDelete">批量删除</el-button>

为了使用el-tree的方法获取选中的节点，需要给el-tree一个引用属性ref。

在这里插入图片描述

绑定的注册事件如下。

batchDelete() {
      // 1，获取被选中的结点
      var checkedNodes = this.$refs.tree.getCheckedNodes();
      if (checkedNodes.length === 0) {
        this.$message.error("请先选需要删除的分类");
        return;
      }

      // 2，将被选中的结点的catId接成一个数组，并作为参数，调用后端接口，删除这些结点
      var catIds = checkedNodes.map((node) => node.data.catId);
      this.$http({
        url: this.$http.adornUrl("/product/category/delete"),
        method: "post",
        data: this.$http.adornData(catIds, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              console.log("删除成功，关闭消息提示");
              this.getMenus(); // 重新获取数据
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });

      
    },

这段代码是一个用于批量删除选定节点的功能，它是在一个前端Vue.js应用中实现的。下面是对这段代码的详细解释：

获取被选中的结点:
```
var checkedNodes = this.$refs.tree.getCheckedNodes();
```
- this.$refs.tree 是一个对Vue组件内部元素或子组件的引用，在这里应该是指向了一个树形控件。
- getCheckedNodes() 是这个树形控件的一个方法，用来获取所有被选中的节点。
检查是否有结点被选中:
```
if (checkedNodes.length === 0) {
  this.$message.error("请先选需要删除的分类");
  return;
}
```
- 如果没有节点被选中，则通过 this.$message.error 显示一条错误消息，并返回，不执行后续操作。
提取选中结点的ID:
```
var catIds = checkedNodes.map((node) => node.data.catId);
```
- map 方法用于遍历 checkedNodes 数组，并为每个节点提取 catId 属性。catId 假设是节点数据中的一个属性，表示类别ID。
发送HTTP请求删除结点:
```
this.$http({
  url: this.$http.adornUrl("/product/category/delete"),
  method: "post",
  data: this.$http.adornData(catIds, false),
}).then(({ data }) => {
  // ...
});
```
- 使用 $http 发送一个POST请求到 /product/category/delete URL，用于删除指定的类别。
- this.$http.adornUrl 和 this.$http.adornData 可能是自定义的方法，用于处理URL和数据，比如添加一些额外的信息或者格式化数据。
- catIds 被传递给 adornData 方法作为数据体。

处理响应结果:

如果服务器返回的状态码是 0，则认为操作成功，并显示一条成功消息。

if (data && data.code === 0) {
  this.$message({
    message: "操作成功",
    type: "success",
    duration: 1500,
    onClose: () => {
      console.log("删除成功，关闭消息提示");
      this.getMenus(); // 重新获取数据
    },
  });
} else {
  this.$message.error(data.msg);
}

成功消息会在1.5秒后自动关闭，并调用 this.getMenus 方法重新获取数据。
如果返回的状态码不是 0，则显示一条错误消息，其中 data.msg 应该包含了具体的错误信息。

二，全栈工程师

全栈工程师的工作内容通常涵盖了从前端用户界面开发到后端服务器逻辑与数据库管理的整个软件开发过程。具体来说，他们的职责可能包括但不限于以下几个方面：

前端开发:
- 开发和维护网站的用户界面（UI）和用户体验（UX）。
- 使用HTML、CSS、JavaScript等技术构建响应式和交互式的网页。
- 集成前端框架和库，如React、Angular或Vue.js。
后端开发:
- 设计和实现服务器端逻辑。
- 开发RESTful API接口。
- 数据库设计、优化查询性能。
- 使用Node.js、Python、Java、Ruby等语言编写后端服务。
系统架构:
- 设计可扩展的应用程序架构。
- 选择合适的技术栈和技术方案。
测试与部署:
- 编写自动化测试脚本。
- 执行单元测试、集成测试和系统测试。
- 部署应用程序到生产环境。
持续集成/持续部署 (CI/CD):
- 实施持续集成流程。
- 使用Docker容器化应用。
- 配置自动化部署管道。
安全性:
- 实现安全措施来保护应用程序免受攻击。
- 加密敏感数据。
- 遵守数据保护法规。
性能优化:
- 优化前端加载速度和用户体验。
- 优化数据库查询和缓存策略。
- 监控应用性能并进行调优。
故障排查与维护:
- 解决生产环境中出现的问题。
- 维护现有系统并修复bug。