張雪瑩 喻忠霞 申進(jìn)

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

關(guān)鍵詞：社交平臺;HTML;MVVM模式

0 引言

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

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

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

在該項目中統(tǒng)一使用開發(fā)工具Visurl Studio Code，利用該軟件進(jìn)行編程來實(shí)現(xiàn)系統(tǒng)的功能。Visurl Studio Code是一個輕量且強(qiáng)大的跨平臺開源代碼編輯器，支持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)的設(shè)計與實(shí)現(xiàn)

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

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

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

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

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

聊天模塊：互相關(guān)注的用戶可進(jìn)行聊天。

2.2 需求功能流程

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

2.3? Web界面的設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

3 結(jié)語

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

[參考文獻(xiàn)]

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

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

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

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

（編輯 王雪芬）