基于VUE和Spring_...种信息管理系统的设计与实现_蔡欣龙.pdf

现代计算机Modern Computer第 28 卷 第 24 期2022年12月25日文章编号:1007-1423（2022）24-0095-06DOI:10.3969/j.issn.1007-1423.2022.24.016蔡欣龙1，朱培琦2，张雁3（1.西南林业大学大数据与智能工程学院，昆明650224；2.西南林业大学材料科学与工程学院，昆明650224；3.西南林业大学数理学院，昆明650224）摘要：竹类资源具有可持续性、再生周期短、抗拉强度大等优势，但是竹亚科（Bambusoideae）植物物种数量繁多、分类复杂，不利于竹类资源应用和竹亚科植物分类学的研究。因此，采用前后端分离开发模式，前端使用VUE+Element-UI技术，后端使用Spring MVC 框架，设计并实现竹亚科植物物种信息管理系统，实现了基于Trie树的竹亚科植物信息检索、竹亚科植物信息分类和物种信息管理模块的各项功能，旨在达到对竹亚科植物物种信息的高效管理目标。具有较强的可行性与实用性，为科研工作者、相关从业者以及学习者提供便捷化、信息化的数据平台。此外，下一步将分地区开发数据可视化模块和地理分布热力图模块来进一步完善系统功能，提高系统的应用性。关键词：竹亚科；管理系统；VUE框架；Spring MVC框架；Trie树基金项目：云南省科技厅项目（202002AA10007）基于VUE和Spring MVC竹亚科植物物种信息管理系统的设计与实现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 1物种信息管理模块物种信息管理模块物种信息管理模块提供了添加物种的基本信息、英文信息、科属信息以及图片信息的功能。基本信息包括：物种编号、中文名称、拉丁名称、中文概况；英文信息为英文简介；科属信息包括：中文科名、拉丁科名、中文属名、拉丁属名；图片信息为物种的生境图像。对于系统来说，应明确物种信息管理的目 95现代计算机2022年的和需求。其中，管理员主要目的是实现信息的高效录入和分类管理，所以需要提供数据批量上传的入口和清晰的数据分类上传标签。1 1.2 2竹亚科植物信息分类模块竹亚科植物信息分类模块竹亚科植物信息分类模块提供了共40个属的分类目录。该模块中40个属的竹亚科植物包含了全国282个物种，并且可通过点击各属的分类目录展示该属下的物种数量和各物种的图像信息，可以满足用户对竹亚科植物分类情况的浏览。1 1.3 3竹亚科植物信息检索需求分析竹亚科植物信息检索需求分析竹亚科植物信息检索模块支持中文名称和拉丁名称的检索。该模块的检索结果包含了物种的中文名称、拉丁名称、物种简介（物种性状、分布情况）、英文信息以及图片信息，基本可以满足用户对竹亚科植物物种信息的检索需求。2系统设计2 2.1 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系统详细设计系统详细设计2 2.2 2.1 1竹亚科植物信息检索竹亚科植物信息检索用户进入竹亚科植物信息检索模块，待用户输入关键字，前端自动请求后，通过调用后端基于Trie前缀树的前缀匹配接口，从数据库中取出前缀相同的数据送回前端，由前端为用户提供输入建议。用户输入完成后，键入“回车”键，由前端发送Http请求，从数据库中获取物种的分页数据，再由前端将数据渲染到页面。2 2.2 2.2 2竹亚科植物信息分类竹亚科植物信息分类用户进入竹亚科植物信息分类模块，前端自动发起请求，通过调用后端的竹属接口获取当前数据库中所有的竹属数据，并将数据渲染到页面。在该模块的目录下，可选择竹亚科下不同属的目录标签，发送前端Http请求，按属名对数据库进行检索，从数据库中获取对应属名的分页数据，再由前端将数据渲染到页面。2 2.2 2.3 3物种信息管理物种信息管理物种信息管理模块为CUBA框架后端的Web客户端界面，是运行在 Java servlet 容器上的单独 Web 应用程序。物种信息管理模块为竹亚科植物信息录入提供了物种基本信息（编号、中文名、拉丁名、中文简介）、英文信息（英文简介）、科属信息（中文科名、拉丁科名、中文属名、拉丁属名）、图片信息等上传功能。用户进入信息管理模块，在数据管理一栏下的“物种 96蔡欣龙等：基于VUE和Spring MVC竹亚科植物物种信息管理系统的设计与实现第24期信息管理”操作，点击“创建”按钮，进入新实体编辑页面，各项信息填写完毕后，点击“确定”按钮，调用添加接口，将新记录插入数据库。添加物种信息成功后，可在列表中进行查询、删除、编辑和批量编辑等操作。2 2.3 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 浏览器呈现页面，基于 JavaJDK1.8 环境和Spring MVC框架开发后端，实现竹亚科植物信息检索模块、竹亚科植物信息分类和物种信息管理模块，部分功能界面如图3所示。（a）竹亚科植物信息检索界面（b）输入检索信息（c）竹亚科植物检索结果页面（d）竹亚科植物详情页（e）竹亚科植物信息分类界面（f）物种信息管理界面图 3界面展示图图3（a）、（b）、（c）、（d）为竹亚科物种信息 97现代计算机2022年管理系统中竹亚科植物信息检索模块，可检索查看物种的相关信息；图3（e）为竹亚科物种信息管理系统中竹亚科植物信息分类模块，可选择不同属查看对应的相关物种信息；图3（f）为竹亚科物种信息管理系统中物种信息管理模块，维护物种的信息资源，可增物种信息，对信息列表进行编辑、移除等操作。3 3.1 1基于基于TrieTrie树的竹亚科植物信息检索树的竹亚科植物信息检索前端搭建检索页面和结果页面，对于检索页面中的输入框，使用Element-UI提供的输入框组件，实现其中的fetch-suggestions方法（调用前缀匹配接口），并为输入框绑定“enter”键的监听事件，用户按下enter后就跳转到检索结果页面，由检索结果页面请求关键词检索接口并渲染。Tire树结构是通过合并字符串的前缀以及在根到叶的路径上存储字符串来实现字符串索引，它利用共享字符串公共前缀的方式，减少不必要的字符串比较，能提高查询速度9。在字符串存储时，按照顺序读取字符串的字符，并存储在上一层节点到下一层节点的路径上；索引字符串时，一个完整的字符串，可以用叶子节点对应的最长前缀表示。后端实现两个接口：前缀匹配接口；关键词检索接口。前缀匹配接口基于 Trie 树，Trie树节点代码如下所示。TRIE树节点结构public class TrieNodepublic String val；public boolean isEnd；public HashMap children；TrieNode（String val，boolean isEnd）this.val=val；this.isEnd=isEnd；this.children=new HashMap（）；Trie树的具体构建过程为：遍历数据库中所有的记录，对于每个记录的中文名称逐个字符扫描，从Trie树的根节点开始向下搜索所有的分支，若存在当前字符的分支则利用该分支走向对应的节点，否则创建一个新节点，使用分支去存储该字符。对于中文名称中的最后一个字符，将其对应的节点的“isEnd”标志设置为true，代表该节点是结尾。同时将val属性设置为中文名称，方便后续功能的实现。Trie树构建过程中扫描一个中文名称的对应代码如下所示。TRIE树插入新节点public void add（String word，TrieNode root）TrieNode current=root；for（int i=0；i word.length（）；i+）char c=word.charAt（i）；if（current.children.get（c）=null）current.children.put（c，new TrieNode（“”，false）；current=current.children.get（c）；if（！current.isEnd）current.val=word；current.isEnd=true；构建完成的Trie树结构如图4所示。检索的流程：每次接收到前端发起的请求，就根据传来的检索关键词在Trie树中先找到对应的节点，然后在该节点采用深度优先遍历算法（dfs）搜索该节点下“isEnd”标志为真的节点，搜索结束后把所有的结果返回给前端，具体的深度优先遍历代码如下所示。前缀匹配算法public void dfs（List res，TrieNode cur）if（cur！=null）for（Character c：cur.children.keySet（）TrieNode t=cur.children.get（c）；if（t.isEnd）res.add（t.val）；dfs（res，t）；对比常规的前缀匹配，Trie树利用字符串的公共前缀，极大地减少了查询时间，提高了执 98蔡欣龙等：基于VUE和Spring MVC竹亚科植物物种信息管理系统的设计与实现第24期行效率；并且由于相同的前缀只存储一次，Trie树在存储空间的性能也较好。关键词检索接口通过接受前端传来的关键词，在数据