基于MVVM架构的解析木信息管理系统的开发

柯小龙 周春国

摘 要：为满足解析木信息日常管理需要和提高树干解析内业工作效率，本文基于MVVM（模型（Model）-视图（View）-视图模型（ViewModel））架构，结合MongoDB数据库、Express后端框架和Vue前端框架，设计与开发前后端分离的解析木信息管理系统，提供用户管理、信息管理、信息查询、信息编辑、信息一键解析、通知管理和日志管理等功能，实现解析木信息的数字化管理和树干解析内业工作的自动化，以同时满足解析木信息的管理和处理需要。结果表明，该系统具有界面美观、简单易用、快速高效和支持在线使用的特点，通过MVVM架构可以极大提高系统开发效率和系统性能。

关键词：解析木信息;树干解析;MVVM架构;信息管理系统

中图分类号：TP391.7    文献标识码：A   文章编号：1006-8023（2021）01-0018-10

Abstract：In order to meet the needs of daily management of stem analysis information and improve the efficiency of internal work of stem analysis， based on the MVVM （Model-View-View Model） architecture， combined with the MongoDB database， the Express back-end framework and the Vue front-end framework， this paper designed and developed the stem analysis information management system， which was decomposed into front-end and back-end. It provided user management， information management， information query， information edit， one-click analysis of information， notification management， log management and other functions. It realized the digital management of stem analysis information and automation of internal work of stem analysis， so as to meet both the needs of information management and processing. The results showed that the stem analysis information management system had the characteristics of beautiful interface， easy to use， fast and efficient， and supports online use. The MVVM architecture can greatly improve the system development efficiency and system performance.

Keywords：Stem analysis information; stem analysis; MVVM architecture; information management system

0 引言

树干解析，是从树干基部到树梢顶端，每隔一定距离取横切面，根据横切面上年轮数量及其直径来计算树木直径生长经过和绘制树干纵断面图，以研究树木直径、高度和材积生长过程的基本方法，其中，作为解析对象的树木被称为解析木。树干解析作为当前研究树木生长规律最准确的方法，应用普遍，如陈晨等[1]和丛健等[2]通过树干解析分别对白皮松（Pinus bungeana Zucc. ex Endl.）和樟子松（Pinus sylvestris L. var. mongolica Litv.）的生长规律进行研究，孙虎等[3]通过树干解析探究红松（Pinus koraiensis Sieb. et Zucc.）的生长区域、胸径和各器官对其含碳率的影响。

然而，树干解析内业工作数据量大、計算繁琐、制图困难，若采用传统手工方法进行计算和绘图，不仅费时费力，而且精度偏低[4]。其后虽然出现了利用Visual Basic、Delphi等多种开发语言开发的树干解析桌面程序[5-6]，但由于桌面程序受操作系统和软件成本的限制，难以得到普及。亦有学者提出了使用Excel软件和Forstat软件进行树干解析的方法[7-8]，这类方法虽然可行，但在实际操作过程中仍需使用者手动输入和选择大量数据或公式，没有实现计算和绘图过程的自动化。且上述程序和方法均只包含输入解析木信息、进行树干解析和输出解析结果这一线性流程，未将用户输入的解析木信息保存下来，这导致用户每次进行树干解析前，都需要重新输入一遍解析木信息，操作十分繁琐，在深层次上则导致了解析木信息的日常管理缺失。

本文基于传统MVC（模型（Model）-视图（View）-控制器（Controller））架构的改进版——MVVM（模型（Model）-视图（View）-视图模型（ViewModel））架构，结合MongoDB数据库、Express后端框架和Vue前端框架，设计与开发解析木信息管理系统，一方面通过前后端分离，使得系统支持跨平台使用，以摆脱传统树干解析程序在操作系统和软件成本上的限制，另一方面通过整合解析木信息管理和树干解析两大业务功能，以同时满足解析木信息日常管理需要和提高树干解析内业工作效率。

1 系统目标

系统旨在实现以下几个目标：

（1）支持用户向系统中添加解析木信息，并随时对已添加的解析木信息进行查询、编辑和删除等操作，以满足解析木信息的日常管理需要。

（2）支持用户对系统内已有的解析木信息进行一键解析，即在无需用户手动输入任何额外公式和数据的情况下，系统便能自动、快速地计算和输出各项解析结果，以最大化地降低系统学习和使用成本，提高树干解析内业工作效率。

（3）支持图表与用户间的动态交互，而非数据的简单陈列，如树干纵断面图的生长过程演示、鼠标经过曲线时会出现提示气泡、点击图例可切换对应曲线的显示与否、右键点击图表后可选择保存为图片等，以更加生动、直观地展示解析结果，增强用户体验。

