手动输入商品信息？没有扫码枪？那赶紧来学手机化身扫码枪呀！

手机扫码枪教程

一、序言

1.介绍

–本文会采用到html5-qrcode开源调用手机扫码的项目

–让手机可以调用摄像头扫码获取的条形码传到后端进行查询中国商品库

–从而获取到商品的详细信息

2.需要技能

–前端技术：Vue

–后端技术：springboot

3.资料

–本篇文章核心代码会全部附上，大家理解后丢入自己项目中也就可以跑了

二、教程

1.准备证书

–去这个地址生成测试证书

SSL 证书生成 - 锤子在线工具

–IP 或者域名，填自己电脑的IP，cmd命令ipconfig查看电脑IP

–再设定一个密码

–点击生成证书后下载文件

2.后端部署证书

–文件放到resource目录，新建cert包存放证书文件

–配置文件yaml

server:
  ssl:
    key-store: classpath:cert/generate.pfx
    key-store-password: 12345678
    protocol: TLS
    enabled: true

3.后端代码

 @PostMapping("/scanContent")
    @ApiOperation("扫码传输的内容")
    public R<Product> scanContent(@RequestParam String shopCode) {
        Product product = null;
        try {
            System.out.println("扫码传输的内容:"+shopCode);
            // 定义请求的URL
            String url = "https://bff.gds.org.cn/gds/searching-api/ProductService/ProductListByGTIN?PageSize=30&PageIndex=1&SearchItem="+shopCode;
            // 发送GET请求
            HttpResponse response = HttpRequest.get(url).execute();

            //重置请求，再发一个其他的请求，防止系统误以为你是恶意重复请求同一接口
            String restart = "https://bff.gds.org.cn/gds/searching-api/ProductService/ProductList?PageSize=30&PageIndex=1&SearchItem=%E6%B0%B4";
            HttpRequest.get(restart).execute();

            // 获取响应状态码
            int statusCode = response.getStatus();
            System.out.println("Status Code: " + statusCode);

            // 获取响应体内容
            String body = response.body();

            //获取到商品信息部分的数据解析方法
            String data = JSONUtil.parseObj(body).getStr("Data");
            JSONArray itemsArr = JSONUtil.parseObj(data).getJSONArray("Items");
            Object itemsObj = itemsArr.get(0);
            JSONObject items = JSONUtil.parseObj(itemsObj);
            System.out.println("扫码传输的内容Items:"+items);

            // 将响应体内容转换为Java对象返回
            product = JSONUtil.toBean(items, Product.class);

            //打印产品
            System.out.println("扫码传输的内容:"+product);

            return R.success(product,"扫码传输成功");
        } catch (HttpException e) {
            return R.error("传输失败请重新扫码");
        }
    }

4.前端开启https

–注意先用npm install html5-qrcode先下载这个项目

  devServer: {
    host: '0.0.0.0',
    port: 8081,
    //open: true,
    client: {
      webSocketURL: 'ws://0.0.0.0/ws',
    },
    https: true, // 开启 HTTPS 服务
    // 如果需要配置证书，可以使用如下配置
    /*key: fs.readFileSync('cert/private.key'),
    cert: fs.readFileSync('cert/cert.pem'),*/
  },

5.前端代码

<template>
  <div>
    <div>
      <span>QR Scanner</span>
    </div>
    <div>
      <textarea style="width:496px;height: 100px;margin-top: 5px;" v-model="resultText" readonly></textarea>
    </div>
    <div id="qr-reader" style="width:500px"></div>
    <div id="qr-reader-results"></div>
  </div>
</template>

<script>
import { Html5QrcodeScanner } from 'html5-qrcode'; // 假设你已经安装这个库

export default {
  data() {
    return {
      lastMessage: '',
      codeId: 0,
      resultText: ''
    };
  },
  mounted() {
    this.startQRCodeScanner();
  },
  methods: {
    startQRCodeScanner() {
      const onScanSuccess = (decodedText, decodedResult) => {
        console.log('扫描结果decodedText', decodedText);
        console.log('扫描结果decodedResult', decodedResult);

        if (this.lastMessage !== decodedText) {
          this.lastMessage = decodedText;
          this.codeId++;
          this.sendData(decodedText);
        }
      };

      const html5QrcodeScanner = new Html5QrcodeScanner("qr-reader", {
        fps: 10,
        qrbox: { width: 250, height: 250 }, // 这里可以调整二维码框大小
      });
      html5QrcodeScanner.render(onScanSuccess);
    },
    async sendData(decodedText) {
      // 使用 URLSearchParams 格式化表单数据
      const formData = new URLSearchParams();
      formData.append('shopCode', decodedText);

      // 构建请求头
      const config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
      try {
        // 将扫描结果发送到服务器
        const { data: res } = await this.$http.post('./bookadmin/scanContent', formData,config);

        this.resultText += `发送消息: ${decodedText}\n`;
        if (res.status !== 200) {
          this.resultText += `服务器响应错误: ${res.msg}\n`;
          return this.$message.error(res.msg);
        }

        this.resultText += `服务器响应: ${res.msg}\n`;
        this.$message.success({
          message: res.msg,
          duration: 1000,
        });
      } catch (error) {
        this.resultText += `1发送消息时出错: ${error.message}\n`;
      }
    }
  }
}
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>

