背景

昨天有一个需求，通过扫描二维码来查看详情，一开始去查资料发现都是写一个复杂的工具类，然后再在接口中调用，感觉很麻烦，突然想起来有Hutool工具类，于是就看了一下官方文档，中间不是很顺利，于是想记录一下这次的操作。（hutool的官方文档我放在评论区了）

后端：Spring-boot

前端：Vue

下面直接上代码

后端

package 自己的包名;
import cn.hutool.core.codec.Base64;
import cn.hutool.core.img.ImgUtil;
import cn.hutool.extra.qrcode.QrCodeUtil;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;

/**
 * 生成二维码的工具类
 * @return Base64编码的字符串
**/
public class QrCodeGenerator {
    /**
     * 生成二维码并返回Base64编码的字符串
     *
     * @param content  二维码内容
     * @param width    二维码宽度
     * @param height   二维码高度
     * @return Base64编码的字符串
     */
    public static String generateQrCode(String content, int width, int height) {
        // 生成二维码图片
        BufferedImage image = QrCodeUtil.generate(content, width, height);
        // 将二维码图片转换成Base64编码的字符串
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        ImgUtil.writePng(image, outputStream);
        return "data:image/png;base64," + Base64.encode(outputStream.toByteArray());
    }
}

//方法中直接调用刚才的工具类,三个参数分别为你要扫二维码后看到的内容，二维码宽，高

//生成后返回给前端一个Base64编码的字符串
String QRCodeString = QrCodeGenerator.generateQrCode("https://www.toutiao.com/c/user/token/MS4wLjABAAAAeyCJAoPTA1AU8m0fecG-1W3yZg_PBmHYJ7TMXSyzHw7kspNBNKHsd4wf0zmtd3XJ/?source=mine_profile&tab=article",130,130);
        entity.setQRCodeString(QRCodeString);

实体中属性

/**
     * 二维码图片转换成Base64编码的字符串
     */
    @TableField(exist = false)
    private java.lang.String QRCodeString;

前端

//qrCodeUrl就是后台传过来的Base64编码的字符串
<div class='carousel-second'>
	<td>
  	<p style="display: inline;color: #92979C;font-size: 14px;float: left;width:43%;margin-top: 5%">房源信息二维码：</p>
		<img style="float: right;width: 47%;margin-right: 28px" :src="qrCodeUrl">
  </td>
</div>

data() {
			return {
        qrCodeUrl:'',
			}
		},
      
 methods: {
   //查询详情（后台生成二维码）
 			queryDetailById(brandId) {
				let that = this
					getAction(that.url.queryDetail， {
						brandId: brandId
					}).then(res => {
						if (res.success) {
							that.setInfoMessage(res.result)
						}
						that.loadding = false
					})
			},
			setInfoMessage(info) {
				this.houseInfo = info.records[0]
        //二维码  Base64编码的字符串
        this.$set(this,'qrCodeUrl',this.houseInfo.qrcodeString)
			},
 }

成功后，看前端控制台请求网址应该是这样的

哦，对了，二维码还可以中间加入logo和底部加文字，感兴趣的小伙伴可以评论区讨论一下。

如果还有什么问题，欢迎大家私信我！我是Java-Talk，下期见！