2024年最全干货 如何生成和展示二维码(前后端)_前端生成二维码(1)，面试web前端开发的面试题

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

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

前端面试题汇总

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

JavaScript

性能

linux

  this.$nextTick(function () {
    document.getElementById("qrCodeUrl").innerHTML = "";
    let qrCodeUrl = new QRCode("qrCodeUrl", {
      width: 250,
      height: 250,
      text: this.originUrl, #这里就是二维码内的信息，一般可以扫描连接进行调整或其他
      colorDark: "#409EFF",
      colorLight: "#fff"
    });
  });
}

}
}

其他根据业务逻辑进行展示和处理就行。


#### 二、后端生成二维码


后端生成二维码的轮子就更多了，一层套一层的，我们可以选择一个最为简单的，就是引入hutool的依赖，当然觉得重的，可以自己选用zxing原生实现即可。


* pom文件引入：

	<dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
        <version>5.8.12</version>
    </dependency>
    <dependency>
        <groupId>com.google.zxing</groupId>
        <artifactId>core</artifactId>
        <version>3.4.1</version>
    </dependency>

* 样例代码：

@GetMapping("qrcode")
@ResponseBody
public void generateQrcode(HttpServletRequest request, HttpServletResponse response){
    String qrCodeUrl = "http://www.baidu.com";//需要生成的内容
    try {
        QrConfig qrConfig = new QrConfig(300, 300);
        //imageType可选："gif";"jpg";"jpeg"；"bmp";"png";"psd";"gif";"jpg";"jpeg"；"bmp";"png";"psd";
        QrCodeUtil.generate(qrCodeUrl, qrConfig, "png", response.getOutputStream());
        System.out.println("生成二维码成功!");
    } catch (QrCodeException | IOException e) {
        System.out.println("发生错误！ {}！"+ e.getMessage());
    }
}

前端可以使用流来接收，将图片呈现出来，也可以直接当做图片下载

接收数据展示

以上都是直接有的轮子，开箱即用。


#### 附：下载二维码


通常页面查看了二维码都会附加下载，将二维码放到其他渠道引流，所以以上是能够从接口或者前端页面获取到二维码的预览了，那么想下载怎么操作呢？


接口部分，直接在浏览器请求接口数据，浏览器就能自动预览，你可以通过截图等方法直接拿到二维码文件。


前端页面部分，我们以来的qrcodejs的组件已经将二维码信息渲染在页面上了，基本思路是可以获取页面渲染的图片数据，直接通过按钮触发<a>标签的形式将页面数据下载。  
 以下为样例代码：

download() {

TCP协议

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

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

浏览器篇

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

说浏览器的本地存储？各自优劣如何？

• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-Hj2HyIVw-1715681686216)]