【摘要】：隨著不同形式移動終端和超大屏幕顯示器的廣泛普及,網(wǎng)頁在不同終端顯示適配(響應式web)的需求也迅速擴張。如今,已有成熟的響應式框架適配簡單網(wǎng)頁,比如BootStrap,但對于復雜的SaaS平臺則無響應式框架進行適配。且如今的響應式框架只是簡單對內(nèi)容和尺寸的調(diào)整,但對于擁有表單和字段繁多的SaaS平臺,無法智能的選擇性展示表單和字段,從而導致移動端查看SaaS平臺體驗極差。因此如今響應式框架無法滿足復雜SaaS平臺的需求。若對于表單和模塊眾多的SaaS平臺,其自配置的系統(tǒng)不能自動適應終端,會給開發(fā)和維護帶來極大的不便。首先,本文研究了針對SaaS平臺的響應式web。實現(xiàn)了基本的SaaS平臺響應式組件庫,主要包含響應式字體、響應式圖片、響應式元素、響應式布局、可排序和可隱藏的響應式字段和多種響應式表單等組件庫。其次,由于SaaS平臺表單繁多和表單字段的繁多,提出了基于協(xié)同過濾算法和用戶點擊表單的次數(shù)、時間間隔、表單之間的關聯(lián)性、用戶拖動次數(shù)等用戶行為建立的表單排序模型。根據(jù)建立模型來刻畫用戶的使用習慣,建立用戶行為矢量模型,判斷模塊、表單和字段對用戶的重要性,實現(xiàn)表單和字段的自動排序。最后,本文設計并實現(xiàn)了基于SaaS平臺和用戶行為的響應式組件庫。并且將組件庫引入到實際的SaaS系統(tǒng)中,所以結果截圖最終都來源于實際運行的系統(tǒng)。
【圖文】：

響應式的設計模式主要有兩種：基于設備模式和內(nèi)容優(yōu)先的模式�；谠O備逡逑通過主流設備的類型及尺寸來確定布局斷點（ｂｒｅａｋｐｏｉｎｔ），設計多套樣式，再分逡逑別投射到響應的設備。設備相關圖如圖２－１所示。逡逑ｎｒ邋ｕｎ邋Ｉ邋１１１邋＊逡逑ｍｍ邐＇邋＇Ｍ邐ｉ；／ｆｅ逡逑圖２－１基于設備的響應式逡逑內(nèi)容優(yōu)先即在對內(nèi)容進行布局設計的時候，可以無視設備，由內(nèi)容決定何時逡逑需要采用不同的呈現(xiàn)方式。在較大設備上，顯示較為完整的信息。在較小設備上，逡逑可以顯示較為重要的信息。但這種基于內(nèi)容的響應式目前并沒有考慮用戶行為。逡逑如圖２－２所示。逡逑ｆ邋：ｒ：；ｒ邋：！邐＊邋：＊ｔ：邋Ｉ邋：！；邋：邋：邋：；邋—ｆｃ：：逡逑Ｉ．一邋Ｌ．＼＇．：ｘ．．．．．…．．．．．Ｉ邋．．．．ｓ逡逑圖２－２基于內(nèi)容的響應式逡逑２．３邋ＨＴＭＬ５逡逑２．３．１拖拽逡逑對于＠拽的實現(xiàn)，需要考慮拖拽元素、拖拽過程和放置元素［６］。逡逑拖動元素為ｄｒａｇＥｌｅｍｅｎｔ，相關事件為ｄｒａｇｓｔａｒｔ、ｄｒａｇ、ｄｒａｇｅｎｄ。事件拖動對逡逑象為邋ｄａｔａＴｒａｎｓｆｅｒ，屬性有邋ｇｅｔＤａｔａ（）、ｓｅｔＤａｔａ（）。放置元素為邋ｄｒｏｐＥｌｅｍｅｎｔ，相關逡逑事件為邋ｄｒａｇｅｎｔｅｒ、ｄｒａｇｏｖｅｒ邋學卩邋ｄｒａｇｌｅａｖｅ。逡逑拖放元素的寫法：首先拖放元素中把ｄｒａｇｇａｂｌｅ屬性設置為ｔｒｕｅ表示可拖拽，，逡逑其次添加拖拽開始事件即ｄｒａｇｓｔａｒｔ事件且設置ｅｖｅｎｔ．ｔａｒｇｅｔ．ｄａｔａＴｒａｎｓｆｅｒ．ｓｅｔＤａｔａ（）。逡逑可以在ｄａｔａｓｔａｒｔ事件處理程序中設置ｅｆｆｅｃｔＡｌｌｏｗｅｄ屬性，表示允許那種?

