基于HTML5技術的校企互聯平臺開發

王蒙 郁慧琴 王玉貴

【摘 ?要】產學研合作主要是將學校、企業以及各科研機構有效地聯系起來，實現生產要素的充分調用，從而達到效益最大化的目標。論文在對產學研合作深度分析后，在對現有產學研網絡平臺的總結比較基礎上，根據以上要點，結合使用各種技術，開發了一個基于HTML5技術的校企互聯產學研平臺。

【Abstract】Industry-university-research cooperation is mainly to effectively connect schools， enterprises and various scientific research institutions， realize the full mobilization and use of production factors， so as to achieve the goal of maximum benefits. After the in-depth analysis of the industry-university-research cooperation， based on the summary and comparison of the existing industry-university-research network platforms， according to the above key points， combined with the use of various technologies， this paper develops the industry-university-research platform of school-enterprise interconnection based on HTML5 technology.

【關鍵詞】產學研;校企互聯;HTML5

【Keywords】industry-university-research; school-enterprise interconnection; HTML5

【中圖分類號】TP311.5 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 【文獻標志碼】A ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 【文章編號】1673-1069（2020）10-0170-03

1 引言

為了更好地把握產學研需求，為客戶帶來更為舒心便捷的服務，本文重點在用戶體驗系統和運營管理等方面進行了創新。以HTML5開發技術為基礎，以促進高校科技成果轉化為核心，利用各種新渠道為客戶營造更加舒適便捷的服務體驗。本平臺主要針對高校教師和企業客戶，其以HTML5與JavaScript技術為基礎，搭建了一個操作簡單、功能實用、溝通快捷的響應式網站平臺，旨在更好地促進高校和企業順暢溝通合作，使得企業能夠精準快捷地獲取所需技術、高校科技成果能夠合理充分地應用到實踐當中，省去中間煩瑣的流程，減少實用型科技成果的流失。

2 利用HTML5開發本項目的優勢

2.1 解決跨瀏覽器的問題

在應用HTML5之前，各瀏覽器廠商為獲取更大的效益都制定了自己專屬的標準，同一個頁面在不同的瀏覽器上往往呈現出不同的頁面效果，這極大地降低了用戶的體驗。本項目以其優越的跨平臺性能，能夠贏得優質的用戶體驗。

2.2 用戶至上原則

基于HTML5標準開發的網站，始終把用戶體驗放在第一位，這也符合開發本網站的需求。利用HTML5開發的網站，頁面效果加載更為流暢，用戶可以更好更快地瀏覽所需的信息，從而避免了因下載、更新等一系列煩瑣流程而帶來的煩惱。

2.3 用戶信息安全

為確保用戶信息安全，HTML5引入了一種新的基于來源的安全模型，該模型針對不同的API（Application Programming Interface，應用程序編程接口）都可通用。使用這個模型，不需要借助任何不安全的hack就能跨域進行安全對話，在很大程度上提升了用戶信息的安全性。

2.4 化繁為簡的優勢

作為當下流行的通用標記語言，HTML5將復雜的代碼簡單化，嚴格遵循“簡單至上”的原則，甚至創建了新的簡化字符集聲明以迎合用戶需求，以不同瀏覽器自帶的原生能力替代復雜的JavaScript代碼等。為了避免造成誤解，HTML5杜絕任何歧義模糊的語句出現，其細致嚴格的規范，為維護人員帶來了諸多便利，大大降低了平臺后期的維護難度[1]。

3 平臺框架與搭建思路

3.1 平臺框架

本平臺在對各種現有產學研平臺的總結比較基礎上，從用戶體驗出發，主要應用技術有Bootstrap框架、HTML5語言，結合JavaScript進行項目開發。項目建設包括UI設計及后臺模塊。具體包括角色切換功能、科技中心、需求中心、專家中心、定位系統、通訊功能、分享系統、用戶二維碼等。平臺框架如表1所示。

3.2 搭建思路

眾所周知，互聯網最大的特性和優勢就是能夠實現資源的海量存儲及廣泛共享。因此，利用互聯網這些良好的特性搭建一個優質的交流平臺，將企業與高校密切地聯系起來，就可為高校的各項科研成果提供一個良好的孵化平臺，從而促進各項科技成果的轉化。在產學研合作過程中，高校和科研機構能夠為企業發展提供所需要的技術支持，企業能夠為促進自身轉型升級所需的科研技術提供發展平臺，二者社會分工不同。為更好地提升用戶體驗，本文進行了細致的規劃，具體規劃如圖1所示。

