基于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 結論與展望

本文在信息系統建設的層面設計實現了一種符合當前的互聯共享理念下的地質資料共享系統，并在華東某地級市的地質資料館進行了推廣試用，取得了一定程度的社會效益。

總而言之，在地質檔案資料場館之間進行互聯共享的信息化系統建設能有效地整合現有分散異構的地質應用系統和數據資源，打通數據流通壁壘，提升自然資源政務管理水平和決策能力，更大程度地發揮地質資料的價值。