2 系统设计

2.1 系统架构

在传统的MVC架构中，模型（Model）和视图（View）必须通过控制器（Controller）来承上启下，层级之间单向通信;在MVC架构的改进版——MVVM架构中，视图模型（ViewModel）通过数据绑定收集依赖和通过DOM事件监听更新依赖，充当了模型（Model）和视图（View）之间的桥梁，从而实现了层级之间的双向通信，使得开发更高效、结构更清晰、系统性能更好[9]。两种架构的对比如图1所示。

系统基于MVVM架构，采用前后端分离的开发模式，结合MongoDB数据库、Express后端框架和Vue前端框架进行开发，前后端之间通过AJAX技术进行通信（图2）。

（1）模型（Model）。模型由数据库和业务逻辑两部分组成。

数据库：采用MongoDB非关系型数据库存储包含基本信息（树种、树龄和树高）、圆盘信息（数量、龄阶、是否带皮以及各圆盘编号、高度、年轮数和各龄阶直径）和额外信息（如立地条件等不参与计算过程的信息，以及用于绘制树干三维模型的树皮颜色信息）的解析木信息（图3）、用户信息、日志记录信息和消息通知信息，并通过Mongoose对象模型工具来操作数据库。不同于使用表来存储数据的非关系型数据库，MongoDB数据库采用集合和类似于JSON对象的文档来存储数据，不同集合之间通过引用字段进行关联（如解析木信息集合中通过所属用户字段与用户集合产生关联），这种灵活的数据格式和关联模式使其拥有优秀的读写性能和较强的可扩展性和可维护性，适用于信息管理等应用场景。Mongoose基于Schema定义数据模型，提供大量统一、简便的接口供开发者操作数据库，且其内置数据验证、查询构建和业务逻辑钩子等功能，极大地提高了开发效率。

业务逻辑：采用基于Node.js的Express框架，并引入body-parser中间件。Express框架提供了基本的Web应用程序功能，如路由、模板引擎和托管静态资源等，且支持开发者引入各类中间件来丰富框架功能。body-parser中间件是Express框架中非常常用的一个中间件，其能对网络请求进行解析，如将GET请求和POST请求中不同类型的请求体、编码和压缩内容解析成适合Express框架处理的格式。

（2）视图模型（ViewModel）。采用Vue框架来担当视图模型，并导入VueRouter和Vuex插件。Vue框架基于发布订阅者模式和ECMAScript 5的语言特性进行数据劫持，实现了响应式数据绑定，能够为复杂的单页应用提供驱动[10]。VueRouter插件支持模块化和基于组件的路由配置、参数、查询和通配符，在用户切换页面时，应用只需要向后端拉取局部调整用的模板，而无需拉取完整的页面，能大大减少资源消耗。Vuex插件采用集中式存储来维护和管理应用的共享状态，并提供相关调试工具，以维持视图和状态之间的独立性，提高代码的可维护性。

（3）视图（View）。采用Ant Design of Vue界面组件库、AntV G2图表引擎和Three.js三维引擎，分别用于绘制系统界面、统计图表和三维模型。Ant Design of Vue界面组件库有着提炼自企业级中后台产品的交互语言和视觉风格，且与Vue高度集成，能为应用提供视觉统一和效果精美的界面组件。AntV G2图表引擎支持以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性，能构建出各种各样的可交互的统计图表。Three.js三维引擎基于原生WebGL封装运行，可用于创建包括几何体、材质、网格模型、摄影机和光照等各种对象的三维场景，且能直接运行于浏览器环境中。

2.2 系统功能

系统主要包含用户管理、解析木信息管理、树干解析、消息通知和日志记录5个功能模块（图4）。

（1）用户管理模块。用户分为管理员用户和普通用户两类。管理员用户的用户名和密码需在系统部署时指定，当系统启动时，系统会自动创建管理员用户或更新已存在的管理员用户的信息;普通用户不对外开放注册，而需经由管理员用户来创建和分发，以保证系统的私密性。管理员用户的权限级别高于普通用户，如管理员用户有权对普通用户的信息进行编辑，以及启用和停用普通用户。

（2）解析木信息管理模块。用户可以添加、查询、编辑和删除解析木信息。

添加解析木信息：普通用户可以向系统中添加新的解析木信息。在添加解析木信息时，用户需要填写树种、树龄、树高、龄階、是否带皮、树皮颜色、圆盘数量和各圆盘信息等信息。用户提交信息时，系统会先对信息的格式进行验证和整理，并自动剔除无效数据，其后，才会将解析木信息写入到数据库之中，以确保解析木信息的完整无误。

