2024年前端最全最常见的需求基于Vue的批量删除你会嘛，小红书android面试题

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

==

批量删除

====

分析

–

• 前端提交数组（一组数据），后端采用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：调用批量删除的功能

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

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

功能

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

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