基于HTML5的公共社交平臺設計與實現

張雪瑩 喻忠霞 申進

摘 要：文章通過對市場需求進行分析，開發(fā)了一個基于HTML5技術的公共社交平臺，該平臺采用響應式布局，可實現一次開發(fā)多終端適配。使用市場主流框架react.js搭配ant design mobile完成社交平臺基本界面的實現，在整個設計中嚴格采用MVVM模式開發(fā)。該公共社交平臺實現了用戶注冊、用戶登錄、用戶個人中心、首頁動態(tài)、好友列表、好友聊天功能，具有使用便攜的特點。

關鍵詞：社交平臺;HTML;MVVM模式

0 引言

目前，國內外社交網站的發(fā)展逐漸向HTML5的技術發(fā)展，截至2021年，幾乎所有APP都是基于HTML5制作的，大部分APP的內容和鏈接都是以網頁的形式呈現，典型的例子有微博、微信、Facebook、人人網、豆瓣等[1]。這些都在不同程度以不同方式增強用戶的社交體驗，在HTML5技術逐漸成熟后，各開發(fā)商更加注重用戶體驗，本文基于HTML5設計并實現了一個公共社交平臺，通過該平臺，用戶可以不出門就能結識來自各地的朋友，可以在該平臺上添加自己的動態(tài)，發(fā)表對其他用戶動態(tài)的評論和點贊等。本平臺的設計也是基于HTML元素進行頁面布局，之后使用CSS3對頁面進行優(yōu)化，JavaScript增強交互體驗感。

1 開發(fā)公共社交平臺的技術簡介

本系統(tǒng)主要是利用Visurl Studio Code軟件進行編寫源代碼，設計網頁，運用react.js實現HTML5頁面和MVVM模式，后端接口由node.js編寫與后臺數據庫進行連接，完成后臺數據的增、刪、改等功能。MongoDB數據庫使用方便靈活，目前被廣泛應用。HTML5網頁前端開發(fā)，實際也是HTML網頁開發(fā)。網頁開發(fā)前端主要功能是由網頁和用戶交互設計，視覺和體驗設計等功能相互配合，根據設計圖合理地設計規(guī)劃和合理布局頁面，合理地編寫頁面設計代碼，編寫一些易于管理和使用的具有一定層次的視覺體驗代碼，挖掘帶給用戶深層次的視覺體驗和效果，進一步提升和優(yōu)化用戶體驗。

在該項目中統(tǒng)一使用開發(fā)工具Visurl Studio Code，利用該軟件進行編程來實現系統(tǒng)的功能。Visurl Studio Code是一個輕量且強大的跨平臺開源代碼編輯器，支持Windows，OS和Linux。內置JavaScript，TypeScript和Node.js支持，而且擁有豐富的插件生態(tài)系統(tǒng)，可通過安裝插件來支持C++，C#，Python，PHP等其他語言。并且在上傳代碼至github上產生沖突時可通過Visurl Studio Code編輯器解決。

2 系統(tǒng)的設計與實現

2.1 系統(tǒng)功能分析

系統(tǒng)的功能相對簡單，基本模塊的功能如下。

用戶模塊：用戶進行信息的注冊、登錄、退出、查看資料。

首頁模塊：展示其他用戶已經分享過的內容和動態(tài)，其他用戶針對動態(tài)可隨時進行點贊、評論和添加發(fā)布相關動態(tài)的人為好友。

分享發(fā)帖：用戶可編輯圖片加文字分享到首頁。

聊天模塊：互相關注的用戶可進行聊天。

2.2 需求功能流程

根據用戶使用需求設計的系統(tǒng)功能實現流程如圖1所示。

2.3? Web界面的設計

Web的界面設計平臺是交互接口網絡系統(tǒng)設計的一個非常重要的組成部分。對于交互接口網絡系統(tǒng)而言，Web的界面設計和系統(tǒng)的數據設計、體系結構設計及過程管理系統(tǒng)設計一樣重要[2]。Web系統(tǒng)界面設計的準確性和質量直接地影響其產品的核心競爭力和使用壽命。因此，本交互網絡系統(tǒng)設計平臺對Web的界面設計平臺給予了非常高的關注和重視。設計遵循以下原則。

