软件架构第五次课后作业
写在前面...
其实我本来第4个作业就这样写的，就是vue + spring boot的，前端已经写了一些了，然后突然看群里说...第五次作业..不用写具体代码...综合考虑实现效果和需求工作量，我就把之前的程序改了改，加上数据库和网络功能交了...当然也是完成了作业呢！
题目
架构设计。
设计用于空间数据质检的平台软件架构，平台运行于Internet环境，用户无需安装专用客户端应用；说明及分析所设计的软件架构风格。
一、基本功能要求：
A、用户管理: 支持多用户，多用户可在不同客户端同时使用、同一用户可在不同终端使用；用户登录通过验证后才能使用系统功能；
B、用户操作记录：记录及查询每个用户的地图数据提交情况、数据错误登记情况；
C、地图数据加载显示：从浏览器打开指定的图形或文档类型地图数据文件，并显示在应用程序窗口中；
D、错误记录: 通过在图形中或文本中指定位置，标记各项错误的位置;指出错误位置后，输入错误类型、错误描述等信息并自动给错误编号；保存所记录的错误信息；
E、错误信息记录与查询：在平台中可通过输入关键字指定地图数据、指定类型错误、指定错误记录人搜索并显示出错情况。
二、成果提交：
软件架构说明。
A、使用UML构件图和部署图表达所设计的软件架构，说明其风格并分析主要优缺点。
B、指出至少两种在各软件模块设计中用到的设计模式，使用相应的UML表达并简要说明。
概述
作为一个网页应用，简单来看，在具体实现时，准备使用如下关键技术框架：
- 前端技术 vue + elementUi + axios
- 后端技术 spring boot + mybatis-plus + spring security
具体来说，前端主体由MVVM架构的vue编写，各种构件用elementUI的UI，使用axios与后端交换数据。后端使用spring-boot作为整体框架，用和spring搭配很好的mybatis数据库，用户的身份验证和行为由spring security保证安全。
数据库中不仅储存了用户信息，地图图像，同时储存了用户的操作记录。用户的每个操作都会对应服务器中的一个条目
服务器中数据的组织
- 用户功能User
- 字段：name 类型：char(50)
- 字段：pwMD5 类型：char(32)
- 字段：id 类型：TIMESTAMP
- 字段：online 类型：bit
- 字段：workMap 类型：char(50)
- 图片功能Pics
- 字段：fileName 类型：char(50)
- 字段：imgData 类型：mediumblob
- 字段：fileErrors 类型：MEDIUMTEXT
- 日志功能Logs
- 字段：userName 类型：char(50)
- 字段：time 类型：TIMESTAMP
- 字段：infoLine 类型：TEXT
A整体框架
整体上使用MVC的结构
图 3
构件图：
图 1
部署图：
图 2
优点：
- 多个视图与一个模型相对应。变化–传播机制确保了所有相关视图都能够及时地获取模型变化信息，从而使得所有视图和控制器同步，便于维护。
- 具有良好的移植性。由于模型独立于视图，因此可以方便地实现不同部分的移植。
- 系统被分割为三个独立的部分，当功能发生变化时，改变其中的一个部分就能满足要求。
缺点：
- 增加了系统设计和运行复杂性。
- 视图与控制器连接过于紧密，妨碍了二者的独立重用。
- 视图访问模型的效率比较低。由于模型具有不同的操作接口，因此视图需要多次访问模型才能获得足够的数据。
- 频繁访问未变化的数据降低了系统的性能。
B设计模式
MVVM模式
技术路线中的vue使用了MVVM模式，是完全数据驱动的
图 1
图 2
其最重要的特点是数据双向绑定，大大简化了js的开发流程，给开发者提供了方便。
观察者模式
在实现多用户同时编辑同一个地图时，使用了观察者模式。当一个用户向服务器发送请求，服务器会对数据库发送用户的操作，然后更新对应图片的矢量表（即上文提到的Pics.fileErroes)，然后对每个正在编辑这一地图的用户发送一个报文，让用户从数据库更新信息。这一段确实是观察者模式。
图 3
优点：
- 可以实现数据逻辑层和表现层的分离
- 在观察者和观察目标之间建立一个抽象的耦合
- 支持广播通信，大大简化了一对对系统
- 增加新的具体观察者无需修改其他代码
缺点： - 通知所有的观察者需要花费很多时间和资源
- 没有相应的机制让观察者知道被观察者发生了什么样的改变
