基于ASP.NET Core 和Vue 的地质资料共享系统的设计与实现

李成武LI Cheng-wu；夏同云XIA Tong-yun

（①江苏省有色金属华东地质勘查局地质信息中心，南京210006）

（②上海曙曜泵业有限公司，上海200120）

0 引言

在互联网技术飞速发展的今天，各行各业都进行了不同程度的信息共享基础建设，与其他行业相比，地质行业的信息互联共享水平相对较低。

地质资料是地质工作形成的重要基础信息资源，现如今的地质资料均存放在国家、省、市等各级别的地质资料档案馆中，这些资料档案馆大多数只建设了单机或是局域网内的档案资料管理系统，在这样的背景下进行地质资料共享信息化建设具有巨大的现实意义。

本文综合考虑上述的地质资料档案馆资料管理现状和地质资料的特征背景，选用 ASP.NET Core 框架研发应用程序接口（WebAPI） 做服务端应用，选用 Vue +ElementUI 搭建用户交互界面的前端应用，结合华东地区某地市地质资料馆收藏的地质资料的现状，设计并实现地质资料共享管理系统。目前，该系统已在该市的地质资料馆上线运用，实现了对其馆藏资料的在线共享，提升了场馆的服务水平，收获了一定的社会效益。

1 ASP.NET Core WebAPI 介绍

.NET Core 是一个开源、跨平台、模块化的开发框架，它是由.NET 基金会牵头维护，在开发者社区被广泛支持并参与研发的框架。.NET Core 可以跨平台地运行在Windows、MacOS 和 Linux 操作系统上。

.Net Core 可以用来开发各种不同的应用程序，例如：移动端、桌面端、网页、云计算、物联网、机器学习、微服务、游戏等。

ASP.NET Core 是 .NET Core 生态系统的核心组件，它内置依赖注入（DI）的软件设计实现模式，这是一种在类及其依赖项之间实现控制反转（IoC）的技术，这让它能适应多种应用场景需求，提升服务应用程序开发效率和程序的健壮性。

ASP.NET Core 采用C# 语言编写功能业务，基于MVC 架构开发网页应用，这使得它具有统一的生成Web UI 和 Web API 的开发逻辑。其中的WebAPI 支持REST架构风格，便于前端界面、后台服务的功能在不同团队独立研发，实现研发团队的前后端分离。

ASP.NET Core 开发的程序能够运行在 IIS、Nginx、Apache 等主流网页服务器上，程序也支持Docker 方式部署。

2 Vue 和 ElementUI 框架介绍

MVVM 中的Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开，在本系统的是指服务器端的对象模型。

View 是指视图，也就是用户界面。网页前端主要由HTML 和 CSS 来构建，Vue 框架设计了相应的内置模板语言来渲染用户界面，将开发者从处理组织用户界面的HTML 和CSS 代码的繁琐工作中解放出来。

ViewModel 是由前端开发人员组织生成和维护的视图数据层。前端开发者对从后端获取的Model 数据进行转换处理，做二次封装，以生成符合View 层使用预期的视图数据模型。前端开发的工作主要是封装处理ViewModel ，以达到最终显示效果。（图1）

图1 Vue 采用的MVVM 设计模式

如今，Vue 已经形成了优良的技术生态系统，在其核心功能之外，开发者可以在生态系统中选用各种类型的插件用于需求的实现，选择使用现有的插件能大幅度地提升信息系统的开发效率。

ElementUI 是一套基于Vue 实现的不依赖业务的用户界面网页组件库，它提供了丰富的网页组件，减少用户对常用网页组件的封装工作量。

ElementUI 也是代码完全公开的开源用户界面组件库，开发者可以在现有的组件基础上进行二次封装，降低开发者开发用户界面逻辑复杂度的同时也提升了用户界面的构建速度。

3 系统架构与设计实现

华东地区某市的地质资料馆现藏有地质资料约30000 余档，这些资料在类别逻辑上可以分为基础地质资料、工程地质资料、矿产勘查地质资料和水文地质资料等。在信息系统管理逻辑上可以分为地质报告案卷，专业成果图件，专业数据表三大类，在该资料馆的资料管理工作中，成果图件和数据表均是作为“附件”形式挂接在资料案卷详情中。

