基于HTML5的公共社交平臺設計與實現(xiàn)

張雪瑩 喻忠霞 申進

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

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

2.2 需求功能流程

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

2.3? Web界面的設計

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

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

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

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

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

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

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

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

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

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

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

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

3 結語

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

[參考文獻]

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

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

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

[4]高芳裙，盧亮.淺析JavaScript面向?qū)ο缶幊痰膶崿F(xiàn)[J].高等函授學報（自然科學版），2011（3）：95-97.

（編輯 王雪芬）