摘要：随着Vue等前端框架的应用与推广，前端领域近几年迎来了飞跃的发展[1]。随之出现了越来越多的复杂的、基于WEB技术的应用程序，业内对这种应用统称为“WAP”，与“APP”进行区分。应用市场的"在线协作文档"、"小程序"、"手机QQ"、"百度"等都是“WAP”。开发复杂度明显提高，若仍不考虑设计模式的改良，迭代应用的难度以及后续的维护成本极大概率呈指数上升。

    开发过程会产出大量的可复用的代码，若这些逻辑是能够被抽离出来的，首先这样做节约了应用程序包的占用空间，其次节约了用户带宽，软件启动更快、体验会更好。对开发者来说，不仅能够减少重复代码的书写，更利于阅读与维护。从而节约更多的时间去思考整体的架构，保持应用程序的增量的过程和维护过程呈正比关系。

-“组件化开发模式”能够极大地方便“测试人员”的工作，减少测试人力资源的介入，从而为企业节省成本[2]。以往需要对全部的交互逻辑统一进行详细测试，为有效避免漏洞需对相似的交互列出一整张的“Excel”表格，经历漫长的验收。组件化开发的关键是针对组件进行测试，测试完成即标记为基本可靠，通过在后续生产环境中进行反复的线上验证工作，经历流量，使得组件越来越好。“组件化开发模式”对业务人员的基础要求更低，无需知晓组件的内部细节，浏览学习说明文档使用相应的属性便能介入一款应用程序的开发工作。

-“组件化开发模式”需要一个强大的管理平台辅助开发人员和管理人员对风险和收益的评估。开发人员可以通过平台对市场需求文档按业务需求进行组件拆分，在业务上线后知晓组件在生产环境中的展现情况以及出现的告警，前后端分离开发时能够模拟后端接口以便并行开发。管理人员应能够随时随地查看业务的收益状况，定位痛点，方便找到每个业务组件具体的负责人。

 

关键词：组件化开发；WAP；测试人力；设计模式

 

目录

摘要

Abstract

引    言-1

1  绪论-2

1.1  课题背景-2

1.2  国内外研究现状-2

1.3  课题意义-3

1.4  论文的结构-4

2  相关技术介绍-5

2.1  MVVM设计模式-5

2.2  浏览器标准协议-6

2.3  开发工具及技术-7

2.4  Mongodb服务介绍-8

2.5  本章小结-8

3  需求分析-9

3.1  需求背景分析-9

3.2  可行性分析-9

3.3  功能需求分析-10

3.4  本章小结-10

4  系统设计-11

4.1  系统架构设计-11

4.2  功能结构设计-12

4.3  E-R图设计-13

4.4  数据库表设计-14

4.5  系统流程设计-16

4.6  本章小结-17

5  系统实现-18

5.1  登录模块实现-18

5.1.1  修改密码功能实现-20

5.1.2  认证缓存实现-21

5.2  权限控制实现-22

5.3  需求空间实现-22

5.4  组件分析实现-23

5.5  异常通知实现-24

6  系统测试-25

6.1  系统测试目的及意义-25

6.2  测试环境的搭建-25

6.3  测试的自动化集成-25

6.4  测试过程-26

结    论-28

致　谢-29

参 考 文 献-30