使用 Spring Boot 和 Uniapp 搭建 NFC 讀取系統

目錄

  • 一、NFC 技術原理大揭秘
    • 1.1 NFC 簡介
    • 1.2 NFC 工作原理
    • 1.3 NFC 應用場景
  • 二、Spring Boot 開發環境搭建
    • 2.1 創建 Spring Boot 項目
    • 2.2 項目基本配置
  • 三、Spring Boot 讀取 NFC 數據
    • 3.1 NFC 設備連接與初始化
    • 3.2 數據讀取邏輯實現
    • 3.3 數據處理與存儲
  • 四、Uniapp 前端界面開發
    • 4.1 Uniapp 項目創建
    • 4.2 界面布局設計
    • 4.3 與后端接口交互
  • 五、項目整合與測試
    • 5.1 前后端聯調
    • 5.2 功能測試
  • 六、總結與展望
    • 6.1 項目總結
    • 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:
server:port: 9090
  • 數據庫連接配置:如果項目需要連接數據庫(假設使用 MySQL 數據庫),則需要在配置文件中添加數據庫連接相關信息,如數據庫 URL、用戶名、密碼和驅動類名。示例如下:
spring:datasource:driver - class - name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/your_database_name?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8username: rootpassword: 123456

其中,url中的your_database_name需要替換為實際的數據庫名。若使用其他數據庫,如 Oracle、PostgreSQL 等,只需相應修改driver - class - name和url的配置即可。

  • 其他配置:還可以在配置文件中進行更多的配置,如日志配置、資源文件路徑配置等。例如,配置日志級別為DEBUG,以便在開發過程中查看更多詳細的日志信息:
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依賴,代碼如下:
<dependency><groupId>javax.smartcardio</groupId><artifactId>smartcardio</artifactId><version>1.0</version>
</dependency>
  1. 編寫連接與初始化代碼:創建一個NfcReader類,用于實現 NFC 設備的連接與初始化操作。在類中,首先獲取系統的TerminalFactory實例,TerminalFactory是javax.smartcardio庫中用于創建智能卡終端的工廠類,它提供了多種創建終端的方法,能夠適應不同的硬件環境和需求。通過TerminalFactory.getDefault()方法可以獲取默認的終端工廠實例,這是一種便捷的獲取方式,能根據系統環境自動選擇最合適的終端工廠實現。然后使用該實例獲取所有可用的終端列表,遍歷終端列表,嘗試連接每個終端。如果連接成功,則表示找到了可用的 NFC 設備,并將其存儲起來用于后續的數據讀取操作。示例代碼如下:
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 卡,并接收返回的響應數據,示例代碼如下:
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類的構造函數將字節數組轉換為字符串,例如:
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 數據庫的連接,確保數據能夠準確無誤地傳輸到數據庫中。代碼如下:
<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 數據庫,示例如下:
spring:datasource:driver - class - name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/your_database_name?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8username: rootpassword: 123456jpa:hibernate:ddl - auto: updateshow - sql: true

其中,url中的your_database_name需要替換為實際的數據庫名。ddl - auto: update表示在應用啟動時,Spring Data JPA 會自動檢查實體類與數據庫表的結構,如果不一致則自動更新數據庫表結構;show - sql: true表示在控制臺顯示執行的 SQL 語句,方便調試和查看數據庫操作情況。

  1. 創建實體類和 Repository 接口:創建一個實體類,用于映射數據庫表的結構,例如創建一個NfcData實體類,用于存儲 NFC 讀取的數據,代碼如下:
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接口,代碼如下:

import org.springframework.data.jpa.repository.JpaRepository;public interface NfcDataRepository extends JpaRepository<NfcData, Long> {
}
  1. 編寫 Service 層和 Controller 層代碼:在 Service 層中編寫業務邏輯,調用Repository接口實現數據存儲操作。創建一個NfcDataService類,注入NfcDataRepository,并添加保存數據的方法,代碼如下:
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;@Service
public class NfcDataService {@Autowiredprivate NfcDataRepository nfcDataRepository;public void saveNfcData(NfcData nfcData) {nfcDataRepository.save(nfcData);}
}