基于该馆的资料管理模式下的地质资料共享系统的设计时，将地质资料全部抽象为“案卷资料”这个管理对象进行管理，具体信息在该案卷对象的详情中展示，因此，在实现案卷资料这个管理对象的在线共享的同时也就实现了该地质资料馆地质资料的在线共享。

3.1 总体架构

系统的功能实现方面采用前后端分离的方式进行设计，后端（服务器端口）根据业务功能利用 ASP.NET Core Web API 框架开发统一的功能接口，前端根据具体业务应用，利用Vue+ElementUI 设计界面组件，通过Vue 的路由插件组织链接前端功能。

系统的底层数据采用云端虚拟化技术进行数据存储的管理，管理系统在数据存储基础实施之上进行设计与实现，在专业存储地质资料数据库的平级管理层中，并行存放平台网站的业务逻辑数据库和非结构化文件的存储空间，系统架构设计过程中贯穿系统安全保障配置，整个架构设计如图2 所示。

图2 系统功能架构图

3.2 后台数据库

本系统数据库选用SQL Server 2014，利用轻量化、可扩展、开源和跨平台版的Entity Framework Core 框架作为对象关系映射程序（ORM）与程序代码对接。

本系统采用Entity Framework Core 中的 Code First 方法进行数据库开发设计，它可以，使.NET 开发人员能够使用.NET 对象处理数据库，在代码中进行数据库的管理，减少开发人员直接对数据库进行配置的工作量。

数据库的具体的实现方式是对要管理的对象模型定义成一个Class，然后通过 Entity Framework Core 框架自带的映射功能，系统在数据库中生成对应的数据表。

在本系统中，数据库对象可以抽象成案卷资料（document）、图件信息（Picture）、表格资料（Table）三个大类对象模型，其中案卷资料是一级管理对象，图件信息和表格资料作为二级管理对象，通过外键挂接在案卷资料数据表中。通过定义相应的抽象对象模型的属性字段，Entity Framework Core 框架会在配置好的数据库中自动生成用于存储管理对象信息的数据表。

3.3 后台应用接口

系统的后台应用接口利用 ASP.Net Core WebAPI 的Controller（控制器）来实现。在WebAPI 框架中，系统可以针对一个模型类自动生成标准操作的控制器类，控制器提供新建对象、获取对象、编辑对象、删除对象的操作接口，针对纳入系统管理的每一个模型对象分别创建一个控制器即可实现后台应用的接口设计。

结合该地质资料馆地质资料在线共享的需求，在设计和开发数据服务应用接口过程中，使Swagger 对接口进行集中管理，它能够生成、描述、调用和可视化 RESTful 风格的 Web 接口服务，如图3 所示。

图3 后台接口的设计

在系统功能的研发过程中，设计并实现了下列7 个方面的功能接口供前端调用。

①资料列表接口。

该接口提供资料列表信息，用于前端资料列表页面的展示，接口支持返回序号和资料名称的资料全量的读取，也支持设定每页数量和页码的分页列表读取，接口的响应数据以json 列表的形式返回。

②资料详情接口。

该接口提供通过案卷ID 号返回资料全部详情信息的功能，输入参数为案卷ID 号，可以通过列表中的案卷号调用，也可以用于检索中的详情展示，接口相应数据是用json 对象的形式返回，用于对接前端的资料详情组件。

③资料编辑接口。

该接口提供资料的详情编辑功能，只向有资料录入权限的管理账户开放，若输入参数为空值，则进行案卷资料的新建入库，如果在请求中附带有案卷ID 号，则进行已有案卷的编辑功能，接口返回新建（编辑）操作成功与否的状态信息。

④资料检索接口。

该接口提供资料的检索过滤功能，通过接收分析前端请求中提交搜索参数返回相应的检索结果，检索条件支持资料类别、形成时间和行政区划的快速过滤，也支持精确的案卷ID 号或资料名称的精确查找，接口返回的是符合检索条件的资料列表。

⑤统计分析接口。

