基于ASP.NET Core 和Vue 的地質(zhì)資料共享系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

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

（①江蘇省有色金屬華東地質(zhì)勘查局地質(zhì)信息中心，南京210006）

（②上海曙曜泵業(yè)有限公司，上海200120）

0 引言

在互聯(lián)網(wǎng)技術(shù)飛速發(fā)展的今天，各行各業(yè)都進(jìn)行了不同程度的信息共享基礎(chǔ)建設(shè)，與其他行業(yè)相比，地質(zhì)行業(yè)的信息互聯(lián)共享水平相對(duì)較低。

地質(zhì)資料是地質(zhì)工作形成的重要基礎(chǔ)信息資源，現(xiàn)如今的地質(zhì)資料均存放在國(guó)家、省、市等各級(jí)別的地質(zhì)資料檔案館中，這些資料檔案館大多數(shù)只建設(shè)了單機(jī)或是局域網(wǎng)內(nèi)的檔案資料管理系統(tǒng)，在這樣的背景下進(jìn)行地質(zhì)資料共享信息化建設(shè)具有巨大的現(xiàn)實(shí)意義。

本文綜合考慮上述的地質(zhì)資料檔案館資料管理現(xiàn)狀和地質(zhì)資料的特征背景，選用 ASP.NET Core 框架研發(fā)應(yīng)用程序接口（WebAPI） 做服務(wù)端應(yīng)用，選用 Vue +ElementUI 搭建用戶交互界面的前端應(yīng)用，結(jié)合華東地區(qū)某地市地質(zhì)資料館收藏的地質(zhì)資料的現(xiàn)狀，設(shè)計(jì)并實(shí)現(xiàn)地質(zhì)資料共享管理系統(tǒng)。目前，該系統(tǒng)已在該市的地質(zhì)資料館上線運(yùn)用，實(shí)現(xiàn)了對(duì)其館藏資料的在線共享，提升了場(chǎng)館的服務(wù)水平，收獲了一定的社會(huì)效益。

1 ASP.NET Core WebAPI 介紹

.NET Core 是一個(gè)開(kāi)源、跨平臺(tái)、模塊化的開(kāi)發(fā)框架，它是由.NET 基金會(huì)牽頭維護(hù)，在開(kāi)發(fā)者社區(qū)被廣泛支持并參與研發(fā)的框架。.NET Core 可以跨平臺(tái)地運(yùn)行在Windows、MacOS 和 Linux 操作系統(tǒng)上。

.Net Core 可以用來(lái)開(kāi)發(fā)各種不同的應(yīng)用程序，例如：移動(dòng)端、桌面端、網(wǎng)頁(yè)、云計(jì)算、物聯(lián)網(wǎng)、機(jī)器學(xué)習(xí)、微服務(wù)、游戲等。

ASP.NET Core 是 .NET Core 生態(tài)系統(tǒng)的核心組件，它內(nèi)置依賴注入（DI）的軟件設(shè)計(jì)實(shí)現(xiàn)模式，這是一種在類及其依賴項(xiàng)之間實(shí)現(xiàn)控制反轉(zhuǎn)（IoC）的技術(shù)，這讓它能適應(yīng)多種應(yīng)用場(chǎng)景需求，提升服務(wù)應(yīng)用程序開(kāi)發(fā)效率和程序的健壯性。

ASP.NET Core 采用C# 語(yǔ)言編寫(xiě)功能業(yè)務(wù)，基于MVC 架構(gòu)開(kāi)發(fā)網(wǎng)頁(yè)應(yīng)用，這使得它具有統(tǒng)一的生成Web UI 和 Web API 的開(kāi)發(fā)邏輯。其中的WebAPI 支持REST架構(gòu)風(fēng)格，便于前端界面、后臺(tái)服務(wù)的功能在不同團(tuán)隊(duì)獨(dú)立研發(fā)，實(shí)現(xiàn)研發(fā)團(tuán)隊(duì)的前后端分離。

ASP.NET Core 開(kāi)發(fā)的程序能夠運(yùn)行在 IIS、Nginx、Apache 等主流網(wǎng)頁(yè)服務(wù)器上，程序也支持Docker 方式部署。

2 Vue 和 ElementUI 框架介紹

MVVM 中的Model 是指數(shù)據(jù)模型，泛指后端進(jìn)行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控，主要圍繞數(shù)據(jù)庫(kù)系統(tǒng)展開(kāi)，在本系統(tǒng)的是指服務(wù)器端的對(duì)象模型。

