基于HTML5的公共社交平台设计与实现

张雪莹 喻忠霞 申进

摘 要：文章通过对市场需求进行分析，开发了一个基于HTML5技术的公共社交平台，该平台采用响应式布局，可实现一次开发多终端适配。使用市场主流框架react.js搭配ant design mobile完成社交平台基本界面的实现，在整个设计中严格采用MVVM模式开发。该公共社交平台实现了用户注册、用户登录、用户个人中心、首页动态、好友列表、好友聊天功能，具有使用便携的特点。

关键词：社交平台;HTML;MVVM模式

0 引言

目前，国内外社交网站的发展逐渐向HTML5的技术发展，截至2021年，几乎所有APP都是基于HTML5制作的，大部分APP的内容和链接都是以网页的形式呈现，典型的例子有微博、微信、Facebook、人人网、豆瓣等[1]。这些都在不同程度以不同方式增强用户的社交体验，在HTML5技术逐渐成熟后，各开发商更加注重用户体验，本文基于HTML5设计并实现了一个公共社交平台，通过该平台，用户可以不出门就能结识来自各地的朋友，可以在该平台上添加自己的动态，发表对其他用户动态的评论和点赞等。本平台的设计也是基于HTML元素进行页面布局，之后使用CSS3对页面进行优化，JavaScript增强交互体验感。

1 开发公共社交平台的技术简介

本系统主要是利用Visurl Studio Code软件进行编写源代码，设计网页，运用react.js实现HTML5页面和MVVM模式，后端接口由node.js编写与后台数据库进行连接，完成后台数据的增、删、改等功能。MongoDB数据库使用方便灵活，目前被广泛应用。HTML5网页前端开发，实际也是HTML网页开发。网页开发前端主要功能是由网页和用户交互设计，视觉和体验设计等功能相互配合，根据设计图合理地设计规划和合理布局页面，合理地编写页面设计代码，编写一些易于管理和使用的具有一定层次的视觉体验代码，挖掘带给用户深层次的视觉体验和效果，进一步提升和优化用户体验。

在该项目中统一使用开发工具Visurl Studio Code，利用该软件进行编程来实现系统的功能。Visurl Studio Code是一个轻量且强大的跨平台开源代码编辑器，支持Windows，OS和Linux。内置JavaScript，TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++，C#，Python，PHP等其他语言。并且在上传代码至github上产生冲突时可通过Visurl Studio Code编辑器解决。

2 系统的设计与实现

2.1 系统功能分析

系统的功能相对简单，基本模块的功能如下。

用户模块：用户进行信息的注册、登录、退出、查看资料。

首页模块：展示其他用户已经分享过的内容和动态，其他用户针对动态可随时进行点赞、评论和添加发布相关动态的人为好友。

分享发帖：用户可编辑图片加文字分享到首页。

聊天模块：互相关注的用户可进行聊天。

2.2 需求功能流程

根据用户使用需求设计的系统功能实现流程如图1所示。

2.3  Web界面的设计

Web的界面设计平台是交互接口网络系统设计的一个非常重要的组成部分。对于交互接口网络系统而言，Web的界面设计和系统的数据设计、体系结构设计及过程管理系统设计一样重要[2]。Web系统界面设计的准确性和质量直接地影响其产品的核心竞争力和使用寿命。因此，本交互网络系统设计平台对Web的界面设计平台给予了非常高的关注和重视。设计遵循以下原则。

（1）保持一致性：本社交平台所有组件样式按照设计规范统一进行封装，以保证页面的整洁性。

（2）使用规范的主题色，所有主题颜色以引入的方式统一界面颜色，不具体固定某个色值，并严格按照执行的动作规范颜色。例如：error使用red，warning使用yellow，success使用green，primary使用blue等。

（3）刷新页面数据量过多时，为了更好地提升用户浏览体验，所有组件数据均以按需引入的方式获取，当数据量不大但需要经常获取时可将数据在第一次获取后放入浏览器缓存，之后从浏览器缓存中获取可减少向服务器请求的次数，以增加用户体验感[3]。

2.4 系统首页的实现

首页显示平台用户实时动态，动态可文字可配图，每条动态下方展示点赞数和评论数，平台用户均可进行点赞和评论，本系统在首页添加上拉加载、下拉刷新等功能，此功能的添加可减少用户等待加载数据时间，解决缓存过大的问题，下拉刷新可为用户实时查看动态设置。

2.5 系统用户个人中心的实现

在用户登录成功之后进入用户个人中心页面，个人中心页面展示个人的基本信息、头像、用户名等，主内容区展示一个tabs，其中包括用户所发布、点赞、评论过的动态。当点击动态时，可跳转至该条动态的详情页面，从详情页面返回个人中心时使用history.push（）跳转路径，此方法可返回不刷新页面，增加用户体验感。

2.6 系统分享动态模块的实现

点分享动态按钮后进入编辑页面，见到一个长文本的输入框，下方有可添加图片的按钮，最多添加9张图片，添加后可在编辑页面预览添加的图片，用户编辑完成点击发布向后端发起请求将用户编辑的内容存入数据库，然后在首页刷新时就可以看到最新发布的动态。

2.7 系统好友聊天界面的实现

进入好友聊天模块时先获取已添加的好友列表，点击好友进入聊天界面，界面底部是消息输入框可编辑需要发送的内容，头部是聊天好友的信息，中间是已经发送过的消息内容，发送消息功能用websoket来实现，聊天功能至少要有两个端[4]，服务器的网址写在ajax文件下，单独的一个端口是1001，api/route/ws设置的端口，网址是‘ws：//localhost：1001。

3 结语

本文设计并实现的网络社交平台是在HTML5的基础上结合CSS，JavaScript的一款WebAPP，实现了用户注册登录、分享动态、点赞评论、聊天等基本功能。本平台完全采用前后端分离技术实现，前端界面主要使用阿里巴巴开源组件库ant design，并在此基础上书写HTML进行布局和CSS样式实现，并且严格按照组件规范设计界面。

[参考文献]

[1]崔雪莲.社交网络在线口碑信息传播模型研究[D].大连：大连理工大学，2017.

[2]李兴华.基于WebSocket的移动即时通信系统[D].重庆：重庆大学，2013.

[3]李桂林.HTML5在WEB前端开发中的应用研究[J].计算机产品与流通，2020（8）：17.

[4]高芳裙，盧亮.浅析JavaScript面向对象编程的实现[J].高等函授学报（自然科学版），2011（3）：95-97.

（编辑 王雪芬）