天元建设集团怎么样_成都集团网站设计推荐_郴州网站seo_好用的视频播放器app

SpringBoot+Vue+RFID Reader实现IC卡信息读取功能

设备：
读卡器类型：仿真键盘类型
读卡器型号：USB-203-8H-10D IC读卡器  10位卡号

SpringBoot

项目结构

创建数据表

添加依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.zyb</groupId><artifactId>zyb-admin</artifactId><version>1.0.0</version><parent><artifactId>spring-boot-starter-parent</artifactId><groupId>org.springframework.boot</groupId><version>2.6.6</version></parent><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>2.0.32</version></dependency></dependencies></project>

application.yml文件

server:port: 8080
spring:application:name: zyb-admindatasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/zyb-main?characterEncoding=utf8username: rootpassword: 123456

实体类

package com.zyb.entity;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;@TableName("user_rfid")
public class UserRfid {@TableId(type = IdType.AUTO)private Integer uid;@TableField("work_no")private String workNo;@TableField("card_number")private String cardNumber;public Integer getUid() {return uid;}public void setUid(Integer uid) {this.uid = uid;}public String getWorkNo() {return workNo;}public void setWorkNo(String workNo) {this.workNo = workNo;}public String getCardNumber() {return cardNumber;}public void setCardNumber(String cardNumber) {this.cardNumber = cardNumber;}@Overridepublic String toString() {return "UserRfid{" +"uid=" + uid +", workNo='" + workNo + '\'' +", cardNumber='" + cardNumber + '\'' +'}';}
}

控制层

package com.zyb.controller;import com.alibaba.fastjson.JSONObject;
import com.zyb.entity.UserRfid;
import com.zyb.service.UserRfidService;
import org.springframework.web.bind.annotation.*;@RestController
@RequestMapping("/rfid")
public class UserRfidController {private final UserRfidService userRfidService;public UserRfidController(UserRfidService userRfidService) {this.userRfidService = userRfidService;}@GetMapping("/card/login")public String cardLogin(@RequestParam("cardNumber") String cardNumber) {JSONObject result = new JSONObject(true);JSONObject json = new JSONObject(true);UserRfid userRfid = userRfidService.selectByCardNumber(cardNumber);if (userRfid != null) {json.put("workNo", userRfid.getWorkNo());json.put("cardNumber", userRfid.getCardNumber());}result.put("errcode", 0);result.put("errmsg", "success");result.put("data", json);return result.toString();}@PostMapping("/card/add")public String addCardNumber(@RequestBody UserRfid userRfid) {JSONObject result = new JSONObject(true);userRfidService.addUserRfid(userRfid);result.put("errcode", 0);result.put("errmsg", "success");return result.toString();}}

Vue页面布局

<template><el-container><el-main><el-input ref="cardInput" v-model="cardNumber" placeholder="请刷卡" @input="getLogin"@blur="handleBlur"></el-input></el-main></el-container>
</template>
<script>
import { cardLogin } from '@/api/card'export default {data() {return {cardNumber: ''}},watch: {// 监听输入框内容变化，确保提交后恢复焦点cardNumber() {this.$nextTick(() => {this.$refs.cardInput.focus();})}},mounted() {// 初始自动聚焦this.$refs.cardInput.focus();},methods: {// 失去焦点后立即重新聚焦handleBlur() {this.$nextTick(() => {this.$refs.cardInput.focus();})},async getLogin() {let that = this;if (this.cardNumber.length === 10) {let response = await cardLogin({ 'cardNumber': this.cardNumber.trim() });if (response.errcode == 0) {console.log('data', response.data);this.cardNumber = '';}}}}
}
</script>
<style>
.el-container {width: 100%;height: 100%;
}
</style>