MVC架構下瀏覽器移動應用開發探討

周小軍

（中國石油化工股份有限公司長嶺分公司，湖南 岳陽 414012）

MVC架構下瀏覽器移動應用開發探討

周小軍

（中國石油化工股份有限公司長嶺分公司，湖南 岳陽 414012）

為了給基礎設施管理系統增加移動功能，對MVC架構下瀏覽器移動應用的開發進行了探討。介紹了MVC體系結構和瀏覽器移動應用的原理，舉例說明了模型、控制器、視圖的設計和實現，顯示了運行效果，總結了開發方法，描述了應用場景，實踐后證明方案可行。

WebForm MVC 實體框架 jquery mobile 單一職責原則 狀態機 業務規則

1 引言

基礎設施管理系統是基于WebForm[1]構建的、使用事件驅動編程的應用網站，它集設備信息錄入、維護、審批、結算為一體，監控設備維護、更新、采購，保證了信息設備管理目標的實現。

眾所周知，計算架構模式正經歷著從瀏覽器/服務器模式，到移動/無線/云模式的演變，移動技術成為其中重要的組成部分。移動帶來巨大的商機，促進、改善了B2E、B2C等商業模式。移動應用為用戶帶來的價值體現在：實時信息收集、業務流程加速、信息價值放大[2]。

為了加速設施管理系統的維護、審批等流程，需要給系統增加移動功能。當前移動應用分為原生應用、基于瀏覽器的應用以及混合應用。基于瀏覽器的應用使用終端內置瀏覽器訪問系統網站，用戶無需安裝應用，應用開發成本低，維護方便，較具有競爭優勢。

本文從系統架構開始，到重構業務功能實現，探討為基礎設施管理系統增添基于瀏覽器的移動功能的過程。

2 系統架構

MVC[3]（Model View Controller，模型-視圖-控制器）是一種軟件體系結構，它把業務數據、顯示界面的實現代碼分離，以控制器作為體系的核心，確保模型和視圖的同步。這種結構具有重用性高、耦合性低、可維護性高等優點，能極大減少開發時間，是大型應用開發的首選。對比于WebForm，MVC在視圖狀態管理、頁面生命周期、可測試性等方面有更強大的能力。

新增移動功能使用ASP.NET MVC 4項目下的移動應用程序模板開發。具體地，系統將基于視圖構建網頁，使用控制器驅動編程實現。

3 系統功能

由于設施管理系統功能很多，本文將以維護人員“申報PC機維護單”作為例子，闡述開發“申報PC機維護單”移動功能時要面對和解決的問題，最后進行方法上的歸納總結。

“申報PC機維護單”功能如下：維護人員根據PC機屬性選擇要維護的PC機，然后選擇維護項目，最后填寫維護說明、創建維護單。

4 設計與實現

4.1 關系映射

原系統功能通過菜單表的Url字段（如表1所示）進行訪問，它是HTTP鏈接，表示請求服務器上的Web文件，文件包含業務功能頁面。在MVC下，用戶訪問請求也是HTTP鏈接，但被映射成控制器下的Action方法調用。

為了確保用戶訪問業務功能的一致性，移動系統需要建立與原系統功能訪問鏈接間的對應關系，為此，菜單表保留Url字段，新增Ctrl字段，來表示在移動系統中對應的根控制器名稱。

表1 菜單表

4.2 模型設計

系統采用Database-First模型工作流程，使用實體框架[4]將數據庫表轉換成模型，圖1是PC機模型和PC機維護單模型：

圖1 PC機及維護單模型類

4.3 控制器設計

（1）根控制器

根控制器功能由多個實體子控制器實現，它按照所需的數據，依次調用子控制器的Action方式。“申報PC機維護單”功能對應repair_pc根控制器（如圖2所示），它調用PC子控制器的Search方式（圖3左）、PCItems子控制器的Create方式、PC_Paper子控制器的Create方式，圖2藍色下劃線表示子控制器方式參數：