①簡化平臺開發中的界面設計。根據用戶角色不同（高校用戶或企業用戶）進行不同的界面設計。②減少科技成果的轉化時間。根據用戶所處的行業不同，按照用戶的需求，進行供需的智能匹配。③建立完善的分享傳播系統。根據網站、微博、微信的用戶量廣、信息流通渠道多等的特點，打通社會化營銷渠道，提高宣傳的滲透度。④通過會員制度進行和實現用戶行為記錄分析，建立用戶數據庫。此外，可以通過二維碼技術，實現從線下到線上的無縫連接，以提升社會化營銷的效果。⑤利用HTML5的新特性，實現精準定位。使用該網站，可以搜索地點或可以利用GPS定位用戶所在地，為用戶提供更精準的高校科研服務或企業需求的信息。⑥實現供需智能匹配。一是根據高校提交的科技成果服務，或者企業提供的科技成果需求，進行智能匹配推送，方便用戶快速找到感興趣的服務或需求;二是用戶也可以根據行業類別劃分，查看不同行業的供需信息;三是可通過關鍵詞查找用戶感興趣的供需信息。⑦專家查找功能。根據高校教師擅長的領域，進行專家資格審核認證;企業可通過行業、地區、搜索等多種形式，查找相關領域的專家，以便溝通。⑧溝通、點評功能。教師和企業雙方，均可相互發送消息進行溝通，并且可對對方提供的供需信息進行點評。⑨建立信息分享系統。可通過微信、微博、二維碼等形式，將供需信息分享到其他平臺，便于擴大影響力和提升知名度，促進科技成果的轉化。

4 平臺具體設計與功能優化

4.1 平臺具體設計

第一，用戶可通過密碼，也可通過短信驗證碼快捷登錄。如果忘記密碼，可通過手機短信驗證碼的方式重置密碼。第二，用戶登錄后，根據用戶的信息，若判斷出用戶為高校角色，則自動展示高校版頁面，主要展示類別如下：①默認展示企業信息;②按領域展示企業信息;③按應用行業展示企業信息;④按成熟度展示企業信息;⑤按地區展示企業信息;⑥按周、按月、按累計等多種方式，展示企業信息;⑦按發布時間展示企業信息。第三，用戶登錄后，根據用戶的信息，若判斷出用戶為企業角色，則自動展示企業版頁面，主要展示類別如下：①專家、機構頁面快捷導航;②專家信息展示;③按行業展示專家列表;④推薦機構參考;⑤專家詳情介紹;⑥專家推薦服務;⑦相關專家推薦。第四，詳細信息展示界面：①介紹信息的基本情況;②詳細介紹信息內容，包含方案描述、技術優勢、適用對象等;③企業用戶將鼠標放在所需產品上方，可快速顯示該技術的適用情況、瀏覽量、咨詢量、快速聯系技術方等;④高校用戶將鼠標放在企業介紹上方，可快速顯示該企業的詳細信息及其所屬類別。第五，用戶反饋界面：①用戶可將使用軟件過程中遇到的問題，提交反饋;②后臺將會接收用戶提交的數據，根據用戶提出的訴求進行升級優化;③聯系對接，可通過手機、微信等方式聯系客戶，并可通過微信分享到朋友圈。

4.2 功能優化

4.2.1 優化選擇結構

在網站結構設計中，if語句和switch語句都可以用來設計多重選擇結構，相較而言，switch語句可以更方便地應用于多個分支的控制流程，在特定的環境下switch結構的執行效率可以遠遠高于if結構[2]。例如，在網站登錄模塊界面，我們采用switch語句設計多重選擇結構?？紤]到大多數情況，普通用戶數量是遠大于管理員和網站維護人員的數量的，大部分登錄者都是普通用戶，因此，我們完全可以利用switch的結構優勢將普通用戶這個最可能出現的條件放在前面，這樣就可以在很大程度上降低程序的檢測次數，自然就提升了選擇結構的執行效率，這在大批量數據檢測中效果是非常明顯的。

4.2.2 優化運算性能

在性能優化方面，我們使用查表法訪問數據來替代if或switch查找結構，將一些事先計算好的結果，存儲在常量數組中，這樣運行時就可節省計算開銷，尤其是在條件數目非常巨大的環境中，使用查表法訪問數據比使用if或switch結構查找速度更快，效率更高。使用查表法消除所有條件判斷，由于沒有條件判斷，當候選值的數量增加時，基本上也不會增加額外的性能開銷，這樣就可提高頁面加載速度，從而為用戶提供更加舒適便捷的服務體驗。

4.2.3 設置延遲執行

在瀏覽網頁時，經常會遇到網頁加載出錯、加載時間過長等問題，這是因為基于HTML5搭建的網頁基本框架，布局在標簽之后，而標簽中又包含了大量的JavaScript腳本或文件。這就意味著基于HTML5搭建的網頁基本框架必須等到標簽中JavaScript代碼全部被解析完成后，才可解析。而在網頁解析標簽中的JavaScript代碼時，如果遇到加載失敗項時，整個頁面也將無法顯示。因此，要解決這個問題，就需要用到