基于VUE和Spring MVC竹亚科植物物种信息管理系统的设计与实现

蔡欣龙，朱培琦，张 雁

（1.西南林业大学大数据与智能工程学院，昆明 650224；2.西南林业大学材料科学与工程学院，昆明 650224；3.西南林业大学数理学院，昆明 650224）

0 引言

竹亚科植物全球有70 余属，1000 余种，主要分布在东南亚热带地区和热带地区，少数分布在温带和寒带［1］。我国现已知的竹亚科植物物种约37 属，500 余种，多数分布在长江流域以南各省［2］。

我国是竹类资源大国，竹材资源相对丰富，覆盖面积和产量均居世界首位［3］。多年以来，我国在竹材的利用上有了很大的发展，尤其是在加工方面，但是在竹子的分类研究、构造解剖、信息数据库等基础研究方面未能与竹材工业的发展相互适应［4-5］。2003 年钟艳萍等［6］基于Web 技术搭建了中国竹子网Access 数据库；2014 年由国家科技部牵头建立了竹子种质资源库［7］；2020年四川农业大学基于竹叶图像复合特征的竹亚科植物进行了分类识别方法的研究等［8］。

基于上述背景，本文采用Spring MVC和VUE框架，前后端分离的开发模式，设计对禾本科竹亚科植物信息的管理。该系统实现了竹亚科植物中文名称和拉丁名称的检索、竹亚科各属的分类信息目录以及物种信息的管理。因此，本系统能够解决对竹亚科植物信息的检索和相关信息的查询，为科研人员、从业者提供便捷化、信息化的竹亚科植物物种信息数据平台。

1 系统需求分析

本系统的功能设计主要包括物种信息管理模块、竹亚科植物信息分类目录模块和竹亚科植物信息检索模块。

1.1 物种信息管理模块

物种信息管理模块提供了添加物种的基本信息、英文信息、科属信息以及图片信息的功能。基本信息包括：物种编号、中文名称、拉丁名称、中文概况；英文信息为英文简介；科属信息包括：中文科名、拉丁科名、中文属名、拉丁属名；图片信息为物种的生境图像。

对于系统来说，应明确物种信息管理的目的和需求。其中，管理员主要目的是实现信息的高效录入和分类管理，所以需要提供数据批量上传的入口和清晰的数据分类上传标签。

1.2 竹亚科植物信息分类模块

竹亚科植物信息分类模块提供了共40 个属的分类目录。该模块中40 个属的竹亚科植物包含了全国282个物种，并且可通过点击各属的分类目录展示该属下的物种数量和各物种的图像信息，可以满足用户对竹亚科植物分类情况的浏览。

1.3 竹亚科植物信息检索需求分析

竹亚科植物信息检索模块支持中文名称和拉丁名称的检索。该模块的检索结果包含了物种的中文名称、拉丁名称、物种简介（物种性状、分布情况）、英文信息以及图片信息，基本可以满足用户对竹亚科植物物种信息的检索需求。

2 系统设计

2.1 系统总体架构

本系统采用前后端分离的架构模式，实现了代码的解耦。相对于传统的MVC 架构，减少了后端服务器的压力，提升了整体系统的可维护性和安全性。前端使用Nginx 进行部署，负责控制页面渲染、路由跳转以及异步调用后端RestFul 接口，存储图片、CSS、Javascript 代码等一系列静态文件。后端使用tomcat 进行部署，负责提供RestFul 接口。前后端使用同一种格式（JSON）的数据进行交互，进一步提升系统的可维护性。后端基于Spring MVC 框架，向前端提供API接口；前端使用Vue框架，通过Http请求调用API 实现交互。系统的架构图如图1 所示，①表示用户权限的后端控制，Spring MVC 后端服务通过ROLE-ID 对用户角色加以判断，控制登陆用户的功能权限，②过程表示CUBA 框架中的Web 客户端层调用中间层提供的应用程序的核心业务逻辑以及数据库访问功能，再经由③过程使中间层与数据库进行交换，④过程表示前后端通过发送Http 请求及响应的方式实现数据交互。

图1 系统架构图

2.2 系统详细设计

2.2.1 竹亚科植物信息检索

用户进入竹亚科植物信息检索模块，待用户输入关键字，前端自动请求后，通过调用后端基于Trie前缀树的前缀匹配接口，从数据库中取出前缀相同的数据送回前端，由前端为用户提供输入建议。用户输入完成后，键入“回车”键，由前端发送Http请求，从数据库中获取物种的分页数据，再由前端将数据渲染到页面。

2.2.2 竹亚科植物信息分类

用户进入竹亚科植物信息分类模块，前端自动发起请求，通过调用后端的竹属接口获取当前数据库中所有的竹属数据，并将数据渲染到页面。在该模块的目录下，可选择竹亚科下不同属的目录标签，发送前端Http 请求，按属名对数据库进行检索，从数据库中获取对应属名的分页数据，再由前端将数据渲染到页面。

2.2.3 物种信息管理

物种信息管理模块为CUBA框架后端的Web客户端界面，是运行在Java servlet 容器上的单独Web 应用程序。物种信息管理模块为竹亚科植物信息录入提供了物种基本信息（编号、中文名、拉丁名、中文简介）、英文信息（英文简介）、科属信息（中文科名、拉丁科名、中文属名、拉丁属名）、图片信息等上传功能。用户进入信息管理模块，在数据管理一栏下的“物种信息管理”操作，点击“创建”按钮，进入新实体编辑页面，各项信息填写完毕后，点击“确定”按钮，调用添加接口，将新记录插入数据库。添加物种信息成功后，可在列表中进行查询、删除、编辑和批量编辑等操作。

