干货 如何生成和展示二维码(前后端)_前端生成二维码

大家好，欢迎来到IT知识分享网。

• 二、后端生成二维码
• 附：下载二维码

一、前端生成二维码

• package.json 引入依赖： “qrcodejs2”: “0.0.2”
• 代码中引入并使用

<template> <div> <el-button type="text" @click="refreshQrCode"><i class="el-icon-refresh"></i>点击刷新二维码</el-button> <div id="qrCodeUrl" style="margin-left: 40%;height:250px"></div> </div> </template> <script setup> import QRCode from 'qrcodejs2'; export default { name: 'Template', data() { return { originUrl:'http://www.baidu.com' } }, methods: { refreshQrCode() { this.$nextTick(function () { document.getElementById("qrCodeUrl").innerHTML = ""; let qrCodeUrl = new QRCode("qrCodeUrl", { width: 250, height: 250, text: this.originUrl, #这里就是二维码内的信息，一般可以扫描连接进行调整或其他 colorDark: "#409EFF", colorLight: "#fff" }); }); } } } </script> <style lang="scss" scoped> </style> 

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

二、后端生成二维码

后端生成二维码的轮子就更多了，一层套一层的，我们可以选择一个最为简单的，就是引入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()); } } 

对象篇

模块化编程-自研模块加载器