二维码简易实现 Vue+Springboot

Vue：

<template>
  <div>
    <img :src="database64" width="150px"/>
    <div>
      注：请使用手机微信扫码，并于2分钟内绑定员工账号（二维码为账号独属，请勿分享）。
    </div>
  </div>
</template>

<script>
import { getQrCode } from "@/api/system/user";
export default {
  data() {
    return {
      database64: "data:image/png;base64,",
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    getCode() {
      getQrCode().then(response => {
        this.database64 = this.database64 + response.data.qrCode;
      });
    }
  }
};
</script>

Springboot：

/**
 * 二维码绑定
 */
@GetMapping("/xcxAuthorize")
public R<Map<String, Object>> xcxAuthorize() {
    String url = "https://gxq.jxca.net/jxcabiz/wxAuthorize";
    LoginUser loginUser = LoginHelper.getLoginUser();
    Long userId = loginUser.getUserId();
    System.out.println(userId);
    String qrUrl = url + "?userId=" + userId.toString();
    BufferedImage generate = QrCodeUtil.generate(qrUrl, 300, 300);
    FastByteArrayOutputStream os = new FastByteArrayOutputStream();
    try {
        ImageIO.write(generate, "jpg", os);
    } catch (IOException e) {
        e.printStackTrace();
    }
    String qrString = Base64.getEncoder().encodeToString(os.toByteArray());
    JSONObject jsonObject = new JSONObject();
    jsonObject.put("qrCode", qrString);
    return R.ok(jsonObject);
}


谢谢观看，点个赞吧~