基于VUE和Spring MVC竹亞科植物物種信息管理系統(tǒng)的設計與實現(xiàn)

蔡欣龍，朱培琦，張 雁

（1.西南林業(yè)大學大數(shù)據(jù)與智能工程學院，昆明 650224；2.西南林業(yè)大學材料科學與工程學院，昆明 650224；3.西南林業(yè)大學數(shù)理學院，昆明 650224）

0 引言

竹亞科植物全球有70 余屬，1000 余種，主要分布在東南亞熱帶地區(qū)和熱帶地區(qū)，少數(shù)分布在溫帶和寒帶［1］。我國現(xiàn)已知的竹亞科植物物種約37 屬，500 余種，多數(shù)分布在長江流域以南各省［2］。

我國是竹類資源大國，竹材資源相對豐富，覆蓋面積和產(chǎn)量均居世界首位［3］。多年以來，我國在竹材的利用上有了很大的發(fā)展，尤其是在加工方面，但是在竹子的分類研究、構造解剖、信息數(shù)據(jù)庫等基礎研究方面未能與竹材工業(yè)的發(fā)展相互適應［4-5］。2003 年鐘艷萍等［6］基于Web 技術搭建了中國竹子網(wǎng)Access 數(shù)據(jù)庫；2014 年由國家科技部牽頭建立了竹子種質資源庫［7］；2020年四川農業(yè)大學基于竹葉圖像復合特征的竹亞科植物進行了分類識別方法的研究等［8］。

基于上述背景，本文采用Spring MVC和VUE框架，前后端分離的開發(fā)模式，設計對禾本科竹亞科植物信息的管理。該系統(tǒng)實現(xiàn)了竹亞科植物中文名稱和拉丁名稱的檢索、竹亞科各屬的分類信息目錄以及物種信息的管理。因此，本系統(tǒng)能夠解決對竹亞科植物信息的檢索和相關信息的查詢，為科研人員、從業(yè)者提供便捷化、信息化的竹亞科植物物種信息數(shù)據(jù)平臺。

1 系統(tǒng)需求分析

本系統(tǒng)的功能設計主要包括物種信息管理模塊、竹亞科植物信息分類目錄模塊和竹亞科植物信息檢索模塊。

1.1 物種信息管理模塊

物種信息管理模塊提供了添加物種的基本信息、英文信息、科屬信息以及圖片信息的功能?；拘畔ǎ何锓N編號、中文名稱、拉丁名稱、中文概況；英文信息為英文簡介；科屬信息包括：中文科名、拉丁科名、中文屬名、拉丁屬名；圖片信息為物種的生境圖像。

對于系統(tǒng)來說，應明確物種信息管理的目的和需求。其中，管理員主要目的是實現(xiàn)信息的高效錄入和分類管理，所以需要提供數(shù)據(jù)批量上傳的入口和清晰的數(shù)據(jù)分類上傳標簽。

1.2 竹亞科植物信息分類模塊

竹亞科植物信息分類模塊提供了共40 個屬的分類目錄。該模塊中40 個屬的竹亞科植物包含了全國282個物種，并且可通過點擊各屬的分類目錄展示該屬下的物種數(shù)量和各物種的圖像信息，可以滿足用戶對竹亞科植物分類情況的瀏覽。

1.3 竹亞科植物信息檢索需求分析

竹亞科植物信息檢索模塊支持中文名稱和拉丁名稱的檢索。該模塊的檢索結果包含了物種的中文名稱、拉丁名稱、物種簡介（物種性狀、分布情況）、英文信息以及圖片信息，基本可以滿足用戶對竹亞科植物物種信息的檢索需求。

2 系統(tǒng)設計

2.1 系統(tǒng)總體架構

本系統(tǒng)采用前后端分離的架構模式，實現(xiàn)了代碼的解耦。相對于傳統(tǒng)的MVC 架構，減少了后端服務器的壓力，提升了整體系統(tǒng)的可維護性和安全性。前端使用Nginx 進行部署，負責控制頁面渲染、路由跳轉以及異步調用后端RestFul 接口，存儲圖片、CSS、Javascript 代碼等一系列靜態(tài)文件。后端使用tomcat 進行部署，負責提供RestFul 接口。前后端使用同一種格式（JSON）的數(shù)據(jù)進行交互，進一步提升系統(tǒng)的可維護性。后端基于Spring MVC 框架，向前端提供API接口；前端使用Vue框架，通過Http請求調用API 實現(xiàn)交互。系統(tǒng)的架構圖如圖1 所示，①表示用戶權限的后端控制，Spring MVC 后端服務通過ROLE-ID 對用戶角色加以判斷，控制登陸用戶的功能權限，②過程表示CUBA 框架中的Web 客戶端層調用中間層提供的應用程序的核心業(yè)務邏輯以及數(shù)據(jù)庫訪問功能，再經(jīng)由③過程使中間層與數(shù)據(jù)庫進行交換，④過程表示前后端通過發(fā)送Http 請求及響應的方式實現(xiàn)數(shù)據(jù)交互。