View 是指視圖，也就是用戶界面。網(wǎng)頁(yè)前端主要由HTML 和 CSS 來(lái)構(gòu)建，Vue 框架設(shè)計(jì)了相應(yīng)的內(nèi)置模板語(yǔ)言來(lái)渲染用戶界面，將開(kāi)發(fā)者從處理組織用戶界面的HTML 和CSS 代碼的繁瑣工作中解放出來(lái)。

ViewModel 是由前端開(kāi)發(fā)人員組織生成和維護(hù)的視圖數(shù)據(jù)層。前端開(kāi)發(fā)者對(duì)從后端獲取的Model 數(shù)據(jù)進(jìn)行轉(zhuǎn)換處理，做二次封裝，以生成符合View 層使用預(yù)期的視圖數(shù)據(jù)模型。前端開(kāi)發(fā)的工作主要是封裝處理ViewModel ，以達(dá)到最終顯示效果。（圖1）

圖1 Vue 采用的MVVM 設(shè)計(jì)模式

如今，Vue 已經(jīng)形成了優(yōu)良的技術(shù)生態(tài)系統(tǒng)，在其核心功能之外，開(kāi)發(fā)者可以在生態(tài)系統(tǒng)中選用各種類型的插件用于需求的實(shí)現(xiàn)，選擇使用現(xiàn)有的插件能大幅度地提升信息系統(tǒng)的開(kāi)發(fā)效率。

ElementUI 是一套基于Vue 實(shí)現(xiàn)的不依賴業(yè)務(wù)的用戶界面網(wǎng)頁(yè)組件庫(kù)，它提供了豐富的網(wǎng)頁(yè)組件，減少用戶對(duì)常用網(wǎng)頁(yè)組件的封裝工作量。

ElementUI 也是代碼完全公開(kāi)的開(kāi)源用戶界面組件庫(kù)，開(kāi)發(fā)者可以在現(xiàn)有的組件基礎(chǔ)上進(jìn)行二次封裝，降低開(kāi)發(fā)者開(kāi)發(fā)用戶界面邏輯復(fù)雜度的同時(shí)也提升了用戶界面的構(gòu)建速度。

3 系統(tǒng)架構(gòu)與設(shè)計(jì)實(shí)現(xiàn)

華東地區(qū)某市的地質(zhì)資料館現(xiàn)藏有地質(zhì)資料約30000 余檔，這些資料在類別邏輯上可以分為基礎(chǔ)地質(zhì)資料、工程地質(zhì)資料、礦產(chǎn)勘查地質(zhì)資料和水文地質(zhì)資料等。在信息系統(tǒng)管理邏輯上可以分為地質(zhì)報(bào)告案卷，專業(yè)成果圖件，專業(yè)數(shù)據(jù)表三大類，在該資料館的資料管理工作中，成果圖件和數(shù)據(jù)表均是作為“附件”形式掛接在資料案卷詳情中。

基于該館的資料管理模式下的地質(zhì)資料共享系統(tǒng)的設(shè)計(jì)時(shí)，將地質(zhì)資料全部抽象為“案卷資料”這個(gè)管理對(duì)象進(jìn)行管理，具體信息在該案卷對(duì)象的詳情中展示，因此，在實(shí)現(xiàn)案卷資料這個(gè)管理對(duì)象的在線共享的同時(shí)也就實(shí)現(xiàn)了該地質(zhì)資料館地質(zhì)資料的在線共享。

3.1 總體架構(gòu)

系統(tǒng)的功能實(shí)現(xiàn)方面采用前后端分離的方式進(jìn)行設(shè)計(jì)，后端（服務(wù)器端口）根據(jù)業(yè)務(wù)功能利用 ASP.NET Core Web API 框架開(kāi)發(fā)統(tǒng)一的功能接口，前端根據(jù)具體業(yè)務(wù)應(yīng)用，利用Vue+ElementUI 設(shè)計(jì)界面組件，通過(guò)Vue 的路由插件組織鏈接前端功能。