查询解析木信息：用户可以按不同条件（如树种、树龄、树高和龄阶）来筛选解析木信息，并进一步查看其详细信息。管理员用户可以查看系统内全部的解析木信息;而普通用户仅能查看自己所有的解析木信息。

编辑和删除解析木信息：用户如果在添加解析木信息时误填了某些信息，可以在之后对其进行编辑，以改正错误;用户也可将多余或无用的解析木信息删除，以释放存储空间。解析木信息只能由其所属用户进行编辑和删除。

（3）树干解析模块。用户可以对任一解析木信息进行一键解析，系统会按常规方法[11-12]进行计算，并输出各项解析结果。

各圆盘对应生长年数和树木各年龄树高：基于树龄和各圆盘年轮数，计算树木生长至各圆盘高度所需年数，如一树龄为12 a的解析木，若其一圆盘上有9个年轮，说明树木生长至该圆盘对应高度所需的年数为3 a，其他圆盘同理。其后，基于各圆盘对应生长年数，采用线性内插法计算树木各年龄树高。

树木材积及其生长方程：基于树木各年龄树高以及各圆盘信息，对各年龄对应的树木进行分段，并根据分段情况采用相应的求积公式，如树高小于1.3 m时，看作梢头，使用圆锥体积公式进行计算;树高小于2.6 m时，0～1.3m分段使用平均断面积求积公式进行计算，1.3 m至树顶部分，看作梢头;树高高于2.6 m时，0～2.6 m分段使用中央断面积求积公式进行计算，若无位于2.6 m高度的圆盘，则0至这一圆盘高对应分段使用平均断面积求积公式进行计算，再往上的分段均采用平均断面积求积公式进行计算，直至到达最后一段，将其看作梢头，使用圆锥体积公式进行计算。当前年龄树木的各分段材积累加后即为当前年龄树木材积，据此得到树木各年龄材积。其后，使用Logistic模型对树木各年龄材积进行拟合，求得模型参数和评判指标（SSE、R2、RMSE）。

树木材积生长率及其曲线：基于树木各年龄材积，采用普雷斯特公式计算树木各年龄材积生长率，并绘制材积生长率曲线。

树木胸高形数及其曲线：基于树木各年龄材积，采用常规方法计算树木各年龄胸高形数，并绘制胸高形数曲线。

树木各生长量及其曲线：基于各圆盘信息以及树木各年龄树高、材积，计算树木胸径、树高和材积的各生长量，并绘制相应的生长量曲线。例如，材积总生长量为树木当前年龄材积;材积平均生长量为树木当前年龄材积除以其年龄;材积连年生长量为树木相邻龄阶材积的差值;胸径和树高各生长量的计算方法同理。

树干纵断面图：基于树高和各圆盘信息，按高度与底径之比为2.5来绘制树干纵断面图。用户可以点击“生长过程动态演示”开关，以预览树干纵断面按年龄的动态变化过程。

树干三维模型：基于树高、树皮颜色和各圆盘信息，按高度与底径之比为2.5来绘制树干三维模型。用户可以点击三维模型，以切换三维模型中各圆盘的显示状态，或拖动鼠标来调整视角和旋转模型。

（4）消息通知模块。管理员用户可以向指定的普通用户发送消息通知;普通用户阅读消息通知后，通知的状态会自动标记为“已读”;普通用户可将“已读”通知再手动标记为“未读”，以作为待处理通知。

（5）日志记录模块。用户的一些操作（如创建普通用户、添加解析木和编辑解析木等）会向数据库中写入或删除数据。这些操作均会被自动记录到日志之中。用户可以查阅日志记录，以查看各个操作的时间、类型和携带参数等信息。管理员用户能查阅所有用户的日志记录;普通用户只能查阅自己的日志记录。

3 系统应用与测试

3.1 用户登录和管理用户

用户登录：进入系统，在登录窗口中输入用户名和密码，点击“登录”按钮，即可登入系统。如输入的是管理员用户的用户名和密码（需由开发人员在系统配置文件中指定），会以管理员用户的身份登入系统;如输入的是普通用户的用户名和密码，会以普通用户的身份登入系统。成功登录系统后，会自动跳转至系统首页。