｜邋Ｌ邐…，ｉ４邋■逡逑圖２－３單頁面應用流程逡逑如圖２－３所示是單頁面流程：逡逑１．創(chuàng)建組件：創(chuàng)建組件構造器的方法為ｖｕｅ．ｅｘｔｅｎｄ，但其實一般都是用逡逑ｔｅｍｐｌａｔｅ創(chuàng)建組件，一個組件可以抽象成一個文件然后ｉｍｐｏｒｔ進來逡逑ｃｏｎｓｔ邋Ｆｏｏ邋＝｛邋ｔｅｍｐｌａｔｅ：，＜ｄｉｖ＞ｆｏｏ＜／ｄｉｖ＞＇｝逡逑ｃｏｎｓｔ邋Ｂａｒ邋＝邋｛ｔｅｍｐｌａｔｅ：邋，＜ｄｉｖ＞ｂａｒ＜／ｄｉｖ＞，｝逡逑７逡逑
【學位授予單位】：北京郵電大學
【學位級別】：碩士
【學位授予年份】：2018
【分類號】：TP393.09

【參考文獻】

相關期刊論文 前10條

1 劉克禮;王榮華;;基于協(xié)同過濾的學習資源個性化推薦應用[J];安徽廣播電視大學學報;2017年04期

2 呂成戍;;基于用戶項目屬性偏好的協(xié)同過濾推薦算法[J];計算機技術與發(fā)展;2018年04期

3 徐X;朱小柯;荊曉遠;;基于改進協(xié)同過濾的個性化Web服務推薦方法研究[J];計算機技術與發(fā)展;2018年01期

4 何佶星;陳汶濱;牟斌皓;;流行度劃分結合平均偏好權重的協(xié)同過濾個性化推薦算法[J];計算機科學;2018年S1期

5 劉于沛;;基于HTML5進行響應式Web應用的技巧[J];中國新通信;2017年02期

6 肖文強;姚世軍;吳善明;;一種改進的top-N協(xié)同過濾推薦算法[J];計算機應用研究;2018年01期

7 潘丹;;基于bootstrap響應式web前端分析[J];數(shù)字技術與應用;2016年10期

8 李亞娟;王華東;;淺析響應式網(wǎng)頁設計的實現(xiàn)和優(yōu)化方法[J];福建電腦;2016年07期

9 呂媛媛;李可;;移動端應用設計中的響應式實現(xiàn)方法[J];軟件;2016年02期

10 蔣凌燕;查英華;;基于HTML5的響應式Web頁面重組適配技術研究[J];計算機與現(xiàn)代化;2015年02期

相關碩士學位論文 前5條

1 余沖;基于深度學習的協(xié)同過濾模型研究[D];深圳大學;2017年

2 王強;基于協(xié)同過濾的個性化推薦算法研究及系統(tǒng)實現(xiàn)[D];西南交通大學;2017年

3 馬小翔;基于改進權重計算的協(xié)同過濾算法研究[D];吉林大學;2017年

4 張聰聰;基于響應式Web設計中用戶界面的分析與探究[D];中南民族大學;2015年

5 陳曦;面向多設備響應式設計的機制研究[D];北京郵電大學;2015年

本文編號：2689645