2.3 数据库设计

根据竹亚科物种信息管理系统的业务，主要设计了如下业务表：表sec_user 记录用户信息；表sec_suer_role 记录角色信息；表bamboo_bamboo 记录竹亚科物种信息；表bamboo_my_img 记录物种图像信息；表sys_file 记录图像文件信息。各数据表之间的关系如图2所示。

图2 竹亚科物种信息管理系统ER图

3 系统实现

根据前面对竹亚科物种信息管理系统的需求分析与功能设计，数据库采用Navicat 工具构建，数据库表结构设计如2.3 中所述。本系统的实现采用了Vue+EIement-UI 进行前端页面开发，Google Chrome 浏览器呈现页面，基于Java JDK1.8 环境和Spring MVC 框架开发后端，实现竹亚科植物信息检索模块、竹亚科植物信息分类和物种信息管理模块，部分功能界面如图3所示。

图3 界面展示图

图3（a）、（b）、（c）、（d）为竹亚科物种信息管理系统中竹亚科植物信息检索模块，可检索查看物种的相关信息；图3（e）为竹亚科物种信息管理系统中竹亚科植物信息分类模块，可选择不同属查看对应的相关物种信息；图3（f）为竹亚科物种信息管理系统中物种信息管理模块，维护物种的信息资源，可增物种信息，对信息列表进行编辑、移除等操作。

3.1 基于Trie树的竹亚科植物信息检索

前端搭建检索页面和结果页面，对于检索页面中的输入框，使用Element-UI 提供的输入框组件，实现其中的fetch-suggestions方法（调用前缀匹配接口），并为输入框绑定“enter”键的监听事件，用户按下enter 后就跳转到检索结果页面，由检索结果页面请求关键词检索接口并渲染。

Tire树结构是通过合并字符串的前缀以及在根到叶的路径上存储字符串来实现字符串索引，它利用共享字符串公共前缀的方式，减少不必要的字符串比较，能提高查询速度［9］。在字符串存储时，按照顺序读取字符串的字符，并存储在上一层节点到下一层节点的路径上；索引字符串时，一个完整的字符串，可以用叶子节点对应的最长前缀表示。

后端实现两个接口：①前缀匹配接口；②关键词检索接口。前缀匹配接口基于Trie 树，Trie树节点代码如下所示。

Trie树的具体构建过程为：遍历数据库中所有的记录，对于每个记录的中文名称逐个字符扫描，从Trie 树的根节点开始向下搜索所有的分支，若存在当前字符的分支则利用该分支走向对应的节点，否则创建一个新节点，使用分支去存储该字符。对于中文名称中的最后一个字符，将其对应的节点的“isEnd”标志设置为true，代表该节点是结尾。同时将val 属性设置为中文名称，方便后续功能的实现。Trie树构建过程中扫描一个中文名称的对应代码如下所示。

构建完成的Trie树结构如图4所示。检索的流程：每次接收到前端发起的请求，就根据传来的检索关键词在Trie 树中先找到对应的节点，然后在该节点采用深度优先遍历算法（dfs）搜索该节点下“isEnd”标志为真的节点，搜索结束后把所有的结果返回给前端，具体的深度优先遍历代码如下所示。

图4 Trie树结构

对比常规的前缀匹配，Trie树利用字符串的公共前缀，极大地减少了查询时间，提高了执行效率；并且由于相同的前缀只存储一次，Trie树在存储空间的性能也较好。关键词检索接口通过接受前端传来的关键词，在数据库中寻找匹配的记录，把符合的记录全部返回给前端。

3.2 竹亚科植物信息分类

前端搭建一个分类页面，在页面的created方法中请求后端的竹属接口，获得数据库中所有的竹属数据并渲染。同时为每个渲染出的竹属框绑定点击事件，用户点击竹属框后就跳转到对应的检索结果页面。

后端实现竹属接口：扫描数据库中的所有记录，每发现一个新属名就加入返回体中，最终把所有的属名返回给前端。

3.3 物种信息管理

使用CUBA 框架根据Bamboo 实体的属性直接生成基础的浏览、编辑页面，所有页面使用由中间件层封装好的数据库访问接口操作数据库。对于Bamboo 实体的图片，使用uuid 实现竹子和图片之间的映射，按上传日期的年、月、日存放在服务器的不同目录下，如/2022/08/01，若当前日期的目录不存在，则先创建对应目录结构，再把图片存储进去。

4 结语

本文立足于竹亚科植物信息的管理需求，设计并实现了竹亚科物种信息的管理系统。该系统采用前后端分离的开发模式，前端采用VUE 框架和Element-UI 组件库进行页面开发、数据渲染；后台基于Java 的Spring MVC 框架进行功能接口开发，基于Trie 树实现对竹亚科植物物种信息的检索、分类和管理。该系统具有较强的可行性和实用性，为科研工作者、学习者提供便捷化、信息化的数据平台。

基于该系统，下一步将分地区开发数据可视化模块和地理分布热力图模块来进一步完善系统，使系统具有更大的现实意义与使用价值。