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

蔡欣龍，朱培琦，張 雁

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

0 引言

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

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

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

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

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

1.1 物種信息管理模塊

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

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

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

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

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

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

2 系統(tǒng)設(shè)計

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

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

圖1 系統(tǒng)架構(gòu)圖

2.2 系統(tǒng)詳細(xì)設(shè)計

2.2.1 竹亞科植物信息檢索

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

2.2.2 竹亞科植物信息分類

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

2.2.3 物種信息管理

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

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

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

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

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

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

圖3 界面展示圖

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

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

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

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

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

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

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

圖4 Trie樹結(jié)構(gòu)

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

3.2 竹亞科植物信息分類

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

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

3.3 物種信息管理

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

4 結(jié)語

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

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