系統(tǒng)的底層數(shù)據(jù)采用云端虛擬化技術(shù)進(jìn)行數(shù)據(jù)存儲(chǔ)的管理，管理系統(tǒng)在數(shù)據(jù)存儲(chǔ)基礎(chǔ)實(shí)施之上進(jìn)行設(shè)計(jì)與實(shí)現(xiàn)，在專業(yè)存儲(chǔ)地質(zhì)資料數(shù)據(jù)庫(kù)的平級(jí)管理層中，并行存放平臺(tái)網(wǎng)站的業(yè)務(wù)邏輯數(shù)據(jù)庫(kù)和非結(jié)構(gòu)化文件的存儲(chǔ)空間，系統(tǒng)架構(gòu)設(shè)計(jì)過(guò)程中貫穿系統(tǒng)安全保障配置，整個(gè)架構(gòu)設(shè)計(jì)如圖2 所示。

圖2 系統(tǒng)功能架構(gòu)圖

3.2 后臺(tái)數(shù)據(jù)庫(kù)

本系統(tǒng)數(shù)據(jù)庫(kù)選用SQL Server 2014，利用輕量化、可擴(kuò)展、開(kāi)源和跨平臺(tái)版的Entity Framework Core 框架作為對(duì)象關(guān)系映射程序（ORM）與程序代碼對(duì)接。

本系統(tǒng)采用Entity Framework Core 中的 Code First 方法進(jìn)行數(shù)據(jù)庫(kù)開(kāi)發(fā)設(shè)計(jì)，它可以，使.NET 開(kāi)發(fā)人員能夠使用.NET 對(duì)象處理數(shù)據(jù)庫(kù)，在代碼中進(jìn)行數(shù)據(jù)庫(kù)的管理，減少開(kāi)發(fā)人員直接對(duì)數(shù)據(jù)庫(kù)進(jìn)行配置的工作量。

數(shù)據(jù)庫(kù)的具體的實(shí)現(xiàn)方式是對(duì)要管理的對(duì)象模型定義成一個(gè)Class，然后通過(guò) Entity Framework Core 框架自帶的映射功能，系統(tǒng)在數(shù)據(jù)庫(kù)中生成對(duì)應(yīng)的數(shù)據(jù)表。

在本系統(tǒng)中，數(shù)據(jù)庫(kù)對(duì)象可以抽象成案卷資料（document）、圖件信息（Picture）、表格資料（Table）三個(gè)大類對(duì)象模型，其中案卷資料是一級(jí)管理對(duì)象，圖件信息和表格資料作為二級(jí)管理對(duì)象，通過(guò)外鍵掛接在案卷資料數(shù)據(jù)表中。通過(guò)定義相應(yīng)的抽象對(duì)象模型的屬性字段，Entity Framework Core 框架會(huì)在配置好的數(shù)據(jù)庫(kù)中自動(dòng)生成用于存儲(chǔ)管理對(duì)象信息的數(shù)據(jù)表。

3.3 后臺(tái)應(yīng)用接口

系統(tǒng)的后臺(tái)應(yīng)用接口利用 ASP.Net Core WebAPI 的Controller（控制器）來(lái)實(shí)現(xiàn)。在WebAPI 框架中，系統(tǒng)可以針對(duì)一個(gè)模型類自動(dòng)生成標(biāo)準(zhǔn)操作的控制器類，控制器提供新建對(duì)象、獲取對(duì)象、編輯對(duì)象、刪除對(duì)象的操作接口，針對(duì)納入系統(tǒng)管理的每一個(gè)模型對(duì)象分別創(chuàng)建一個(gè)控制器即可實(shí)現(xiàn)后臺(tái)應(yīng)用的接口設(shè)計(jì)。

結(jié)合該地質(zhì)資料館地質(zhì)資料在線共享的需求，在設(shè)計(jì)和開(kāi)發(fā)數(shù)據(jù)服務(wù)應(yīng)用接口過(guò)程中，使Swagger 對(duì)接口進(jìn)行集中管理，它能夠生成、描述、調(diào)用和可視化 RESTful 風(fēng)格的 Web 接口服務(wù)，如圖3 所示。

圖3 后臺(tái)接口的設(shè)計(jì)

在系統(tǒng)功能的研發(fā)過(guò)程中，設(shè)計(jì)并實(shí)現(xiàn)了下列7 個(gè)方面的功能接口供前端調(diào)用。

①資料列表接口。

該接口提供資料列表信息，用于前端資料列表頁(yè)面的展示，接口支持返回序號(hào)和資料名稱的資料全量的讀取，也支持設(shè)定每頁(yè)數(shù)量和頁(yè)碼的分頁(yè)列表讀取，接口的響應(yīng)數(shù)據(jù)以json 列表的形式返回。

