2024年最常见的需求基于Vue的批量删除你会嘛(2)，2024最新前端高频精选面试题讲解

2401_84616399

于 2024-05-14 20:56:29 发布

阅读量250

点赞数 7

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84616399/article/details/138869900

版权

程序员专栏收录该内容

102 篇文章 0 订阅

订阅专栏

TCP协议

TCP 和 UDP 的区别？
TCP 三次握手的过程？
为什么是三次而不是两次、四次？
三次握手过程中可以携带数据么？
说说 TCP 四次挥手的过程
为什么是四次挥手而不是三次？
半连接队列和 SYN Flood 攻击的关系
如何应对 SYN Flood 攻击？
介绍一下 TCP 报文头部的字段
TCP 快速打开的原理(TFO)
说说TCP报文中时间戳的作用？
TCP 的超时重传时间是如何计算的？
TCP 的流量控制
TCP 的拥塞控制
说说 Nagle 算法和延迟确认？
如何理解 TCP 的 keep-alive？

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

浏览器篇

浏览器缓存?
说一说浏览器的本地存储？各自优劣如何？
说一说从输入URL到页面呈现发生了什么？
谈谈你对重绘和回流的理解
XSS攻击
CSRF攻击
HTTPS为什么让数据传输更安全？
实现事件的防抖和节流？
实现图片懒加载？

    });

}




步骤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());

    }




*   测试

    



![](https://img-blog.csdnimg.cn/ca5e377f339946a28666bdfdd9329463.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)



前端

--



*   步骤：

    

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

        

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

        

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

        

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

    



![](https://img-blog.csdnimg.cn/ab4a33348809412fb29ab730e01ab835.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_17,color_FFFFFF,t_70,g_se,x_16)



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



![](https://img-blog.csdnimg.cn/eaeec772ce294738ab7c3a89a2b3c721.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)



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



![](https://img-blog.csdnimg.cn/80c5335b62ac4c2c85693058eaf5c68e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)

// 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，添加到批量删除的变量数组中

    



![](https://img-blog.csdnimg.cn/b4742f59868342c18ff2001e0cb8dbc2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)



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



![](https://img-blog.csdnimg.cn/a26dd09d43a441849430232b97a58c94.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)

deleteStudent(sid) {

  // 将sid添加到批量删除的数组中

  this.deleteIds.push(sid)

  // 调用批量删除

  this.batchDeleteStudent()

  // 清空数据

  this.deleteIds = []

}




全选按钮

====



效果

--



效果1：全选按钮，控制列表项



*   全选选中，列表都选中

    



![](https://img-blog.csdnimg.cn/ec5e05942aa64d729b689517513549ce.png)



*   全选不选中，列表都不选中  



![](https://img-blog.csdnimg.cn/fc7892fb3d73436895653f1d2dbba54d.png)



步骤2：列表项，控制全选按钮



*   最后一个列表选中了，全选要选中

    



![](https://img-blog.csdnimg.cn/d22c27790e3b40fa9145ef1bbad49c5e.png)



*   任意一个列表不选中，全选不选中  



![](https://img-blog.csdnimg.cn/27638cc437f640348a695eda148bea90.png)



效果1：全选按钮，控制列表项


### 最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

*   HTML5新特性，语义化

*   浏览器的标准模式和怪异模式

*   xhtml和html的区别

*   使用data-的好处

*   meta标签

*   canvas

*   HTML废弃的标签

*   IE6 bug，和一些定位写法

*   css js放置位置和原因

*   什么是渐进式渲染

*   html模板语言

*   meta viewport原理

![](https://img-blog.csdnimg.cn/img_convert/64590c67cb47cd552a892ba710477f64.png)

*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/17fdfcb90fad04acc5e7273d1f853880.png)



置和原因

*   什么是渐进式渲染

*   html模板语言

*   meta viewport原理

![](https://img-blog.csdnimg.cn/img_convert/64590c67cb47cd552a892ba710477f64.png)

*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/17fdfcb90fad04acc5e7273d1f853880.png)