添加用户：以管理员用户的身份登入系统。在系统首页，鼠标移至页面右上角的用户信息处，点击弹出的导航菜单中的“用户管理”选项，即可跳转至用户管理页面。该页面展示了系统内全部普通用户的ID、用户名、密码和用户描述。点击页面中右上角的“添加用户”按钮，在弹出窗口中填写新用户的用户名、密码和用户描述后，再点击“提交”按钮，即可创建新用户。新用户默认为可用状态。

编辑、启用和停用用户：同添加用户中的步骤，进入用户管理页面。点击用户列表的操作列中的“编辑”按钮，可以对用户的信息进行编辑;点击“启用”和“停用”按钮，可以分别将用户修改为可用和禁用状态，处于禁用状态的用户无权登录系统和进行其他任何操作。

3.2 解析木信息管理

添加解析木信息：以普通用户的身份登入系统后，会自动跳转至解析木信息管理页面。用户可以在该页面浏览、查询和查看自己拥有的解析木信息。点击页面右上角的“添加解析木信息”按鈕，即可进入解析木信息添加页面（图5）。在该页面中，用户需要输入解析木的树种、树龄、树高、龄阶、是否带皮、树皮颜色、圆盘数量和各圆盘信息，其他信息则可填写在备注栏之中。过程中，系统会实时对已输入信息进行验证和校正，譬如，当用户填写的某圆盘高高于树高时，弹出提示框提醒用户输入的信息有误，并暂时将其修改为树高。用户填写完所有信息后，点击“提交”按钮，系统便会将解析木信息上传到数据库之中。

编辑和删除解析木信息：在解析木信息管理页面中，点击解析木信息列表中的“编辑”按钮，会跳转至解析木信息编辑页面，用户可在该页面对该条解析木信息进行编辑;点击“删除”按钮，可从数据库中删除该条解析木信息。

3.3 树干一键解析

树干一键解析：在解析木信息管理页面中，点击解析木信息列表中的“解析”按钮，即可对该条解析木信息进行一键解析。系统将基于解析木信息，自动计算各树干解析因子，待计算完成后，系统将跳转至解析结果页面。

查看解析结果：在解析结果页面，用户可以通过切换页面上方的菜单项来查看不同类别的解析结果。解析结果包含各圆盘高度对应年龄、树木各年龄树高、树木各年龄材积计算过程、树木各年龄材积、树木材积生长方程、树木材积生长曲线、树木各年龄材积生长率及其曲线、树木各年龄胸高形数及其曲线、树木各年龄的各生长量及其曲线、树干纵断面图和树干三维模型。部分解析结果如图6—图8所示。页面中所有的统计图表都可通过鼠标右击、选择“图片另存为”来进行保存。

3.4 消息通知管理

发布消息通知：以管理员用户的身份登入系统，选择导航菜单中的“消息通知”选项，进入消息通知管理页面。点击页面中右上角的“发布通知”按钮，在弹出窗口中选择发布对象和填写通知标题、内容后，再点击“提交”按钮，即可向指定用户发送消息通知。

查看消息通知：以普通用户的身份登入系统，进入消息通知管理页面。用户可以在该页面中查看自己收到的所有消息通知。消息通知被查看后，会自动变为已读状态。用户可以手动点击“标记为未读”按钮将消息通知重新标记为未读状态，以作留存。

3.5 日志记录管理

查看消息通知：登入系统后，选择导航菜单中的“日志记录”选项，进入日志记录管理页面。用户可以在该页面中查看自己所有的历史操作记录，并通过点击日志记录列表的操作列中的“查看”按钮来查看该条操作的详细信息（如操作时间、操作类型和携带参数）。

删除消息通知：日志记录列表的操作列中的“删除”按钮，可删除该条日志记录。

4 结论与讨论

（1）该系统将解析木信息管理和树干解析两大业务整合并作为系统的核心功能。其中，解析木信息管理模块支持用户对解析木信息进行添加、查询、查看、编辑和删除等操作，能满足解析木信息的日常管理需要;树干解析模块在尽量简化用户操作和输入的前提下，能自动且快速地计算和输出包含各圆盘高度对应年龄、樹木各年龄树高、树木各年龄材积计算过程、树木各年龄材积、树木材积生长方程、树木材积生长曲线、树木各年龄材积生长率及其曲线、树木各年龄胸高形数及其曲线、树木各年龄的各生长量及其曲线、树干纵断面图和树干三维模型的解析结果，亦能满足树干解析内业工作的需要。该系统能同时满足解析木信息日常管理需要和提高树干解析内业工作效率。