圖1 系統(tǒng)架構圖

2.2 系統(tǒng)詳細設計

2.2.1 竹亞科植物信息檢索

用戶進入竹亞科植物信息檢索模塊，待用戶輸入關鍵字，前端自動請求后，通過調用后端基于Trie前綴樹的前綴匹配接口，從數(shù)據(jù)庫中取出前綴相同的數(shù)據(jù)送回前端，由前端為用戶提供輸入建議。用戶輸入完成后，鍵入“回車”鍵，由前端發(fā)送Http請求，從數(shù)據(jù)庫中獲取物種的分頁數(shù)據(jù)，再由前端將數(shù)據(jù)渲染到頁面。

2.2.2 竹亞科植物信息分類

用戶進入竹亞科植物信息分類模塊，前端自動發(fā)起請求，通過調用后端的竹屬接口獲取當前數(shù)據(jù)庫中所有的竹屬數(shù)據(jù)，并將數(shù)據(jù)渲染到頁面。在該模塊的目錄下，可選擇竹亞科下不同屬的目錄標簽，發(fā)送前端Http 請求，按屬名對數(shù)據(jù)庫進行檢索，從數(shù)據(jù)庫中獲取對應屬名的分頁數(shù)據(jù)，再由前端將數(shù)據(jù)渲染到頁面。

2.2.3 物種信息管理

物種信息管理模塊為CUBA框架后端的Web客戶端界面，是運行在Java servlet 容器上的單獨Web 應用程序。物種信息管理模塊為竹亞科植物信息錄入提供了物種基本信息（編號、中文名、拉丁名、中文簡介）、英文信息（英文簡介）、科屬信息（中文科名、拉丁科名、中文屬名、拉丁屬名）、圖片信息等上傳功能。用戶進入信息管理模塊，在數(shù)據(jù)管理一欄下的“物種信息管理”操作，點擊“創(chuàng)建”按鈕，進入新實體編輯頁面，各項信息填寫完畢后，點擊“確定”按鈕，調用添加接口，將新記錄插入數(shù)據(jù)庫。添加物種信息成功后，可在列表中進行查詢、刪除、編輯和批量編輯等操作。

2.3 數(shù)據(jù)庫設計

根據(jù)竹亞科物種信息管理系統(tǒng)的業(yè)務，主要設計了如下業(yè)務表：表sec_user 記錄用戶信息；表sec_suer_role 記錄角色信息；表bamboo_bamboo 記錄竹亞科物種信息；表bamboo_my_img 記錄物種圖像信息；表sys_file 記錄圖像文件信息。各數(shù)據(jù)表之間的關系如圖2所示。

圖2 竹亞科物種信息管理系統(tǒng)ER圖

3 系統(tǒng)實現(xiàn)

根據(jù)前面對竹亞科物種信息管理系統(tǒng)的需求分析與功能設計，數(shù)據(jù)庫采用Navicat 工具構建，數(shù)據(jù)庫表結構設計如2.3 中所述。本系統(tǒng)的實現(xiàn)采用了Vue+EIement-UI 進行前端頁面開發(fā)，Google Chrome 瀏覽器呈現(xiàn)頁面，基于Java JDK1.8 環(huán)境和Spring MVC 框架開發(fā)后端，實現(xiàn)竹亞科植物信息檢索模塊、竹亞科植物信息分類和物種信息管理模塊，部分功能界面如圖3所示。

圖3 界面展示圖

圖3（a）、（b）、（c）、（d）為竹亞科物種信息管理系統(tǒng)中竹亞科植物信息檢索模塊，可檢索查看物種的相關信息；圖3（e）為竹亞科物種信息管理系統(tǒng)中竹亞科植物信息分類模塊，可選擇不同屬查看對應的相關物種信息；圖3（f）為竹亞科物種信息管理系統(tǒng)中物種信息管理模塊，維護物種的信息資源，可增物種信息，對信息列表進行編輯、移除等操作。

3.1 基于Trie樹的竹亞科植物信息檢索