该接口提供根据前端请求中的参数进行不同维度的资料统计分析功能，包括基于年度的历年资料数量统计、基于类别的分类统计和基于不同行政区划的数量统计，接口返回的是符合前端绘制统计图表格式的json 数据。

⑥用户角色接口。

该接口是对系统用户和角色进行权限维护的入口，超级管理员在设置了管理角色的权限后，不同的用户才拥有访问相应接口的权限，接口返回的是用户、角色权限配置操作成功与否的状态信息。

⑦系统日志口。

该接口将系统后台记录的日志返回给请求方，仅向系统维护管理用户开放，协助维护人员对系统运行状况进行分析和研判，接口返回的是日志对象的json 列表。

3.4 前端用户界面

本系统的前端用户交互界面通过Vue+ElementUI 框架来实现。

根据业务需求，系统设计了注册登录、数据录入，批量导入、资料检索、资料详情、文件下载、统计分析、用户角色和日志记录等功能模块。根据Vue 的开发理念，每一个功能模块均抽象成一个Vue 组件，再通过Vue 的路由插件（Router.js）组织跳转。功能结构图如图4 所示。

图4 前端功能设计

①注册登录。

用于新用户的注册和现有用户的登录组件，是系统的入口界面，同时注册登录的组件中预留扩展接口，用于对接第三方用户管理体系。

②数据录入。

用于系统资料维护人员单个录入资料信息的表单界面，在这个表单中，维护人员需要逐个录入资料的题名、类别、形成时间、编写人员、编写单位等信息，用于少量资料的入库。

③批量导入。

用于大批量的资料入库操作，一般用于系统上线初期存量数据的导入，该功能需要将存量数据整理至系统能读取的标准格式。

④资料检索。

用户在该界面中通过资料类别、形成年份和隶属行政区信息对入库的资料进行快速过滤查找，如果知道具体资料的题名或是档号，也可以在文本输入框中输入详细信息进行检索。只要是拥有检索权限的用户均可以进行该操作，这是资料“共享”的核心功能。

⑤查看详情。

用户在检索界面中查询到需要查看的资料后点击查看详情，页面路由跳转到查看详情的页面，在这个页面中用户可以看到资料的全部元数据信息以及挂接的电子文件列表。

⑥文件下载。

用户在详情页面可以看到资料元数据以挂接的电子文件列表，在电子文件列表中，拥有权限的用户可以点击相应的文件进行下载。

⑦统计分析。

系统维护管理人员可以在这个界面中通过设定一定的统计参数对系统进行不同维度的统计分析，如按年度统计形成资料的数量，按类别统计资料的数量，按照行政区划统计资料数量等，相应的统计图表支持保存到本地。

⑧用户角色。

系统的超级管理员可以在这个界面中对系统中的角色进行维护，不同的角色拥有不同层级的资料操作权限，在用户层面上赋予不同的角色，实现对用户权限的控制。

⑨日志记录。

系统管理人员可以在日志记录界面查看系统的运行日志，便于进行性能分析、错误排查等。日志记录组件设计为支持通过操作类型、日志级别和时间范围等维度的过滤查询。

上述9 种用户交互页面组件与后台放出的WebAPI统一通过Axios 来实现基于HTTP 协议的数据传输。其中涉及使用的Axios 是一个基于promise 的JavaScript 环境的网络请求库，它将前端界面的参数通过HTTP 请求发送到后端接口，并根据后端接口的响应内容输出后台处理好的数据，Vue 框架则根据数据实时更新渲染用户界面。

在具体项目中设计并实现的资料在线共享系统的资料检索前端界面如图5 所示，用户可以在分类中点击过滤，也可以在输入框中输入具体文本进行精确检索。

图5 资料检索前端界面

4 结论与展望

本文在信息系统建设的层面设计实现了一种符合当前的互联共享理念下的地质资料共享系统，并在华东某地级市的地质资料馆进行了推广试用，取得了一定程度的社会效益。

总而言之，在地质档案资料场馆之间进行互联共享的信息化系统建设能有效地整合现有分散异构的地质应用系统和数据资源，打通数据流通壁垒，提升自然资源政务管理水平和决策能力，更大程度地发挥地质资料的价值。