6.注意点

–启动后前端路径访问一下浏览器会提示证书不安全，请你选择高级，继续访问

–后端的端口，你也需要输入路径，输入你的电脑IP+端口进行访问，这样才会信任后端证书，前端请求才能发到后端

7.手机访问

–手机完成两个注意点后，就可以之前访问你开启的前端地址了，不过有一点要注意！

–注意：开启后端的电脑要和手机在同一个局域网，也就是一个网段，简单点来说就是连接的一个wifi

–然后访问的时候，要加上https！，因为默认都是http访问，所有有可能会导致你无法访问到

三、总结

1.思路

–vue引入html5-grcode

–直接使用我的vue文件，注意修改post请求地址

–前端congfig.js开启https

–后端配置ssl证书

–前端扫码物品后自动发送请求

–接收扫码内容

–根据条码查询国家商品平台信息

–返回商品信息

2.最终效果

扫码传输的内容:6901285991219
Status Code: 200
扫码传输的内容Items:
{
    "keyword": "怡宝",
    "branch_code": "4402    ",
    "gtin": "06901285991219",
    "f_id": "YfDJ8EwjsggMI25MqZzANDemKiTJ3dHdAuNZPzLH8g61uy4AjEb8WCGM0WcaBDBxU9ns60UpJbOLOCJoeIhOKwf-EVX1A7m1pIptwud3fhmOtVIcgmo3Y8bfjJBBlFAXpBNYIPXvch3n6I6shTO1DwjRKfUO82yWZt3xkbSCiFYjgRhdg51_XMy8R52OWRvrmWP6so2zKUaeIAJ6cjeyOFY8WMC",
    "specification": "555毫升",
    "brandid": "EfDJ8EwjsggMI25MqZzANDemKiSdiG05irhpKU_WUQSuDubAVmjdpyIqwl1YuYGrpEfht6ptqaaSV3QAVhsC4ZW7cS7Zsfixd6ZAdTLxW7etHYeduLKjEpEpZffjmAvfC_C-mlww6j2pgattTZcUhrXODVHqF6AkWaJt4DwTRl-bUIZeDtQHoJJbpYMQEpbAyD--pAuJF1_ndoi16anfUD_vVhC",
    "base_id": "YfDJ8EwjsggMI25MqZzANDemKiSMw-Wyq4K0t9fCGeLBPjYovdR23Z8i0OEqkXff8AquCC1_fX7bhqDIoJOE4et16giynxbwexu39aIhormQxwdiHt0Q6td2PwdsDe8Gnk39DEQkBtx6xVWeEIAHuxjnmyZQhNeWTVbRz43yNgKBheJf_stJHF2Zhpz8KCManzYIvdi-OB8FD7P1ovw7mK-S2TC",
    "is_private": false,
    "firm_name": "华润怡宝饮料(中国)有限公司",
    "brandcn": "怡宝",
    "picture_filename": "/userfile1/uploadb/gra/sj220530120009264120/06901285991219/06901285991219.1.jpg",
    "description": "怡宝饮用纯净水",
    "logout_flag": "0",
    "have_ms_product": 0,
    "base_create_time": "2014-10-23T02:29:52.433Z",
    "branch_name": "深圳分中心",
    "base_source": "WWW",
    "gpc": "10000232",
    "gpcname": "瓶装水",
    "base_last_updated": "2022-06-28T15:36:38.02Z",
    "base_user_id": "1273252",
    "code": "6901285",
    "valid_date": "2025-08-26T16:00:00Z",
    "gtinstatus": 1
}
扫码传输的内容:
Product(keyword=怡宝, description=怡宝饮用纯净水, specification=555毫升, firmName=华润怡宝饮料(中国)有限公司, branchName=深圳分中心, gtin=06901285991219, brandcn=怡宝, validDate=2025-08-26T16:00:00Z, gpcname=瓶装水)