②資料詳情接口。

該接口提供通過(guò)案卷ID 號(hào)返回資料全部詳情信息的功能，輸入?yún)?shù)為案卷ID 號(hào)，可以通過(guò)列表中的案卷號(hào)調(diào)用，也可以用于檢索中的詳情展示，接口相應(yīng)數(shù)據(jù)是用json 對(duì)象的形式返回，用于對(duì)接前端的資料詳情組件。

③資料編輯接口。

該接口提供資料的詳情編輯功能，只向有資料錄入權(quán)限的管理賬戶開(kāi)放，若輸入?yún)?shù)為空值，則進(jìn)行案卷資料的新建入庫(kù)，如果在請(qǐng)求中附帶有案卷ID 號(hào)，則進(jìn)行已有案卷的編輯功能，接口返回新建（編輯）操作成功與否的狀態(tài)信息。

④資料檢索接口。

該接口提供資料的檢索過(guò)濾功能，通過(guò)接收分析前端請(qǐng)求中提交搜索參數(shù)返回相應(yīng)的檢索結(jié)果，檢索條件支持資料類別、形成時(shí)間和行政區(qū)劃的快速過(guò)濾，也支持精確的案卷ID 號(hào)或資料名稱的精確查找，接口返回的是符合檢索條件的資料列表。

⑤統(tǒng)計(jì)分析接口。

該接口提供根據(jù)前端請(qǐng)求中的參數(shù)進(jìn)行不同維度的資料統(tǒng)計(jì)分析功能，包括基于年度的歷年資料數(shù)量統(tǒng)計(jì)、基于類別的分類統(tǒng)計(jì)和基于不同行政區(qū)劃的數(shù)量統(tǒng)計(jì)，接口返回的是符合前端繪制統(tǒng)計(jì)圖表格式的json 數(shù)據(jù)。

⑥用戶角色接口。

該接口是對(duì)系統(tǒng)用戶和角色進(jìn)行權(quán)限維護(hù)的入口，超級(jí)管理員在設(shè)置了管理角色的權(quán)限后，不同的用戶才擁有訪問(wèn)相應(yīng)接口的權(quán)限，接口返回的是用戶、角色權(quán)限配置操作成功與否的狀態(tài)信息。

⑦系統(tǒng)日志口。

該接口將系統(tǒng)后臺(tái)記錄的日志返回給請(qǐng)求方，僅向系統(tǒng)維護(hù)管理用戶開(kāi)放，協(xié)助維護(hù)人員對(duì)系統(tǒng)運(yùn)行狀況進(jìn)行分析和研判，接口返回的是日志對(duì)象的json 列表。

3.4 前端用戶界面

本系統(tǒng)的前端用戶交互界面通過(guò)Vue+ElementUI 框架來(lái)實(shí)現(xiàn)。

根據(jù)業(yè)務(wù)需求，系統(tǒng)設(shè)計(jì)了注冊(cè)登錄、數(shù)據(jù)錄入，批量導(dǎo)入、資料檢索、資料詳情、文件下載、統(tǒng)計(jì)分析、用戶角色和日志記錄等功能模塊。根據(jù)Vue 的開(kāi)發(fā)理念，每一個(gè)功能模塊均抽象成一個(gè)Vue 組件，再通過(guò)Vue 的路由插件（Router.js）組織跳轉(zhuǎn)。功能結(jié)構(gòu)圖如圖4 所示。

圖4 前端功能設(shè)計(jì)

①注冊(cè)登錄。

用于新用戶的注冊(cè)和現(xiàn)有用戶的登錄組件，是系統(tǒng)的入口界面，同時(shí)注冊(cè)登錄的組件中預(yù)留擴(kuò)展接口，用于對(duì)接第三方用戶管理體系。

②數(shù)據(jù)錄入。

用于系統(tǒng)資料維護(hù)人員單個(gè)錄入資料信息的表單界面，在這個(gè)表單中，維護(hù)人員需要逐個(gè)錄入資料的題名、類別、形成時(shí)間、編寫(xiě)人員、編寫(xiě)單位等信息，用于少量資料的入庫(kù)。

③批量導(dǎo)入。

用于大批量的資料入庫(kù)操作，一般用于系統(tǒng)上線初期存量數(shù)據(jù)的導(dǎo)入，該功能需要將存量數(shù)據(jù)整理至系統(tǒng)能讀取的標(biāo)準(zhǔn)格式。

