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

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

一、前端生成二维码

• 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());
        }
    }

对象篇

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