最常见的需求基于Vue的批量删除你会嘛

批量删除

====

分析

–

• 前端提交数组（一组数据），后端采用List接收，并遍历依次删除

后端

–

post http://localhost:8888/student/batchDelete

['s001','s002']

• 步骤：

  • 步骤1：编写service，获得所有id，遍历依次删除（拼条件 where sid in (‘s001’,‘s002’)）

  • 步骤2：编写controller，使用List接收json数组

• 步骤1：编写service，获得所有id，遍历依次删除（拼条件 where sid in (‘s001’,‘s002’)）

  • 接口

    /**

     * 批量删除

     * @param ids

     * @return

     */

    public void batchDelete(List<String> ids);

• 实现类

    @Override

    public void batchDelete(List<String> ids) {

        // 遍历，依次删除

        ids.forEach(id -> {

            studentMapper.deleteByPrimaryKey(id);

        });

    }

步骤2：编写controller，使用List接收json数组

    /**

     * 批量删除

     * @param ids

     * @return

     */

    @PostMapping("/batchDelete")

    public BaseResult batchDelete(@RequestBody List<String> ids) {

        try {

            // 删除

            studentService.batchDelete(ids);

            // 提示

            return BaseResult.ok("删除成功");

        } catch (Exception e) {

            e.printStackTrace();

            return BaseResult.error(e.getMessage());

        }

   

• 测试

前端

–

• 步骤：

  • 步骤1：声明变量deleteIds:[]

  • 步骤2：变量与复选框绑定

  • 步骤3：点击按钮进行删除

• 步骤1：声明变量deleteIds:[]

• 步骤2：变量与复选框绑定

• 步骤3：点击按钮进行删除

    // 8.3.2 批量删除函数

    async batchDeleteStudent() {

      // 1)询问

      if(!confirm('您确定要删除么？')) {

        return;

      }

      // 2)ajax

      let {data:baseResult} = await axios.post('http://localhost:8888/student/batchDelete', this.deleteIds)

      // 3)提示

      if(baseResult.code == 20000) {

        // 3.1)成功 -- 重新查询

        this.condition(1)

      } else {

        // 3.2)失败

        alert(baseResult.message)

      }

    },

删除

==

• 思路：

  • 步骤1：将需要删除的sid，添加到批量删除的变量数组中

  • 步骤2：调用批量删除的功能

• 步骤1：将需要删除的sid，添加到批量删除的变量数组中

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】