圖2 申報PC機維護單控制器類

其中，RedirectToAction方法帶有3個參數，從左到右依次：actionName表示另一個控制器方式名，controllerName表示另一個控制器名，routeValues表示傳遞到另一個控制器方式的路由值，它是名/值對列表。通過這些參數，可以調用應用中其它的控制器方式，從而實現業務功能控制的流轉。為了返回原控制器方式，可以將原控制器和方式作為routeValues參數，供調用返回，圖2綠色下劃線表示返回到的控制器方式參數。

（2）實體控制器

實體控制器是對象模型，它的數據存于數據庫表，它對應的控制器負責數據的創建、查詢、更新、刪除，在需求分析階段實體已被識別。

利用PC子控制器的Search方式（圖3左），獲取視圖顯示需要的數據：從PC實體模型（圖1左）對應的數據表查詢所屬單位ejdws、操作系統czxts（圖3右），然后生成PC機選擇視圖pcSch。

圖3 PC子控制器和數據存取

4.4 視圖設計

MVC模式中，每個實體控制器的每種方式都會產生一個視圖。由于移動終端種類繁多，屏幕較小，設計界面時，應盡量減少界面元素數量和用戶輸入次數。移動應用程序模板默認自帶的jquery mobile[5]庫顯示視圖，jquery mobile是成熟、全面的前端框架，提供豐富的類似手機APP的組件，其官網上提供在線設計界面方案的功能，可以通過下載配置到自己的網站。

利用PC控制器的Search方式生成視圖：通過SelectList將所屬單位、操作系統綁定到下拉列表（圖4綠色下劃線）。其中，data-role屬性表明了界面元素的作用，如列表、字段組等，此外，其它data-*屬性可以用來設置theme方案、顏色、字體等樣式表風格。

圖4 選擇PC機視圖代碼

5 運行效果

根據功能設計，“申報PC機維護單”控制器將調用3個子實體控制器方式，會產生3個視圖界面（如圖5所示）。PC子控制器Search方式（圖3左）產生圖5中最左圖的效果，圖4是視圖代碼。

圖5 選擇PC機/選擇維護項目/創建維護單視圖

6 方法總結

在需求分析階段必須進行的任務有：

（1）遵循單一職責原則[6]，將業務流程從用戶視角進行功能分解，弄清流程轉化的前件。

（2）對用戶或功能使用者按照角色劃分，建立用戶與所使用功能的對應關系。

（3）識別完成功能所需要的實體，分析實體狀態轉換，生成狀態機視圖。歸集多個相關實體的狀態集合，提煉出業務規則[7]。例如：如果維護單超過限定金額，并且審批通過，那么維護人員不能刪除維護單，也不能新增費用。

在MVC開發實現階段，總結經驗如下：

（1）在大規模系統中，查詢功能是最復雜的。查詢視圖要按照角色分別設計，因為不同角色對同一實體關注的方面不同，查詢條件也就不一樣了。例如：對于維護單，維護人員關心的是用戶和設備信息，而審批人員則關心維護費用的控制，所以要將信息按角色分組形成視圖，便于用戶使用，圖5左圖顯示有一般視圖和用戶視圖，由圖可見，系統用戶能很快找到自己需要設置信息的地方在哪里。

（2）業務規則的滿足與否決定了業務流程的走向，從而能夠動態選擇控制器的執行。控制器可以作為變量，進而更加靈活地驅動流程切換。將圖2中ResultUser方法展開，會看到業務規則代碼（圖6藍色下劃線）：如果PC機有對應用戶，系統啟用“繼續”按鈕（圖8左圖）；反之，系統提示“無責任人，不能創建維護單”，禁用“繼續”按鈕，流程終止，因為在后續流程中，維護單需要用戶確認。

圖6 業務規則驅動控制器選擇

7 應用場景