④資料檢索。

用戶在該界面中通過(guò)資料類別、形成年份和隸屬行政區(qū)信息對(duì)入庫(kù)的資料進(jìn)行快速過(guò)濾查找，如果知道具體資料的題名或是檔號(hào)，也可以在文本輸入框中輸入詳細(xì)信息進(jìn)行檢索。只要是擁有檢索權(quán)限的用戶均可以進(jìn)行該操作，這是資料“共享”的核心功能。

⑤查看詳情。

用戶在檢索界面中查詢到需要查看的資料后點(diǎn)擊查看詳情，頁(yè)面路由跳轉(zhuǎn)到查看詳情的頁(yè)面，在這個(gè)頁(yè)面中用戶可以看到資料的全部元數(shù)據(jù)信息以及掛接的電子文件列表。

⑥文件下載。

用戶在詳情頁(yè)面可以看到資料元數(shù)據(jù)以掛接的電子文件列表，在電子文件列表中，擁有權(quán)限的用戶可以點(diǎn)擊相應(yīng)的文件進(jìn)行下載。

⑦統(tǒng)計(jì)分析。

系統(tǒng)維護(hù)管理人員可以在這個(gè)界面中通過(guò)設(shè)定一定的統(tǒng)計(jì)參數(shù)對(duì)系統(tǒng)進(jìn)行不同維度的統(tǒng)計(jì)分析，如按年度統(tǒng)計(jì)形成資料的數(shù)量，按類別統(tǒng)計(jì)資料的數(shù)量，按照行政區(qū)劃統(tǒng)計(jì)資料數(shù)量等，相應(yīng)的統(tǒng)計(jì)圖表支持保存到本地。

⑧用戶角色。

系統(tǒng)的超級(jí)管理員可以在這個(gè)界面中對(duì)系統(tǒng)中的角色進(jìn)行維護(hù)，不同的角色擁有不同層級(jí)的資料操作權(quán)限，在用戶層面上賦予不同的角色，實(shí)現(xiàn)對(duì)用戶權(quán)限的控制。

⑨日志記錄。

系統(tǒng)管理人員可以在日志記錄界面查看系統(tǒng)的運(yùn)行日志，便于進(jìn)行性能分析、錯(cuò)誤排查等。日志記錄組件設(shè)計(jì)為支持通過(guò)操作類型、日志級(jí)別和時(shí)間范圍等維度的過(guò)濾查詢。

上述9 種用戶交互頁(yè)面組件與后臺(tái)放出的WebAPI統(tǒng)一通過(guò)Axios 來(lái)實(shí)現(xiàn)基于HTTP 協(xié)議的數(shù)據(jù)傳輸。其中涉及使用的Axios 是一個(gè)基于promise 的JavaScript 環(huán)境的網(wǎng)絡(luò)請(qǐng)求庫(kù)，它將前端界面的參數(shù)通過(guò)HTTP 請(qǐng)求發(fā)送到后端接口，并根據(jù)后端接口的響應(yīng)內(nèi)容輸出后臺(tái)處理好的數(shù)據(jù)，Vue 框架則根據(jù)數(shù)據(jù)實(shí)時(shí)更新渲染用戶界面。

在具體項(xiàng)目中設(shè)計(jì)并實(shí)現(xiàn)的資料在線共享系統(tǒng)的資料檢索前端界面如圖5 所示，用戶可以在分類中點(diǎn)擊過(guò)濾，也可以在輸入框中輸入具體文本進(jìn)行精確檢索。

圖5 資料檢索前端界面

4 結(jié)論與展望

本文在信息系統(tǒng)建設(shè)的層面設(shè)計(jì)實(shí)現(xiàn)了一種符合當(dāng)前的互聯(lián)共享理念下的地質(zhì)資料共享系統(tǒng)，并在華東某地級(jí)市的地質(zhì)資料館進(jìn)行了推廣試用，取得了一定程度的社會(huì)效益。

總而言之，在地質(zhì)檔案資料場(chǎng)館之間進(jìn)行互聯(lián)共享的信息化系統(tǒng)建設(shè)能有效地整合現(xiàn)有分散異構(gòu)的地質(zhì)應(yīng)用系統(tǒng)和數(shù)據(jù)資源，打通數(shù)據(jù)流通壁壘，提升自然資源政務(wù)管理水平和決策能力，更大程度地發(fā)揮地質(zhì)資料的價(jià)值。