（1）保持一致性：本社交平臺所有組件樣式按照設計規(guī)范統(tǒng)一進行封裝，以保證頁面的整潔性。

（2）使用規(guī)范的主題色，所有主題顏色以引入的方式統(tǒng)一界面顏色，不具體固定某個色值，并嚴格按照執(zhí)行的動作規(guī)范顏色。例如：error使用red，warning使用yellow，success使用green，primary使用blue等。

（3）刷新頁面數據量過多時，為了更好地提升用戶瀏覽體驗，所有組件數據均以按需引入的方式獲取，當數據量不大但需要經常獲取時可將數據在第一次獲取后放入瀏覽器緩存，之后從瀏覽器緩存中獲取可減少向服務器請求的次數，以增加用戶體驗感[3]。

2.4 系統(tǒng)首頁的實現

首頁顯示平臺用戶實時動態(tài)，動態(tài)可文字可配圖，每條動態(tài)下方展示點贊數和評論數，平臺用戶均可進行點贊和評論，本系統(tǒng)在首頁添加上拉加載、下拉刷新等功能，此功能的添加可減少用戶等待加載數據時間，解決緩存過大的問題，下拉刷新可為用戶實時查看動態(tài)設置。

2.5 系統(tǒng)用戶個人中心的實現

在用戶登錄成功之后進入用戶個人中心頁面，個人中心頁面展示個人的基本信息、頭像、用戶名等，主內容區(qū)展示一個tabs，其中包括用戶所發(fā)布、點贊、評論過的動態(tài)。當點擊動態(tài)時，可跳轉至該條動態(tài)的詳情頁面，從詳情頁面返回個人中心時使用history.push（）跳轉路徑，此方法可返回不刷新頁面，增加用戶體驗感。

2.6 系統(tǒng)分享動態(tài)模塊的實現

點分享動態(tài)按鈕后進入編輯頁面，見到一個長文本的輸入框，下方有可添加圖片的按鈕，最多添加9張圖片，添加后可在編輯頁面預覽添加的圖片，用戶編輯完成點擊發(fā)布向后端發(fā)起請求將用戶編輯的內容存入數據庫，然后在首頁刷新時就可以看到最新發(fā)布的動態(tài)。

2.7 系統(tǒng)好友聊天界面的實現

進入好友聊天模塊時先獲取已添加的好友列表，點擊好友進入聊天界面，界面底部是消息輸入框可編輯需要發(fā)送的內容，頭部是聊天好友的信息，中間是已經發(fā)送過的消息內容，發(fā)送消息功能用websoket來實現，聊天功能至少要有兩個端[4]，服務器的網址寫在ajax文件下，單獨的一個端口是1001，api/route/ws設置的端口，網址是‘ws：//localhost：1001。

3 結語

本文設計并實現的網絡社交平臺是在HTML5的基礎上結合CSS，JavaScript的一款WebAPP，實現了用戶注冊登錄、分享動態(tài)、點贊評論、聊天等基本功能。本平臺完全采用前后端分離技術實現，前端界面主要使用阿里巴巴開源組件庫ant design，并在此基礎上書寫HTML進行布局和CSS樣式實現，并且嚴格按照組件規(guī)范設計界面。

[參考文獻]

[1]崔雪蓮.社交網絡在線口碑信息傳播模型研究[D].大連：大連理工大學，2017.

[2]李興華.基于WebSocket的移動即時通信系統(tǒng)[D].重慶：重慶大學，2013.

[3]李桂林.HTML5在WEB前端開發(fā)中的應用研究[J].計算機產品與流通，2020（8）：17.

[4]高芳裙，盧亮.淺析JavaScript面向對象編程的實現[J].高等函授學報（自然科學版），2011（3）：95-97.

（編輯 王雪芬）