使用扫码枪扫码二维码并采集二维码信息

最新推荐文章于 2024-06-22 09:14:21 发布

远方-zhangyuan

最新推荐文章于 2024-06-22 09:14:21 发布

阅读量3.5k

点赞数 1

文章标签： vue.js java

本文链接：https://blog.csdn.net/ZhangYuan2HH/article/details/126739546

版权

本文介绍如何通过扫码枪收集信息，并利用Vue前端的el-input组件配合AJAX实现数据自动发送到后端接口'/qrcode/qr/sendData'，进行处理。重点在于前端事件监听和后端接口设计的实践。

摘要由CSDN通过智能技术生成

思路

一、购买可以扫码二维码的扫码枪（我这里采购的是 scanhome 高密版）也可以采购其他的扫码枪。扫码枪的原理其实就是识别二维码信息然后替代人工键盘输入将信息输入到光标所在的输入框或者文件中。

二、使用usb插入电脑中测试（设置扫码枪结束符为回车或者二维码是自己生成的设置数据内容结束符为回车）

三、前端界面有输入框输入框绑定回车事件

我这里前端用的vue+elementui 当然用原生HTML或其他语言都可以只要实现输入完信息回车请求接口就ok

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="/base/head::header">
</head>
 <body>
    <div id="dataId">
        <el-card class="box-card" style="text-align: center;padding: 100px;">
            <h2>输入解析后的二维码信息</h2>
            <el-input style="width: 600px;"
                    placeholder="请输入内容"
                    v-model="textarea"
                    @keyup.enter.native="clickButton">
            </el-input>
            <el-button type="primary" @click="clickButton">数据接收</el-button>
        </el-card>
    </div>
 <script>
     new Vue({
         el: "#dataId",
         data: {
             textarea: '',
         },
         methods: {
             clickButton:function(){
                 var param = this.textarea;//JSON.stringify({qrStr: this.textarea});
                 if(!param){
                     this.$message({
                         message: "请输入数据！",
                         type: 'warning'
                     });
                     return;
                 }
                 var that = this;
                 $.ajax({
                     type: "POST",
                     data: param,
                     url: "/qrcode/qr/sendData",
                     headers: {
                         "Content-Type": "application/json"
                     },
                     cache: false,
                     success: function (result) {
                         if (result.status== "SUCCESS") {
                             that.$message({
                                 message: "数据传输成功！",
                                 type: 'success'
                             });
                             that.textarea = '';
                         } else {
                             that.$message({
                                 message: "数据传输失败！",
                                 type: 'error'
                             });
                             that.textarea = '';
                         }
                     }
                 });
             },
         }
     })
 </script>
 </body>
 </html>

四、后端接口实现访问"/qrcode/qr/sendData"接口接收二维码信息然后相应处理，，"/qrcode/qr/sendData", 其中/qrcode是后端项目根地址

@RestController
@RequestMapping("/qr")
public class QRCodeDataController {

    @PostMapping("/sendData")
    public RtnData sendData(@RequestBody String map) {
        System.out.println(map);
        if(map.isEmpty()){
            return RtnData.ERROR(null);
        } else  {
            return RtnData.SUCCESS(null);
        }

    }
}