qrCode前端生成二维码扫描跳转H5(vue3+Java+H5)

在现代 web 开发中，二维码的生成与扫描应用越来越广泛，特别是在移动互联网时代，二维码在支付、分享、登录等场景中都发挥着重要作用。本文将探讨如何使用 Vue 3 前端框架结合 Java 后端来生成二维码，并通过扫描二维码实现跳转到 H5 页面。下面我们将分步理解并实现这个功能。

一、技术栈

• 前端：Vue 3
• 后端：Java（Spring Boot）
• QR 代码生成库：qrcode.js（前端）和 zxing（后端）

二、后端 - Java 生成二维码

首先，我们需要在 Java 后端使用 ZXing 库来生成二维码。ZXing 是一个开源的条形码图像处理库，能够生成和解析二维码。

1. 添加依赖

在 pom.xml 文件中添加 ZXing 的依赖：

<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>core</artifactId>
    <version>3.4.1</version>
</dependency>
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>javase</artifactId>
    <version>3.4.1</version>
</dependency>

2. 创建二维码生成接口

下面是一个简单的控制器，用于生成二维码并返回给前端：

import com.google.zxing.BarcodeFormat;
import com.google.zxing.WriterException;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.QRCodeWriter;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.OutputStream;

@RestController
public class QRCodeController {

    @GetMapping("/generateQRCode")
    public void generateQRCode(@RequestParam String data, HttpServletResponse response) throws IOException {
        QRCodeWriter qrCodeWriter = new QRCodeWriter();
        try {
            BitMatrix bitMatrix = qrCodeWriter.encode(data, BarcodeFormat.QR_CODE, 200, 200);
            response.setContentType("image/png");
            OutputStream outputStream = response.getOutputStream();
            MatrixToImageWriter.writeToStream(bitMatrix, "PNG", outputStream);
            outputStream.flush();
        } catch (WriterException e) {
            e.printStackTrace();
        }
    }
}

三、前端 - Vue 3 生成二维码

接下来实现前端，使用 Vue 3 来生成二维码。

1. 安装 qrcode.js

在项目中安装 qrcode.js：

npm install qrcode-generator

2. 创建二维码组件

创建一个组件 QRCodeGenerator.vue：

<template>
  <div>
    <input v-model="url" placeholder="输入要生成二维码的链接" />
    <button @click="generateQRCode">生成二维码</button>
    <div v-if="qrCodeData">
      <img :src="qrCodeData" alt="二维码" />
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode-generator";

export default {
  data() {
    return {
      url: '',
      qrCodeData: ''
    };
  },
  methods: {
    generateQRCode() {
      const qr = QRCode(0, 'L');
      qr.addData(this.url);
      qr.make();
      this.qrCodeData = qr.createDataURL(6);  // 生成二维码图片的 base64 数据
    }
  }
};
</script>

<style>
/* 添加样式 */
</style>

四、整合与跳转

现在，当用户输入一个链接并点击生成二维码时，二维码就会生成并显示在页面上。用户可以使用任何二维码扫描工具（如手机上的微信、支付宝等）扫描这个二维码，扫码后会跳转到用户输入的 H5 页面。

总结

本文介绍了如何使用 Vue 3 前端框架和 Java 后端技术生成二维码并实现跳转。我们通过后端生成二维码图像，前端生成二维码并展示，用户通过手机扫描二维码实现访问。随着二维码技术的普及，它在未来的应用场景将更加多样化，值得开发者进行深入挖掘和应用。