前端搭建檢索頁面和結果頁面，對于檢索頁面中的輸入框，使用Element-UI 提供的輸入框組件，實現(xiàn)其中的fetch-suggestions方法（調用前綴匹配接口），并為輸入框綁定“enter”鍵的監(jiān)聽事件，用戶按下enter 后就跳轉到檢索結果頁面，由檢索結果頁面請求關鍵詞檢索接口并渲染。

Tire樹結構是通過合并字符串的前綴以及在根到葉的路徑上存儲字符串來實現(xiàn)字符串索引，它利用共享字符串公共前綴的方式，減少不必要的字符串比較，能提高查詢速度［9］。在字符串存儲時，按照順序讀取字符串的字符，并存儲在上一層節(jié)點到下一層節(jié)點的路徑上；索引字符串時，一個完整的字符串，可以用葉子節(jié)點對應的最長前綴表示。

后端實現(xiàn)兩個接口：①前綴匹配接口；②關鍵詞檢索接口。前綴匹配接口基于Trie 樹，Trie樹節(jié)點代碼如下所示。

Trie樹的具體構建過程為：遍歷數(shù)據(jù)庫中所有的記錄，對于每個記錄的中文名稱逐個字符掃描，從Trie 樹的根節(jié)點開始向下搜索所有的分支，若存在當前字符的分支則利用該分支走向對應的節(jié)點，否則創(chuàng)建一個新節(jié)點，使用分支去存儲該字符。對于中文名稱中的最后一個字符，將其對應的節(jié)點的“isEnd”標志設置為true，代表該節(jié)點是結尾。同時將val 屬性設置為中文名稱，方便后續(xù)功能的實現(xiàn)。Trie樹構建過程中掃描一個中文名稱的對應代碼如下所示。

構建完成的Trie樹結構如圖4所示。檢索的流程：每次接收到前端發(fā)起的請求，就根據(jù)傳來的檢索關鍵詞在Trie 樹中先找到對應的節(jié)點，然后在該節(jié)點采用深度優(yōu)先遍歷算法（dfs）搜索該節(jié)點下“isEnd”標志為真的節(jié)點，搜索結束后把所有的結果返回給前端，具體的深度優(yōu)先遍歷代碼如下所示。

圖4 Trie樹結構

對比常規(guī)的前綴匹配，Trie樹利用字符串的公共前綴，極大地減少了查詢時間，提高了執(zhí)行效率；并且由于相同的前綴只存儲一次，Trie樹在存儲空間的性能也較好。關鍵詞檢索接口通過接受前端傳來的關鍵詞，在數(shù)據(jù)庫中尋找匹配的記錄，把符合的記錄全部返回給前端。

3.2 竹亞科植物信息分類

前端搭建一個分類頁面，在頁面的created方法中請求后端的竹屬接口，獲得數(shù)據(jù)庫中所有的竹屬數(shù)據(jù)并渲染。同時為每個渲染出的竹屬框綁定點擊事件，用戶點擊竹屬框后就跳轉到對應的檢索結果頁面。

后端實現(xiàn)竹屬接口：掃描數(shù)據(jù)庫中的所有記錄，每發(fā)現(xiàn)一個新屬名就加入返回體中，最終把所有的屬名返回給前端。

3.3 物種信息管理

使用CUBA 框架根據(jù)Bamboo 實體的屬性直接生成基礎的瀏覽、編輯頁面，所有頁面使用由中間件層封裝好的數(shù)據(jù)庫訪問接口操作數(shù)據(jù)庫。對于Bamboo 實體的圖片，使用uuid 實現(xiàn)竹子和圖片之間的映射，按上傳日期的年、月、日存放在服務器的不同目錄下，如/2022/08/01，若當前日期的目錄不存在，則先創(chuàng)建對應目錄結構，再把圖片存儲進去。

4 結語

本文立足于竹亞科植物信息的管理需求，設計并實現(xiàn)了竹亞科物種信息的管理系統(tǒng)。該系統(tǒng)采用前后端分離的開發(fā)模式，前端采用VUE 框架和Element-UI 組件庫進行頁面開發(fā)、數(shù)據(jù)渲染；后臺基于Java 的Spring MVC 框架進行功能接口開發(fā)，基于Trie 樹實現(xiàn)對竹亞科植物物種信息的檢索、分類和管理。該系統(tǒng)具有較強的可行性和實用性，為科研工作者、學習者提供便捷化、信息化的數(shù)據(jù)平臺。

基于該系統(tǒng)，下一步將分地區(qū)開發(fā)數(shù)據(jù)可視化模塊和地理分布熱力圖模塊來進一步完善系統(tǒng)，使系統(tǒng)具有更大的現(xiàn)實意義與使用價值。