基于saas和用户行为的响应式web的实现

发布时间：2020-05-31 09:27

【摘要】：随着不同形式移动终端和超大屏幕显示器的广泛普及,网页在不同终端显示适配(响应式web)的需求也迅速扩张。如今,已有成熟的响应式框架适配简单网页,比如BootStrap,但对于复杂的SaaS平台则无响应式框架进行适配。且如今的响应式框架只是简单对内容和尺寸的调整,但对于拥有表单和字段繁多的SaaS平台,无法智能的选择性展示表单和字段,从而导致移动端查看SaaS平台体验极差。因此如今响应式框架无法满足复杂SaaS平台的需求。若对于表单和模块众多的SaaS平台,其自配置的系统不能自动适应终端,会给开发和维护带来极大的不便。首先,本文研究了针对SaaS平台的响应式web。实现了基本的SaaS平台响应式组件库,主要包含响应式字体、响应式图片、响应式元素、响应式布局、可排序和可隐藏的响应式字段和多种响应式表单等组件库。其次,由于SaaS平台表单繁多和表单字段的繁多,提出了基于协同过滤算法和用户点击表单的次数、时间间隔、表单之间的关联性、用户拖动次数等用户行为建立的表单排序模型。根据建立模型来刻画用户的使用习惯,建立用户行为矢量模型,判断模块、表单和字段对用户的重要性,实现表单和字段的自动排序。最后,本文设计并实现了基于SaaS平台和用户行为的响应式组件库。并且将组件库引入到实际的SaaS系统中,所以结果截图最终都来源于实际运行的系统。
【图文】：

内容,布局设计,设备,元素

响应式的设计模式主要有两种：基于设备模式和内容优先的模式。基于设备逡逑通过主流设备的类型及尺寸来确定布局断点（ｂｒｅａｋｐｏｉｎｔ），设计多套样式，再分逡逑别投射到响应的设备。设备相关图如图２－１所示。逡逑ｎｒ邋ｕｎ邋Ｉ邋１１１邋＊逡逑ｍｍ逦＇邋＇Ｍ逦ｉ；／ｆｅ逡逑图２－１基于设备的响应式逡逑内容优先即在对内容进行布局设计的时候，可以无视设备，由内容决定何时逡逑需要采用不同的呈现方式。在较大设备上，显示较为完整的信息。在较小设备上，逡逑可以显示较为重要的信息。但这种基于内容的响应式目前并没有考虑用户行为。逡逑如图２－２所示。逡逑ｆ邋：ｒ：；ｒ邋：！逦＊邋：＊ｔ：邋Ｉ邋：！；邋：邋：邋：；邋—ｆｃ：：逡逑Ｉ．一邋Ｌ．＼＇．：ｘ．．．．．…．．．．．Ｉ邋．．．．ｓ逡逑图２－２基于内容的响应式逡逑２．３邋ＨＴＭＬ５逡逑２．３．１拖拽逡逑对于＠拽的实现，需要考虑拖拽元素、拖拽过程和放置元素［６］。逡逑拖动元素为ｄｒａｇＥｌｅｍｅｎｔ，相关事件为ｄｒａｇｓｔａｒｔ、ｄｒａｇ、ｄｒａｇｅｎｄ。事件拖动对逡逑象为邋ｄａｔａＴｒａｎｓｆｅｒ，属性有邋ｇｅｔＤａｔａ（）、ｓｅｔＤａｔａ（）。放置元素为邋ｄｒｏｐＥｌｅｍｅｎｔ，相关逡逑事件为邋ｄｒａｇｅｎｔｅｒ、ｄｒａｇｏｖｅｒ邋学卩邋ｄｒａｇｌｅａｖｅ。逡逑拖放元素的写法：首先拖放元素中把ｄｒａｇｇａｂｌｅ属性设置为ｔｒｕｅ表示可拖拽，，逡逑其次添加拖拽开始事件即ｄｒａｇｓｔａｒｔ事件且设置ｅｖｅｎｔ．ｔａｒｇｅｔ．ｄａｔａＴｒａｎｓｆｅｒ．ｓｅｔＤａｔａ（）。逡逑可以在ｄａｔａｓｔａｒｔ事件处理程序中设置ｅｆｆｅｃｔＡｌｌｏｗｅｄ属性，表示允许那种?

构造器,面流,组件,文件

｜邋Ｌ逦…，ｉ４邋■逡逑图２－３单页面应用流程逡逑如图２－３所示是单页面流程：逡逑１．创建组件：创建组件构造器的方法为ｖｕｅ．ｅｘｔｅｎｄ，但其实一般都是用逡逑ｔｅｍｐｌａｔｅ创建组件，一个组件可以抽象成一个文件然后ｉｍｐｏｒｔ进来逡逑ｃｏｎｓｔ邋Ｆｏｏ邋＝｛邋ｔｅｍｐｌａｔｅ：，＜ｄｉｖ＞ｆｏｏ＜／ｄｉｖ＞＇｝逡逑ｃｏｎｓｔ邋Ｂａｒ邋＝邋｛ｔｅｍｐｌａｔｅ：邋，＜ｄｉｖ＞ｂａｒ＜／ｄｉｖ＞，｝逡逑７逡逑
【学位授予单位】：北京邮电大学
【学位级别】：硕士
【学位授予年份】：2018
【分类号】：TP393.09

【参考文献】