在 Controller 層中調用 Service 層方法來存儲數據。創建一個NfcDataController類,注入NfcDataService,并添加接收 NFC 數據并保存的接口,代碼如下:

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 {@Autowiredprivate 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 讀取數據的區域、一個開始讀取按鈕和一個停止讀取按鈕,以下是具體的布局代碼實現:

<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方法與后端進行交互的代碼示例:

<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屬性來實現,示例如下:

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(假設前端運行在該端口)的跨域請求:
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,并設置允許跨域的相關規則。示例代碼如下:
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 {@Beanpublic 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 端口):

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 技術的應用將為人們的生活和工作帶來更多的便利和價值。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/77491.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/77491.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/77491.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

臺式電腦插入耳機沒有聲音或麥克風不管用

目錄 一、如何確定插孔對應功能1.常見音頻插孔顏色及功能2.如何確認電腦插孔?3.常見問題二、 解決方案1. 檢查耳機連接和設備選擇2. 檢查音量設置和靜音狀態3. 更新或重新安裝聲卡驅動4. 檢查默認音頻格式5. 禁用音頻增強功能6. 排查硬件問題7. 檢查系統服務8. BIOS設置(可選…

Gerrit的安裝與使用說明(Ubuntu)

#本頁面按192.168.60.148服務器舉例進行安裝配置 1.權限配置 ## 使用root或者有sudo權限用戶執行 # 創建gerrit用戶 sudo useradd gerrit # 設置gerrit用戶的密碼 sudo passwd gerrit # 增加sudo權限 sudo visudo 在root ALL(ALL:ALL) ALL行下添加如下內容 gerrit ALL(ALL:…

Visual Studio 2019 配置VTK9.3.1

文章目錄 參考博客1、 VTK下載和編譯2、vs2019配置vtk9.3.1參考博客 Visual Studio 2022 配置VTK9.3.0 1、 VTK下載和編譯 見博客 CMake編譯VTK 2、vs2019配置vtk9.3.1 新建一個項目 寫入以下代碼 #include <vtkActor.h> #include <vtkAssembly.h> #include…

C++進階——C++11_右值引用和移動語義_可變參數模板_類的新功能

目錄 1、右值引用和移動語義 1.1 左值和右值 1.2 左值引用和右值引用 1.3 引用延長生命周期 1.4 左值和右值的參數匹配 1.5 右值引用和移動語義的使用場景 1.5.1 左值引用主要使用場景 1.5.2 移動構造和移動賦值 1.5.3 右值引用和移動語義解決傳值返回問題 1.5.4 右值…

HTTP協議原理深度解析:從基礎到實踐

引言 在互聯網技術體系中,HTTP(HyperText Transfer Protocol)協議如同數字世界的"通用語言",支撐著全球超50億網民的日常網絡交互。作為爬蟲開發、Web應用構建的核心技術基礎,理解HTTP原理是每個開發者必須掌握的技能。本文將從協議本質、技術演進、安全機制三…

Web品質 - 重要的HTML元素

Web品質 - 重要的HTML元素 在構建一個優秀的Web頁面時,HTML元素的選擇和運用至關重要。這些元素不僅影響頁面的結構,還直接關系到頁面的可用性、可訪問性和SEO表現。本文將深入探討一些關鍵的HTML元素,并解釋它們在提升Web品質方面的重要性。 1. <html> 根元素 HTM…

【AI提示詞】競品分析專家

提示說明 對產品進行競品分析&#xff0c;明確產品定位和優化營銷策略。 提示詞 # 角色:競品分析專家## 背景: 需要對旗下產品A進行競品分析,明確產品定位和優化營銷策略。## 描述: - 作者:張三 - 版本:1.0 - 語言:中文## 注意事項: 保持客觀公正態度,用數據說話,給出具體的…

4-6記錄(B樹)

找左邊右下或者右邊左下 轉化成了前驅后繼的刪除 又分好幾種情況&#xff1a; 1. 只剩25&#xff0c;小于2&#xff0c;所以把父親拉到25旁邊&#xff0c;兄弟的70頂替父親 對于25&#xff0c;25的后繼就是70&#xff0c;25后繼的后繼是71&#xff08;中序遍歷) 2. 借左子樹…

什么是RACI矩陣,應用在什么場景?

一、什么是RACI RACI矩陣是一種用于明確項目或任務中角色與責任的管理工具&#xff0c;通過定義不同人員在任務中的參與程度來避免職責不清的問題。以下是其核心要點&#xff1a; ?RACI的含義? ● ?R&#xff08;Responsible&#xff09;執行者?&#xff1a;直接完成任務…

深入理解全排列算法:DFS與回溯的完美結合

全排列問題是算法中的經典問題&#xff0c;其目標是將一組數字的所有可能排列組合列舉出來。本文將詳細解析如何通過深度優先搜索&#xff08;DFS&#xff09;和回溯法高效生成全排列&#xff0c;并通過模擬遞歸過程幫助讀者徹底掌握其核心思想。 問題描述 給定一個正整數 n&a…

在 Dev-C++中編譯運行GUI 程序介紹(二)示例:祝福程序

在 Dev-C中編譯運行GUI 程序介紹&#xff08;二&#xff09;示例&#xff1a;祝福程序 前期見&#xff1a; 在 Dev-C中編譯運行GUI 程序介紹&#xff08;一&#xff09;基礎 https://blog.csdn.net/cnds123/article/details/147019078 示例1、祝福程序 本文中的這個祝福程序是…

Stable Diffusion 四重調參優化——項目學習記錄

學習記錄還原&#xff1a;在本次實驗中&#xff0c;我基于 Stable Diffusion v1.5模型&#xff0c;通過一系列優化方法提升生成圖像的質量&#xff0c;最終實現了圖像質量的顯著提升。實驗從基礎的 Img2Img 技術入手&#xff0c;逐步推進到參數微調、DreamShaper 模型和 Contro…

Solidity智能合約漏洞類型與解題思路指南

一、常見漏洞類型與通俗解釋 1. 重入攻擊(Reentrancy) ?? 通俗解釋:就像你去銀行取錢,柜臺人員先給你錢,然后再記賬。你拿到錢后立即又要求取錢,由于賬還沒記,柜臺又給你一次錢,這樣循環下去你就能拿走銀行所有的錢。 漏洞原理:合約在更新狀態前調用外部合約,允許…

Docker部署.NetCore8項目

在VS.net新建.netCore8項目&#xff0c;生成項目的發布文件&#xff0c;之后添加Dockerfile&#xff0c;內容如下&#xff1a; FROM mcr.microsoft.com/dotnet/aspnet:8.0 # 設置工作目錄 WORKDIR /app # 掛載臨時卷&#xff08;類似于 VOLUME /tmp&#xff09; VOLUME /tmp …

【C++】右值引用、移動語義與完美轉發

左值、右值是C常見的概念&#xff0c;那么什么是右值引用&#xff0c;移動語義&#xff0c;完美轉發呢&#xff1f;本UP帶大家了解一下C校招常問的C11新特性。 左值與右值 左值&#xff1a;明確存儲未知、可以取地址的表達式 右值&#xff1a;臨時的、即將被銷毀的&#xff…

艾爾登法環地圖不能使用鼠標移動或點擊傳送點原因和設置方法

今天玩艾爾登法環突發發現地圖不能用鼠標點擊傳送點了。 找了半天發現設置地圖選單的游標移動方式只有鍵盤了&#xff0c;改成鍵盤與鼠標就好啦。

【算法】——一鍵解決動態規劃

前言 動態規劃是一種高效解決??重疊子問題??和??最優子結構??問題的算法思想。它通過??分治記憶化??&#xff0c;將復雜問題分解為子問題&#xff0c;并存儲中間結果&#xff0c;避免重復計算&#xff0c;從而大幅提升效率。 ??為什么重要&#xff1f;? ??優化…

uniApp開發微信小程序-連接藍牙連接打印機上岸!

歷經波折三次成功上岸&#xff01; 三次經歷簡單絮叨一下&#xff1a;使用uniAppvue開發的微信小程序&#xff0c;使用藍牙連接打印機&#xff0c;藍牙所有的接口都是插件中封裝的&#xff0c;用的插件市場中的這個&#xff1a; dothan-lpapi-ble &#xff1b;所以&#xff0c…

軟件系統安全設計方案,信息化安全建設方案(Word原件)

1.1 總體設計 1.1.1 設計原則 1.2 物理層安全 1.2.1 機房建設安全 1.2.2 電氣安全特性 1.2.3 設備安全 1.2.4 介質安全措施 1.3 網絡層安全 1.3.1 網絡結構安全 1.3.2 劃分子網絡 1.3.3 異常流量管理 1.3.4 網絡安全審計 1.3.5 網絡訪問控制 1.3.6 完…

wsl2+ubuntu22.04安裝blenderproc教程

本章教程,介紹如何在windows操作系統上通過wsl2+Ubuntu22.04上安裝blenderproc。 一、pipi安裝方式 推薦使用minconda3安裝Python環境。 pip install Blenderproc二、源碼安裝 1、下載源碼 git clone https://github.com/DLR-RM/BlenderProc2、安裝依賴 cd BlenderProc &am…