使用 Spring Boot 和 Uniapp 搭建 NFC 读取系统

奔跑吧邓邓子2025-04-11 18:24

目录

  • [一、NFC 技术原理大揭秘](#一、NFC 技术原理大揭秘)
    • [1.1 NFC 简介](#1.1 NFC 简介)
    • [1.2 NFC 工作原理](#1.2 NFC 工作原理)
    • [1.3 NFC 应用场景](#1.3 NFC 应用场景)
  • [二、Spring Boot 开发环境搭建](#二、Spring Boot 开发环境搭建)
    • [2.1 创建 Spring Boot 项目](#2.1 创建 Spring Boot 项目)
    • [2.2 项目基本配置](#2.2 项目基本配置)
  • [三、Spring Boot 读取 NFC 数据](#三、Spring Boot 读取 NFC 数据)
    • [3.1 NFC 设备连接与初始化](#3.1 NFC 设备连接与初始化)
    • [3.2 数据读取逻辑实现](#3.2 数据读取逻辑实现)
    • [3.3 数据处理与存储](#3.3 数据处理与存储)
  • [四、Uniapp 前端界面开发](#四、Uniapp 前端界面开发)
    • [4.1 Uniapp 项目创建](#4.1 Uniapp 项目创建)
    • [4.2 界面布局设计](#4.2 界面布局设计)
    • [4.3 与后端接口交互](#4.3 与后端接口交互)
  • 五、项目整合与测试
    • [5.1 前后端联调](#5.1 前后端联调)
    • [5.2 功能测试](#5.2 功能测试)
  • 六、总结与展望
    • [6.1 项目总结](#6.1 项目总结)
    • [6.2 未来展望](#6.2 未来展望)

一、NFC 技术原理大揭秘

1.1 NFC 简介

NFC，即近场通信（Near Field Communication），是一种基于无线电波的非接触式识别和互联技术，它允许电子设备在短距离内（通常不超过 10 厘米）进行安全、快速的数据交换。NFC 技术采用了 ISO/IEC 14443 标准，工作频率为 13.56MHz ，数据传输速率可达 424kbps，具有低功耗、高安全性等特点。其诞生于 2003 年，由飞利浦和索尼这两个移动设备巨头联合研发。次年，两大巨头与诺基亚一起，创建 NFC 论坛，开始推广 NFC 的应用。

与传统的无线通信技术相比，NFC 具有独特的优势。例如，蓝牙技术虽然也能实现设备间的无线通信，但其配对过程相对繁琐，连接建立时间较长，而 NFC 只需将两个设备靠近，即可在 0.1 秒内快速建立连接，实现数据交换 ，大大提升了交互效率。此外，NFC 的通信距离较短，这使得它的数据传输更加安全，不易受到远距离的信号干扰和窃听，特别适合在移动支付、门禁系统等对安全性要求较高的场景中应用。

1.2 NFC 工作原理

NFC 设备的通信基于电磁场的交互。当两个支持 NFC 的设备靠近时，它们会通过电磁波交换信息。NFC 设备通常由一个发射器和一个接收器组成，通过射频信号进行数据传输。具体来说，NFC 有三种工作模式：

  • 主动模式：在主动模式下，NFC 设备主动发出信号来与其他设备进行通信。例如手机，会通过 NFC 芯片发射信号，等待接收方的响应。每台设备要向另一台设备发送数据时，都必须产生自己的射频场，发起设备和目标设备都要产生自己的射频场，以便进行通信，这是点对点通信的标准模式，可以获得非常快速的连接设置。
  • 被动模式：在被动模式下，NFC 设备并不主动发信号，而是利用来自其他设备的电磁场供电并响应信号。这种模式常用于卡片、标签等设备，这些设备不需要自身具备电源，通过从外部电磁场获取能量来工作，例如公交卡、门禁卡等，它们在靠近支持 NFC 的读取设备时，能被读取设备发出的射频场激活，并将自身存储的信息传输给读取设备。
  • 双向模式：两个 NFC 设备之间可以相互发送和接收信息，常用于设备之间的配对或者文件传输。在双向模式下 NFC 终端双方都主动发出射频场来建立点对点的通信，相当于两个 NFC 设备都处于主动模式。

在数据传输过程中，设备会对信号进行调制，将数据加载到射频信号上进行传输。接收方设备接收到信号后，再进行解调，提取出原始数据。通过这种方式，NFC 设备能够在短距离内实现安全、可靠的数据传输。

1.3 NFC 应用场景

NFC 技术的应用十分广泛，几乎涵盖了我们生活中的各个领域，极大地提升了生活的便利性和智能化程度，以下是一些常见的应用场景：

  • 移动支付：是 NFC 最广为人知的应用之一。如今，使用手机进行支付已经成为日常生活的一部分。通过 NFC 功能，智能手机可以与支付终端（如 POS 机）建立快速的连接，完成支付过程。例如，使用支付宝、微信支付、Apple Pay 等应用时，手机只需要靠近支付设备，就能完成支付。这是因为手机内的 NFC 芯片与 POS 机之间通过近场通信交换信息，实现资金的转账。在支付过程中，手机内的 NFC 芯片充当了一个 "电子钱包" 的角色，它存储了银行卡信息或支付账户的信息，进行加密和认证，确保支付过程的安全。
  • 电子门禁：NFC 技术也广泛应用于电子门禁系统中。许多现代办公楼、酒店房间等场所已经开始使用 NFC 作为门禁卡的替代品。只需将支持 NFC 的手机靠近门禁设备，就能完成身份验证并打开门锁。这种方式不仅方便快捷，还能减少传统门禁卡丢失的风险。
  • 蓝牙配对：在蓝牙配对中也有着重要的作用。当你想要将手机与蓝牙耳机、音响、车载系统等设备配对时，传统的配对过程需要手动输入密码或选择设备。而使用 NFC 时，只需将手机与蓝牙设备靠近，设备会自动识别并完成配对，大大简化了操作流程，提高了便捷性。
  • 智能标签与信息交换：NFC 标签（也称为 NFC 标签卡、NFC 贴纸）是一种通过 NFC 与手机等设备进行信息交换的装置。NFC 标签广泛应用于智能广告、票务系统、商品信息查询等场合。例如，你可以在商店中看到一些嵌入 NFC 芯片的广告牌或商品标签，用户只需将手机靠近标签，即可获得商品的详细信息、优惠活动、防伪溯源信息等内容。此外，NFC 标签也可以用来存储一些简单的信息或设置。例如，在家庭自动化系统中，你可以将 NFC 标签贴在门口，利用手机扫描标签来控制智能家居设备，如打开灯光、调整空调温度等。
  • 数据交换与文件分享：NFC 技术也可以用于设备之间的快速数据交换。在一些设备中，用户只需将两部支持 NFC 的手机靠近，便能迅速交换联系人、照片、音乐文件等数据。这种方式与蓝牙相比，速度较快且操作简单，尤其适用于文件量较小的快速传输。
  • 身份认证与电子票证：还可以用于身份认证、电子证件及电子票务。例如，一些国家和地区的公共交通系统支持 NFC 车票，乘客只需将手机靠近刷卡设备，即可快速完成车票的验证。此外，NFC 技术还被用于一些高安全性场合，如门禁卡、身份证、电子护照等身份认证场景。

二、Spring Boot 开发环境搭建

2.1 创建 Spring Boot 项目

在开始项目开发之前，首先要确保开发环境中已经安装好 Java 开发工具包（JDK）、集成开发环境（IDE），如 IntelliJ IDEA ，以及构建工具 Maven。这里以 IDEA 为例，展示创建 Spring Boot 项目的详细步骤：

  1. 打开 IDEA，点击菜单栏中的 "File"，选择 "New"，然后点击 "Project"。
  2. 在弹出的 "New Project" 窗口中，左侧选择 "Spring Initializr"，右侧的 "Type" 一般默认选择 "Maven Project"，"Language" 选择 "Java" ，"Spring Boot" 版本选择适合项目需求的版本，然后点击 "Next"。在这一步，IDEA 实际上是通过 Spring Initializr 这个 Web 应用来快速生成一个基础的 Spring Boot 项目结构。
  3. 在接下来的界面中，填写项目的基本信息，包括 "Group"（项目组名，一般是公司域名的倒写，如com.example）、"Artifact"（项目名，如nfc - reader）、"Name"（项目显示名，默认为 Artifact 的值），"Description"（项目描述）、"Package name"（包名，默认为Group + Artifact） 等信息。然后点击 "Next"。
  4. 在 "Dependencies"（依赖）页面，搜索并添加所需的依赖。这里我们需要添加 NFC 读取库相关依赖，若使用的是javax.smartcardio库（适用于 Java 环境下的智能卡和 NFC 相关操作），则添加javax.smartcardio依赖；同时，为了实现 Web 开发，添加 "Spring Web" 依赖，它包含了 Spring MVC 和内嵌 Tomcat 服务器等组件，方便我们快速搭建 Web 服务。完成依赖选择后，点击 "Finish"。
  5. IDEA 会根据上述配置，自动下载并构建项目所需的依赖和文件结构。等待构建完成后，一个基本的 Spring Boot 项目就创建好了。

2.2 项目基本配置

项目创建完成后，需要对项目进行一些基本配置。Spring Boot 项目的配置文件一般为application.properties或者application.yml，它们位于src/main/resources目录下。application.yml文件以树型结构展示配置，可读性更高；application.properties使用key = value的形式配置，二者功能基本相同，这里以application.yml为例进行说明：

  • 端口配置：Spring Boot 默认使用 8080 端口启动项目。如果 8080 端口已被占用，或者根据项目需求需要使用其他端口，可以在application.yml中进行配置。例如，将端口改为 9090：
typescript 复制代码 
server:
  port: 9090
  • 数据库连接配置：如果项目需要连接数据库（假设使用 MySQL 数据库），则需要在配置文件中添加数据库连接相关信息，如数据库 URL、用户名、密码和驱动类名。示例如下：
typescript 复制代码 
spring:
  datasource:
    driver - class - name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/your_database_name?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
    username: root
    password: 123456

其中，url中的your_database_name需要替换为实际的数据库名。若使用其他数据库，如 Oracle、PostgreSQL 等，只需相应修改driver - class - name和url的配置即可。

  • 其他配置：还可以在配置文件中进行更多的配置，如日志配置、资源文件路径配置等。例如，配置日志级别为DEBUG，以便在开发过程中查看更多详细的日志信息：
typescript 复制代码 
logging:
  level:
    root: DEBUG

通过上述步骤，完成了 Spring Boot 项目的搭建和基本配置，为后续的 NFC 读取功能开发奠定了基础。

三、Spring Boot 读取 NFC 数据

3.1 NFC 设备连接与初始化

在 Spring Boot 项目中读取 NFC 数据，需要借助 Java NFC 库来实现设备连接与初始化。这里以javax.smartcardio库为例，它是 Java 平台提供的用于智能卡和 NFC 设备访问的标准库，支持多种操作系统，具有良好的兼容性和稳定性。

  1. 添加依赖：在pom.xml文件中添加javax.smartcardio依赖，代码如下：
typescript 复制代码 
<dependency>
    <groupId>javax.smartcardio</groupId>
    <artifactId>smartcardio</artifactId>
    <version>1.0</version>
</dependency>
  1. 编写连接与初始化代码：创建一个NfcReader类，用于实现 NFC 设备的连接与初始化操作。在类中，首先获取系统的TerminalFactory实例，TerminalFactory是javax.smartcardio库中用于创建智能卡终端的工厂类，它提供了多种创建终端的方法，能够适应不同的硬件环境和需求。通过TerminalFactory.getDefault()方法可以获取默认的终端工厂实例，这是一种便捷的获取方式，能根据系统环境自动选择最合适的终端工厂实现。然后使用该实例获取所有可用的终端列表，遍历终端列表，尝试连接每个终端。如果连接成功，则表示找到了可用的 NFC 设备，并将其存储起来用于后续的数据读取操作。示例代码如下：
typescript 复制代码 
import javax.smartcardio.*;
import java.util.List;

public class NfcReader {
    private CardTerminal terminal;

    public NfcReader() {
        try {
            TerminalFactory factory = TerminalFactory.getDefault();
            List<CardTerminal> terminals = factory.terminals().list();
            for (CardTerminal cardTerminal : terminals) {
                try {
                    Card card = cardTerminal.connect("*");
                    System.out.println("成功连接到NFC设备: " + cardTerminal.getName());
                    this.terminal = cardTerminal;
                    break;
                } catch (CardException e) {
                    // 连接失败，尝试下一个终端
                }
            }
            if (terminal == null) {
                System.out.println("未找到可用的NFC设备");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public CardTerminal getTerminal() {
        return terminal;
    }
}

在上述代码中，还设置了读取模式为默认模式（通过cardTerminal.connect("*")实现，*表示使用默认的协议进行连接），数据编码采用系统默认的编码方式（在后续读取数据时，根据实际情况进行解析）。同时，添加了异常处理机制，当连接 NFC 设备失败时，捕获CardException异常并进行相应处理，确保程序的稳定性和健壮性。

3.2 数据读取逻辑实现

在完成 NFC 设备的连接与初始化后，接下来需要编写代码实现数据读取逻辑。由于 NFC 标签或设备中可能存储不同类型的数据，如文本、二进制数据等，因此需要针对不同类型的数据编写相应的解析逻辑。

  1. 读取 NFC 标签数据：在NfcReader类中添加读取数据的方法readData。在该方法中，首先通过之前获取的CardTerminal实例连接到 NFC 卡，然后获取CardChannel通道，CardChannel是用于在智能卡和终端之间进行数据传输的通道，通过它可以发送命令和接收响应。接着构造读取数据的 APDU（Application Protocol Data Unit，应用协议数据单元）命令，APDU 是智能卡与终端之间通信的基本数据单元，不同的 APDU 命令对应不同的操作。对于读取 NFC 标签数据，常用的 APDU 命令是0x00 A4 04 00（选择文件命令）和0x00 B0 00 00（读取二进制数据命令）等。将 APDU 命令发送到 NFC 卡，并接收返回的响应数据，示例代码如下：
typescript 复制代码 
public byte[] readData() {
    if (terminal == null) {
        return null;
    }
    try {
        Card card = terminal.connect("*");
        CardChannel channel = card.getBasicChannel();

        // 构造读取数据的APDU命令
        byte[] selectCommand = new byte[]{(byte) 0x00, (byte) 0xA4, (byte) 0x04, (byte) 0x00, (byte) 0x02, (byte) 0x3F, (byte) 0x00};
        ResponseAPDU selectResponse = channel.transmit(new CommandAPDU(selectCommand));

        byte[] readCommand = new byte[]{(byte) 0x00, (byte) 0xB0, (byte) 0x00, (byte) 0x00, (byte) 0x10};
        ResponseAPDU readResponse = channel.transmit(new CommandAPDU(readCommand));

        card.disconnect(false);
        return readResponse.getData();
    } catch (CardException e) {
        e.printStackTrace();
        return null;
    }
}
  1. 数据解析逻辑：对于读取到的字节数组数据，需要根据数据类型进行解析。如果是文本数据，可以使用String类的构造函数将字节数组转换为字符串，例如：
typescript 复制代码 
byte[] data = readData();
if (data != null) {
    String text = new String(data, StandardCharsets.UTF_8);
    System.out.println("读取到的文本数据: " + text);
}

如果是二进制数据，可能需要根据具体的数据格式进行解析。例如，对于存储在 NFC 标签中的身份证信息，可能采用特定的二进制格式，需要按照身份证信息的编码规则进行解析，提取出姓名、身份证号码等具体信息。

3.3 数据处理与存储

读取到 NFC 数据后，通常需要将数据进行进一步的处理，如存储到数据库中，或根据业务需求进行其他逻辑处理。这里以将数据存储到 MySQL 数据库为例，介绍数据处理与存储的实现方法。

  1. 添加数据库依赖：在pom.xml文件中添加 Spring Data JPA 和 MySQL 连接器的依赖，Spring Data JPA 是 Spring 框架提供的用于简化数据库访问的模块，它基于 JPA（Java Persistence API）规范，提供了丰富的功能和便捷的操作方式，能够大大减少数据库访问代码的编写量；MySQL 连接器用于实现与 MySQL 数据库的连接，确保数据能够准确无误地传输到数据库中。代码如下：
typescript 复制代码 
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>
  1. 配置数据库连接信息：在application.yml文件中添加数据库连接信息，包括数据库 URL、用户名、密码和驱动类名，确保 Spring Boot 能够正确连接到 MySQL 数据库，示例如下：
typescript 复制代码 
spring:
  datasource:
    driver - class - name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/your_database_name?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
    username: root
    password: 123456
  jpa:
    hibernate:
      ddl - auto: update
    show - sql: true

其中，url中的your_database_name需要替换为实际的数据库名。ddl - auto: update表示在应用启动时，Spring Data JPA 会自动检查实体类与数据库表的结构，如果不一致则自动更新数据库表结构；show - sql: true表示在控制台显示执行的 SQL 语句，方便调试和查看数据库操作情况。

  1. 创建实体类和 Repository 接口：创建一个实体类，用于映射数据库表的结构，例如创建一个NfcData实体类，用于存储 NFC 读取的数据，代码如下：
typescript 复制代码 
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class NfcData {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String data;

    // 生成Getter和Setter方法
    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getData() {
        return data;
    }

    public void setData(String data) {
        this.data = data;
    }
}

创建一个继承自JpaRepository的Repository接口，用于操作数据库，例如创建NfcDataRepository接口，代码如下：

typescript 复制代码 
import org.springframework.data.jpa.repository.JpaRepository;

public interface NfcDataRepository extends JpaRepository<NfcData, Long> {
}
  1. 编写 Service 层和 Controller 层代码：在 Service 层中编写业务逻辑，调用Repository接口实现数据存储操作。创建一个NfcDataService类，注入NfcDataRepository，并添加保存数据的方法，代码如下：
typescript 复制代码 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class NfcDataService {
    @Autowired
    private NfcDataRepository nfcDataRepository;

    public void saveNfcData(NfcData nfcData) {
        nfcDataRepository.save(nfcData);
    }
}

在 Controller 层中调用 Service 层方法来存储数据。创建一个NfcDataController类，注入NfcDataService，并添加接收 NFC 数据并保存的接口，代码如下：

typescript 复制代码 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class NfcDataController {
    @Autowired
    private NfcDataService nfcDataService;

    @PostMapping("/nfc/data")
    public void saveNfcData(@RequestBody NfcData nfcData) {
        nfcDataService.saveNfcData(nfcData);
    }
}

通过上述步骤，实现了 Spring Boot 读取 NFC 数据，并将数据存储到 MySQL 数据库的功能。在实际应用中，还可以根据业务需求对数据进行更复杂的处理，如数据校验、数据加密等。

四、Uniapp 前端界面开发

4.1 Uniapp 项目创建

要开始 Uniapp 前端界面的开发，首先需要创建一个 Uniapp 项目。这里我们使用 HBuilderX 工具，它是一款专为开发 HTML5、小程序、App 等应用而设计的高效开发工具，对 Uniapp 项目的创建和开发提供了全面且强大的支持。以下是详细的创建步骤：

  1. 打开 HBuilderX 工具，如果是首次使用，可能需要进行一些初始化设置，如登录账号（可选择跳过）、设置工作空间等。
  2. 点击菜单栏中的 "文件"，选择 "新建"，然后点击 "项目" 。在弹出的 "新建项目" 窗口中，左侧选择 "uni-app" 项目类型。"uni-app" 是基于 Vue.js 开发的跨平台应用框架，能够实现一套代码多端运行，大大提高开发效率。
  3. 在右侧填写项目相关信息，包括项目名称（如nfc - app）、选择项目模板（推荐选择uni - ui项目模板，该模板内置了大量常用组件，能加速开发进程），Vue 版本可根据项目需求选择 Vue2 或 Vue3 ，然后点击 "创建"。
  4. HBuilderX 会根据上述配置，自动创建项目，并下载项目所需的依赖和文件结构。等待创建完成后，一个基本的 Uniapp 项目就搭建好了。

项目创建完成后，我们来了解一下 Uniapp 项目的基本结构：

  • components：用于存放自定义组件的文件夹。在开发过程中，可以将一些通用的组件，如按钮组件、弹窗组件等放在这里，方便在多个页面中复用，提高代码的可维护性和复用性。
  • pages：存放所有页面文件的目录。每个页面都是一个符合 Vue SFC（Single - File Component）规范的.vue 文件，包含模板（template）、脚本（script）和样式（style）三部分。例如，pages/index/index.vue就是项目的首页文件，在这里可以编写首页的界面展示和交互逻辑。
  • static：用于存放静态资源，如图像、音频、视频等文件。这些资源在项目打包时会被直接复制到最终的应用包中，不会被编译。需要注意的是，static 目录下的 js 文件不会被编译，如果里面有 ES6 代码，在运行时可能会在某些设备上报错，所以一般不建议在 static 目录下存放 js 文件。
  • App.vue：是整个应用的入口文件，所有页面都在该文件下进行切换。在这里可以定义应用的全局样式、监听应用的生命周期函数，如onLaunch（应用启动时触发）、onShow（应用显示时触发）、onHide（应用隐藏时触发）等。
  • main.js：项目的入口脚本文件，主要用于初始化 Vue 实例，并引入需要的插件、全局组件等。例如，可以在这里引入 Vuex（用于状态管理）、axios（用于 HTTP 请求）等插件，使其在整个项目中可用。
  • manifest.json：应用配置文件，用于指定应用的名称、图标、权限、版本等打包信息。在发布应用到不同平台（如微信小程序、App 等）时，需要根据平台要求在该文件中进行相应的配置。
  • pages.json：全局配置文件，可配置页面文件路径、窗口样式、原生导航栏、底部 tab 栏等。例如，可以通过该文件设置页面的标题、导航栏颜色、页面背景颜色等属性，还可以定义页面的路由规则，控制页面之间的跳转。

4.2 界面布局设计

在 Uniapp 中，界面布局主要运用 Vue 语法和 Uniapp 组件库来实现。Vue 语法简洁、灵活，与 JavaScript 紧密结合，使得开发者可以方便地操作 DOM 元素和处理数据绑定；Uniapp 组件库则提供了丰富的基础组件，如视图容器（view）、文本（text）、按钮（button）、表单组件（input、select 等） ，方便快速搭建界面。

以设计一个 NFC 数据读取展示页面为例，假设该页面需要包含一个用于显示 NFC 读取数据的区域、一个开始读取按钮和一个停止读取按钮，以下是具体的布局代码实现：

typescript 复制代码 
<template>
  <view class="container">
    <!-- 数据展示区域 -->
    <view class="data - display">
      <text>{{ nfcData }}</text>
    </view>
    <!-- 操作按钮区域 -->
    <view class="button - group">
      <button @click="startReadNfc" class="btn">开始读取</button>
      <button @click="stopReadNfc" class="btn">停止读取</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nfcData: ''
    };
  },
  methods: {
    startReadNfc() {
      // 这里编写开始读取NFC数据的逻辑，如发送请求到后端
    },
    stopReadNfc() {
      // 这里编写停止读取NFC数据的逻辑
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.data - display {
  border: 1px solid #ccc;
  padding: 10px;
  margin - bottom: 15px;
}

.button - group {
  display: flex;
  justify - content: space - around;
}

.btn {
  width: 120px;
  height: 40px;
  background - color: #1aad19;
  color: white;
  border: none;
  border - radius: 5px;
}
</style>

在上述代码中：

  • template部分定义了页面的结构，使用view组件作为容器，将数据展示区域和按钮区域进行分组。text组件用于显示 NFC 数据，button组件用于触发读取和停止读取的操作，并通过@click指令绑定对应的方法。
  • script部分定义了页面的逻辑，在data函数中定义了一个nfcData变量，用于存储读取到的 NFC 数据；在methods对象中定义了startReadNfc和stopReadNfc方法，分别用于处理开始读取和停止读取的业务逻辑，目前这两个方法只是占位，实际开发中需要填充具体的逻辑代码。
  • style部分定义了页面的样式，使用了 CSS 的 Flex 布局（通过display: flex实现），使按钮区域的按钮能够水平均匀分布；还设置了各个元素的边框、内边距、外边距、背景颜色、字体颜色等样式属性，以美化页面展示效果。

4.3 与后端接口交互

在 Uniapp 前端界面开发中，与后端 Spring Boot 进行接口交互是实现数据传输和业务逻辑处理的关键环节。通过 Uniapp 提供的uni.request方法，可以向后端发送 HTTP 请求，并接收后端返回的数据。

继续以上述 NFC 数据读取展示页面为例，假设后端 Spring Boot 提供了一个/nfc/read接口用于读取 NFC 数据，以下是如何在前端通过uni.request方法与后端进行交互的代码示例：

typescript 复制代码 
<template>
  <view class="container">
    <!-- 数据展示区域 -->
    <view class="data - display">
      <text>{{ nfcData }}</text>
    </view>
    <!-- 操作按钮区域 -->
    <view class="button - group">
      <button @click="startReadNfc" class="btn">开始读取</button>
      <button @click="stopReadNfc" class="btn">停止读取</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nfcData: ''
    };
  },
  methods: {
    startReadNfc() {
      uni.request({
        url: 'http://localhost:9090/nfc/read', // 后端接口地址，根据实际情况修改
        method: 'GET', // 请求方法，这里使用GET，根据接口要求选择
        success: (res) => {
          if (res.statusCode === 200) {
            this.nfcData = res.data; // 将后端返回的数据赋值给nfcData变量
          }
        },
        fail: (err) => {
          console.log('请求失败:', err);
        }
      });
    },
    stopReadNfc() {
      // 这里编写停止读取NFC数据的逻辑
    }
  }
};
</script>

<style scoped>
/* 省略样式代码 */
</style>

在上述代码中：

  • uni.request方法接收一个对象参数，其中url属性指定了后端接口的地址，method属性指定了请求方法（这里是 GET 请求，如果需要传递参数，可能会使用 POST 请求等）。
  • success回调函数在请求成功时触发，通过判断res.statusCode是否为 200 来确认请求是否成功。如果成功，将后端返回的数据res.data赋值给前端的nfcData变量，从而在页面上展示读取到的 NFC 数据。
  • fail回调函数在请求失败时触发，将错误信息打印到控制台，方便调试和排查问题。

在实际应用中，还可能需要在请求头中传递一些信息，如身份认证信息、数据格式声明等，可通过在uni.request的参数对象中添加header属性来实现，示例如下：

typescript 复制代码 
uni.request({
  url: 'http://localhost:9090/nfc/read',
  method: 'GET',
  header: {
    'Authorization': 'Bearer'+ localStorage.getItem('token'), // 假设使用JWT认证，从本地存储中获取token
    'Content - Type': 'application/json' // 声明数据格式为JSON
  },
  success: (res) => {
    // 处理成功响应
  },
  fail: (err) => {
    // 处理失败响应
  }
});

通过上述步骤，完成了 Uniapp 前端界面与后端 Spring Boot 的接口交互，实现了 NFC 数据的读取和展示功能。在实际开发中，还需要根据业务需求进行更复杂的交互逻辑处理，如数据校验、错误提示、数据缓存等 ，以提升应用的稳定性和用户体验。

五、项目整合与测试

5.1 前后端联调

在完成 Spring Boot 后端和 Uniapp 前端的开发后，需要进行前后端联调，以确保整个系统能够正常运行。在联调过程中，可能会遇到跨域问题，这是由于浏览器的同源策略限制导致的。同源策略要求浏览器在加载资源时，请求的 URL 的协议、域名和端口必须与当前页面的 URL 相同，否则会被视为跨域请求，默认情况下会被阻止。

为了解决跨域问题，在 Spring Boot 后端可以采用以下几种常见的方法：

  • 使用@CrossOrigin注解：在 Controller 类或方法上添加@CrossOrigin注解，该注解可以指定允许跨域请求的源、允许的 HTTP 方法、允许的请求头、是否允许携带凭证等。例如，在NfcDataController类上添加@CrossOrigin注解，允许来自http://localhost:8080（假设前端运行在该端口）的跨域请求：
typescript 复制代码 
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:8080")
public class NfcDataController {
    // 控制器方法
}
  • 配置 CorsFilter：通过配置CorsFilter过滤器来全局处理跨域请求。在 Spring Boot 的配置类中定义CorsFilter，并设置允许跨域的相关规则。示例代码如下：
typescript 复制代码 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*"); // 允许所有源访问，生产环境建议指定具体源
        config.addAllowedMethod("*"); // 允许所有HTTP方法
        config.addAllowedHeader("*"); // 允许所有请求头
        config.setAllowCredentials(true); // 允许携带凭证

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config); // 对所有请求路径生效

        return new CorsFilter(source);
    }
}

在 Uniapp 前端，确保请求的 URL 地址正确，并且注意请求参数的格式和类型与后端接口的要求一致。例如，在前端调用后端/nfc/read接口的代码中，检查url是否正确指向后端服务的地址，如http://localhost:9090/nfc/read（假设后端运行在 9090 端口）：

typescript 复制代码 
startReadNfc() {
    uni.request({
        url: 'http://localhost:9090/nfc/read',
        method: 'GET',
        success: (res) => {
            if (res.statusCode === 200) {
                this.nfcData = res.data;
            }
        },
        fail: (err) => {
            console.log('请求失败:', err);
        }
    });
}

通过上述配置和检查，解决跨域问题，确保前端请求能够正确到达后端，后端返回的数据也能准确无误地传递给前端，为后续的功能测试奠定基础。

5.2 功能测试

在完成前后端联调后，需要对系统的 NFC 读取功能进行全面测试，以确保系统在各种情况下都能正常工作。

  1. 使用 NFC 设备测试读取功能：准备支持 NFC 功能的设备，如 NFC 标签、NFC 卡片或支持 NFC 的移动设备等，将其靠近 NFC 读取设备（假设后端连接的 NFC 读取设备已正常工作），触发前端的读取操作（如点击前端页面的 "开始读取" 按钮），观察前端界面是否能够正确显示读取到的 NFC 数据，同时检查后端日志，确认数据的读取、处理和传输过程是否正常。例如，使用一张存储了文本信息的 NFC 标签，当靠近 NFC 读取设备后，前端界面应显示出该文本信息，后端日志应记录数据的读取和处理过程，如 "成功读取 NFC 数据：[具体数据内容]"。
  2. 检查界面展示与数据处理是否正确：仔细检查前端界面展示的数据是否与 NFC 设备中存储的数据一致，包括数据的完整性、格式等。同时，验证后端对数据的处理逻辑是否正确，如数据存储到数据库的操作是否成功，数据的解析和转换是否符合预期。例如，如果 NFC 标签中存储的是 JSON 格式的数据，后端应正确解析该 JSON 数据，并将其存储到数据库中相应的字段中，前端展示时也应按照正确的格式进行渲染。
  3. 进行兼容性测试：在不同的设备和浏览器上进行测试，确保系统在各种环境下都能稳定运行。由于 Uniapp 是跨平台开发框架，需要测试在不同操作系统（如 iOS、Android）、不同版本的移动设备以及不同浏览器（如 Chrome、Safari、Firefox 等）上的兼容性。例如，在 iPhone 和华为手机上分别运行 Uniapp 应用，测试 NFC 读取功能是否正常；在 Chrome 浏览器和 Safari 浏览器中打开应用，检查界面展示和数据交互是否一致。
  4. 压力测试与性能优化：模拟高并发场景，测试系统在大量请求下的性能表现，如响应时间、吞吐量等。根据测试结果进行性能优化，如优化数据库查询语句、调整服务器配置、使用缓存技术等，以提高系统的性能和稳定性。例如，使用性能测试工具模拟同时有 100 个用户进行 NFC 数据读取操作，观察系统的响应时间和吞吐量，若发现响应时间过长或吞吐量过低，可通过优化数据库索引、增加服务器内存等方式进行优化。
  5. 异常处理测试：故意制造一些异常情况，如 NFC 设备未连接、读取数据失败、网络中断等，检查系统的异常处理机制是否完善，前端界面是否能够给出友好的错误提示，后端是否能够正确记录异常日志并进行相应的处理。例如，拔掉 NFC 读取设备，点击前端的读取按钮，此时前端界面应显示 "NFC 设备未连接，请检查设备" 等错误提示，后端日志应记录 "未找到可用的 NFC 设备" 等异常信息。

通过以上全面的功能测试，确保基于 Spring Boot 和 Uniapp 开发的 NFC 读取系统能够稳定、可靠地运行，满足实际业务需求。

六、总结与展望

6.1 项目总结

在本次基于 Spring Boot 读取 NFC 实例的项目开发过程中，我们深入探索了 NFC 技术原理、Spring Boot 框架以及 Uniapp 前端开发技术。从 NFC 技术原理来看，我们详细了解了其工作模式、通信原理以及丰富的应用场景，这为项目开发奠定了坚实的理论基础，让我们清楚地知道如何利用 NFC 技术实现设备间的高效数据交互。在 Spring Boot 后端开发方面，我们成功搭建了开发环境，完成了 NFC 设备连接与初始化、数据读取逻辑实现以及数据处理与存储等关键功能模块的开发。通过使用javax.smartcardio库实现 NFC 设备连接，精心构造 APDU 命令读取数据，并借助 Spring Data JPA 和 MySQL 实现数据的持久化存储，确保了后端系统的稳定运行。

Uniapp 前端开发则侧重于界面布局设计与后端接口交互。我们熟练运用 Vue 语法和 Uniapp 组件库，打造出简洁直观的 NFC 数据读取展示页面，实现了用户与系统的友好交互。通过uni.request方法与后端进行通信，顺利完成数据的传输与展示，让用户能够方便地获取 NFC 数据。在项目整合阶段，我们成功解决了前后端联调过程中的跨域问题，通过在后端配置@CrossOrigin注解或CorsFilter过滤器，确保了前后端数据交互的顺畅。

经过全面的功能测试，我们验证了系统在不同场景下的稳定性和可靠性。然而，项目也存在一些不足之处。例如，在性能方面，当同时处理多个 NFC 设备连接或大量数据读取时，系统响应速度有待提高；在兼容性方面，虽然在主流设备和浏览器上进行了测试，但仍可能存在部分小众设备或特殊环境下的兼容性问题；在功能完善度上，当前系统仅实现了基本的 NFC 数据读取和存储功能，对于一些复杂的业务逻辑和高级功能，如数据加密、多标签同时读取处理等，还需要进一步拓展。

6.2 未来展望

未来，我们可以从多个方向对项目进行优化和扩展。在性能提升方面，考虑引入缓存机制，如 Spring Cache ，减少对数据库的频繁访问，提高数据读取速度；优化数据库查询语句，合理创建索引，提升数据库操作效率；对关键代码进行优化，减少不必要的计算和资源消耗。在兼容性优化上，进一步增加对更多设备和浏览器的测试，针对出现的兼容性问题进行针对性修复，确保系统能够在各种环境下稳定运行。

功能扩展也是未来发展的重点方向。可以增加 NFC 数据写入功能，实现对 NFC 标签或设备的数据写入操作，满足更多应用场景需求，如电子票务的写入、用户信息的更新等；引入数据加密和解密功能，保障数据在传输和存储过程中的安全性，防止数据被窃取或篡改；实现多 NFC 设备同时管理功能，支持同时连接和处理多个 NFC 设备，提高系统的实用性和应用范围，例如在物流仓储管理中，可能需要同时读取多个货物上的 NFC 标签信息。

展望 NFC 与 Spring Boot 结合的应用前景，随着物联网、移动支付、智能安防等领域的快速发展，其应用将更加广泛。在物联网领域，可用于智能家居设备的快速配置和连接，用户只需将手机靠近智能家居设备，通过 NFC 技术即可完成设备的配对和设置；在移动支付场景中，借助 Spring Boot 的强大后端处理能力和 NFC 的便捷支付特性，能够开发出更加安全、高效的移动支付系统；在智能安防领域，可用于门禁系统的身份验证和权限管理，通过 NFC 技术实现人员进出的快速识别和记录，提高安防系统的智能化水平。我们相信，通过不断的优化和创新，基于 Spring Boot 和 NFC 技术的应用将为人们的生活和工作带来更多的便利和价值。

相关推荐
南星沐4 小时前
Spring Boot 常用依赖介绍
java·前端·spring boot
老李不敲代码5 小时前
榕壹云外卖跑腿系统：基于Spring Boot+MySQL+UniApp的智慧生活服务平台
spring boot·mysql·微信小程序·uni-app·软件需求
smileNicky8 小时前
SpringBoot系列之集成Redisson实现布隆过滤器
java·spring boot·redis·布隆过滤器
李白的粉9 小时前
基于springboot的个人博客系统
java·spring boot·后端·毕业设计·课程设计·源代码·个人博客系统
不会叫的狼10 小时前
uni-app初学
uni-app
老李不敲代码10 小时前
榕壹云在线商城系统：基于THinkPHP+ Mysql+UniApp全端适配、高效部署的电商解决方案
mysql·微信小程序·小程序·uni-app·软件需求
小蒜学长10 小时前
机动车号牌管理系统设计与实现(代码+数据库+LW)
开发语言·数据库·spring boot·后端·spring·oracle
半个脑袋儿10 小时前
Maven版本号管理规范：为何父POM是统一依赖版本的最佳实践？
spring boot·maven
howard200510 小时前
3.1.3.2 Spring Boot使用Servlet组件
spring boot·servlet
来自星星的坤11 小时前
如何在 Postman(测试工具) 中实现 Cookie 持久化并保持同一会话
java·开发语言·spring boot·后端
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04Vue3 + TypeScript 的 Hooks 实用示例05DeepSeek RAGFlow构建本地知识库系统06如何在WPS和Word/Excel中直接使用DeepSeek功能07【WRF理论第十三期】详细介绍 Registry 的作用、结构和内容08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09DeepSeek各版本说明与优缺点分析10React 从基础到架构实践