（2）该系统基于当前流行的Web技术（如MVVM架构、前后端分离和Vue框架等）开发而成，相较于传统的桌面程序，既免去了程序在安装和更新上的繁琐步骤，也避免了软件在平台适配和渠道分发上花费大量财力、物力;相较于基于MVC架构开发的程序，通过视图模型（ViewModel）提高了层级之间的通信效率，降低了代码的复杂度，从而大大提高了程序的开发效率和系统性能。同时，Web应用生态上的不断完善和性能上的不断突破，使其已经能满足某些专业计算和绘图的需要。基于MVVM架构开发的该系统，是将计算机前沿技术应用于林业软件开发的一次有益尝试，可为林业或其他行业的软件开发者提供参考。

（3）由于Vue框架使用了IE8浏览器无法模拟的ECMAScript 5语言特性，所以该系统无法兼容IE8及其以下版本的浏览器。但随着互联网和Web技术的飞速发展，低于IE10版本的浏览器正在逐渐淡出市场，系统的兼容性问题将自然而然地得到解决。

【参 考 文 献】

[1]陈晨，刘光武.黄龙山林区白皮松天然次生林生长规律研究[J/OL].南京林业大学学报（自然科学版）：1-8[2020-08-17].http：//kns.cnki.net/kcms/detail/32.1161.s.20200507.1010.002.html.

CHEN C， LIU G W. Growth law for natural secondary forest of Pinus bungeana in Huanglong Mountain forest region[J/OL]. Journal of Nanjing Forestry University （Natural Sciences Edition）：1-8 [2020-08-17]. http：//kns.cnki.net/kcms/detail/32.1161.s.20200507.1010.002.html.

[2]丛健，沈海龙.东北东部山区樟子松人工林生长阶段划分和生长进程分析[J].森林工程，2016，32（3）：16-20.

CONG J， SHENG H L. Growth period division and growth rhythm analysis for trees in plantation of Pinus sylvestris var. mongolica in Eastern Maintain Area of Northeast China[J]. Forest Engineering， 2016， 32（3）：16-20.

[3]孙虎，李凤日，贾炜玮.等.人工红松中龄林含碳率研究[J].森林工程，2013，29（5）：19-23.

SUN H， LI F R， JIA W W， et al. The study on carbon content of planted Pinus koraiensis middle-aged forest[J]. Forest Engineering， 2013， 29（5）：19-23.

[4]李永儒，曹艳杰.树干解析实用技术的探讨[J].内蒙古林业调查设计，2006，29（1）：63-65.

LI Y R， CAO Y J. Practice technology of stem analysis[J]. Inner Mongolia Forestry Investigation and Design， 2006， 29（1）：63-65.

[5]柯德森.利用VB开发树干解析应用软件的探讨[J].林业勘察设计，2004，24（2）：6-8.

KE D S. Developing application software for stem analysis using VB[J]. Forestry Prospect and Design， 2004， 24（2）：6-8.

[6]翁玉山.树干解析的Delphi程序设计[J].河北林业科技，2007，35（4）：19-20.

WENG Y S. Design of stem analysis program with Delphi[J]. The Journal of Hebei Forestry Science and Technology， 2007， 35（4）：19-20.

[7]梁林峰.基于Excel函数及图表工具的树干解析方法[J].林业调查规划，2015，40（6）：11-16.

LIANG L F. Trunk analysis method based on excel function and chart tools[J]. Forest Inventory and Planning， 2015， 40（6）：11-16.

[8]顾丽.Forstat软件在《测树学》实践教学“树干解析”中的应用[J].教育教学论坛，2015，7（33）：231-232.

GU L. Application of Forstat software in the practical teaching of “Forest Mensuration”[J]. Education Teaching Forum， 2015， 7（33）：231-232.

[9]邓成，孙书会.MVVM设计模式的前端应用[J].电脑知识与技术，2019，15（29）：249-250.

DENG C， SUN S H. Front-end application of MVVM design pattern[J]. Computer Knowledge and Technology， 2019， 15（29）：249-250.

[10]王鵬强.基于vue的MVVM框架的研究与分析[J].电脑知识与技术，2019，15（11）：97-98.

WANG P Q. Research and analysis of MVVM framework based on vue[J]. Computer Knowledge and Technology， 2019， 15（11）：97-98.

[11]周兴元.测树技术[M].北京：中国农业出版社，2010.

ZHOU X Y. The technology of forest mensuration[M]. Beijing： China Agriculture Press， 2010.

[12]孟宪宇.测树学[M].3版.北京：中国林业出版社，2006.

MENG X Y. Forest mensuration[M]. 3rd ed. Beijing： China Forestry Publishing House， 2006.