通過將原系統適配到移動系統，業務工作流按照角色展開。維護人員收到單位維護需求后，到現場進行維護作業，由于單位位置的分布性，維護人員每天要輾轉多處。通過使用移動設備，運維人員可在現場隨時登錄系統錄入相關數據，使數據得到迅速響應，提高精準度。維護人員不用像過去需要回辦公室后才能進行數據錄入，提高了工作效率，進而提升了整個業務工作流程的執行效率。圖7是維護人員查詢和錄入費用截圖：

圖7 基礎設施管理系統查詢和錄入費用界面

維護單審批包括時效審批和費用審批，分多層流轉，包括設備使用人、單位信息員、單位領導和科開處人員，通過移動管理系統，這些審批人即使出差在外地，也可以通過企業VPN，進入內部網絡，登錄系統進行審批工作。同時，系統對于超時或超標、超限費用的情況能夠進行及時提醒（如圖8所示），從而使工作流程向前推進，幫助企業節省時間和控制費用。

圖8 基礎設施管理系統費用超標、超限提醒

8 結束語

通過實踐表明，采用MVC體系架構，新增基于瀏覽器的移動應用功能是可行的。不但可以保證原有功能的一致性，并且可以根據業務流程，將功能分解成實體間的協同工作，能夠重復利用實體的各項功能，符合軟件工程學代碼復用的思想，是一種提升原有系統為移動應用系統的較好方式，有較廣泛的適用范圍。

未來還可以對系統進行功能拓展，將移動終端其他能力納入，例如：短信提醒，維護現場拍照上傳等，跨平臺移動框架（如PhoneGap、Cordova）可提供很好的接口訪問終端硬件功能。

[1] 劉春友,宋雅麗. 基于ASP.NET的WebForm與MVC開發模式的共用性研究[J]. 電腦編程技巧與維護, 2012(10)：46-47.

[2] 移動信息化那些事. 企業移動應用的價值在哪兒[EB/OL]. (2014-06-13)[2017-07-15]. http：//cio.zol.com.cn/460/4605730.html.

[3] Nick Harrison. ASP.NET MVC Succinctly[Z]. 2015.

[4] Julia Lerman, Rowan Miller. Programming Entity Framework： Code First[M]. Sebastopol： O’Reilly Media, Inc., 2011.

[5] Matt Doyle. Master Mobile Web Apps with jQuery Mobile[M]. Robertson： Elated Communications, 2014.

[6] 模式和實踐團隊. 微軟應用架構指南[M]. 朱曄,高翔,王敏,譯. 2版. 北京： 電子工業出版社, 2010.

[7] Cesar de la Torre, Unai Zorrilla, Miguel A Ramos, et al.N-Layered Domain-Oriented Architecture Guide with.NET 4.0[M]. Krasis Consulting, 2011. ★

Discussion on Mobile Application Development Based on Browser under MVC Architecture

ZHOU Xiaojun
(China Petroleum & Chemical Corp., Changling Branch, Yueyang 414012, China)

In order to add mobile functions to the management system of infrastructure, the development of mobile applications based on the browser under MVC architecture was discussed. The MVC system structure and the principles of mobile applications based on browser were introduced. The design and the implementation of the model, controller and view were illustrated. The run results were displayed, the developing method was summarized and the application scenario was depicted. The practice veri fi ed the feasibility of the solution.

WebForm MVC entity framework jquery mobile SRP state machine business rule

10.3969/j.issn.1006-1010.2017.17.011

TN929.5

A

1006-1010(2017)17-0055-05

周小軍. MVC架構下瀏覽器移動應用開發探討[J]. 移動通信, 2017,41(17)： 55-59.

2017-08-01

責任編輯：文竹 liuwenzhu@mbcom.cn

周小軍：學士畢業于大連理工大學計算機軟件專業，現任中國石油化工股份有限公司長嶺分公司信息技術中心軟件工程師，從事軟件設計、網站開發工作，所開發應用系統多次獲得分公司科技進步獎。