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

周小军：学士毕业于大连理工大学计算机软件专业，现任中国石油化工股份有限公司长岭分公司信息技术中心软件工程师，从事软件设计、网站开发工作，所开发应用系统多次获得分公司科技进步奖。