基于HTML5的社交平台的设计与开发

摘要人民的生活水平随着互联网的发展而不断提升，在网络进行社交活动成为了当代主流的一种娱乐方式。人们可以通过社交平台表达内心的情感需求，也能够利用它迅速地获取信息。总体上而言，社交平台是一种能为人们带来较高实际价值的互联网产物。本Web端社交平台命名为“ON”，采用目前主流的Bootstrap前端框架进行网页的整体设计，不仅界面简洁美观，而且解决了跨终端的显示问题。后端使用PHP语言进行开发，配合MySQL数据库进行数据储存，打造了一个具有实用性、可靠性、可扩展性以及先进性的交互系统。平台在默认的社交功能基础上拓展即时分享的板块，极大地提升了用户体验。根据用户的操作喜好以及需求，网站分为四大板块，分别是：首页、好友、收藏、个人中心等。首页能够展示实时的多媒体大众化信息，消除了平台的孤立性。用户可以在首页进行发布内容和实时删除的操作，方便快捷。在个人中心页面，可以发布不对外公开的私人动态以及管理个人发布的所有内容。网站还具备了即时互动功能，能够发表对好友动态的评论以及发起对话等。这些功能均体现了社交的特性，能够为用户提供舒适的使用体验，极大地增强了用户对本Web端平台的粘性。为满足有效管理平台的需求，开发了对应的后台管理系统，并通过管理系统对网站整体的内容及用户信息进行维护，系统的主要功能包括删减人员、发布官方公告等。简洁美观的管理台为管理人员提供了直观的工作界面，便于各项工作事务的处理，有效提高了管理效率，具有较好的实际应用效果。本文将对平台的开发理念、设计思想以及实现方法作详细的阐述，并且展示开发的成果。关键词：HTML5；PHP；Web端；社交平台

AbstractWiththedevelopmentoftheInternet,people'slivingstandardsareconstantlyimproving,andsocialactivitiesontheInternethavebecomeamainstreamwayofentertainment.Peoplecanexpresstheirinneremotionalneedsthroughsocialplatform,andalsocanuseittogetinformationquickly.Generallyspeaking,socialplatformisakindofInternetproductthatcanbringhighpracticalvaluetopeople.Thisweb-basedsocialplatformisnamed"on",whichusesthecurrentmainstreambootstrapfront-endframeworkfortheoveralldesignofthewebpage.Itnotonlyhasasimpleandbeautifulinterface,butalsosolvestheproblemofcrossterminaldisplay.Theback-endisdevelopedbyusingPHPlanguageandstoredinMySQLdatabase.Itcreatesapractical,reliable,scalableandadvancedinteractivesystem.Basedonthedefaultsocialfunction,theplatformexpandsthereal-timesharingmodule,greatlyimprovingtheuserexperience.Accordingtotheuser'soperationpreferencesandneeds,thewebsiteisdividedintofourparts:homepage,friends,collection,personalcenter,etc.Thehomepagecandisplayreal-timemultimediapopularinformation,eliminatingtheisolationoftheplatform.Userscanpublishcontentonthehomepageanddeleteitinrealtime,whichisconvenientandfast.Onthepersonalcenterpage,youcanpublishprivatenewsthatisnotpubliclyavailableandmanageallthecontentpublishedbyindividuals.Thesefeaturescanprovideuserswithacomfortableexperienceandgreatlyenhancetheuser'sstickinesstothewebplatform.Inordertomeettheneedsoftheeffectivemanagementplatform,thecorrespondingbackgroundmanagementsystemisdeveloped,whichmainlyincludespersonneldeletion,officialannouncementandotherfunctions,withbetterpracticalapplicationeffect.Keywords：Web;HTML5;SocialPlatform;PHP

目录14929第一章绪论 绪论选题的目的和意义新时代下信息社会的飞速发展，给人们创造了更多的交流方式。网络社会互动是社会互动中的一种，它是基于互联网而形成的互动形式[[]吴咏梅.互联网时代社会互动的特点[J[]吴咏梅.互联网时代社会互动的特点[J].新西部:下旬·理论,2014(9):113-113.社交平台作为一种社会化媒体，通过链接用户与用户构建社会化网络，为人们提供了信息交换的平台，其用户可以借助网络传播信息，并向另一群使用网络的用户开放。基于社交平台的功能及属性，信息可以很快地传播，人与人之间的关系更加密切。网络社交平台还具有操作简易的特点，从注册到使用一目了然，降低了对用户的技术要求，适用人群面广泛。以此趋势发展，社交平台必然成为终端上人群聚合和深度社交的强力纽带。概括地说，对于个体而言，社交平台主要提供了这三种价值：为人们提供一条社交的新方式，并缩短认识、沟通的途径。为人们的情感需求提供服务。大幅度地提升在社交过程中获取信息的效率。为了不断提高社交平台所能创造的价值，满足人们的社交需求，打造积极生长的健康社交平台成为互联网时代下的重大挑战。在现代，各种社交应用层出不穷，在相互竞争的同时，实现了融合发展。本次开发便是在这一背景下，通过分析市面上各种社交应用的优缺点，结合当前流行的开发方式所完成的。该平台充分考虑了用户的需求以及类似产品的功能不足之处，进行了对应的提升，系统也能够十分方便地进行更新及维护。国内外发展现状和发展趋势社交媒体的起源可以追溯到1971年，这一年便是E-Mail（电子邮件）的诞生年，从此社交媒体便依赖着互联网技术以及智能终端的发展而迅速成长，以各种各样的形式呈现在人们的面前。互联网作为世界发展历程中一场完全改变人类生活方式的传播革命，赋予了公众超越空间和时间传播信息的能力以及权力。在互联网时代，

人们可以即时地交换海量信息，以点对点、点对面、面对点、面对面的形式在网络中进行沟通，当然这种情况能够实现必不可少的还有平台及终端这两个载体。人类对社交网络的细致研究在互联网未出现时便已存在。在1967年，美国哈佛大学的著名心理学教授米尔格兰姆（StanleyMilgram）经过实验发现：两位陌生人之间，最多通过六个人便可以互相认识。这个现象便是著名的“六度分隔”现象，这个现象表明了一个重要的概念，人与人之间必然可以通过一定的联系方式，产生联系或关系。该理论将世界看作是一个互相联系的“六度空间”，空间模型示意图如图1-1。图1-1六度空间模型示意图早期的SNS（SocialNetworkSoftware）社交网络服务，便是根据该理论而创立的一种网络传播的社交模式。从SNS社交网络到如今的全媒体社交网路，这个过程经过了40年的演变。微博（Micro-blog）的概念最早在2006年由美国人威廉姆斯（EvanWilliams）提出，他亦是一款社交平台的创始人，这个社交平台便是全球知名的——特推（Twitter）。推特这个集有线网络、无线网络和即时通讯为一体的交流平台迅速改变了传统的网络传播模式并活跃发展至今，开拓了互联网社交这片疆土。国内在移动互联网时代处于社交应用市场领先地位的开发商有网易、腾讯、新浪等，它们也是国内网络传播模式改革的第一批建设者。新浪微博的出现对中国社会的影响巨大，2010年甚至被称为中国的微博元年。通过分析国内外的社交传播模式可以得出以下结论：社交媒体是顺应时代发展的产物，需要人们通过技术升级以及维护网络生态使其更进一步地得到发展。

研究内容本文所述的开发项目是在对国内外相关开发技术进行充分研究之后所进行的，研究内容包括Web应用开发所需技术及其工作原理。本次开发的社交网站运用HTML5以及CSS3进行静态页面的搭建，并且采用了主流的Bootstrap框架进行网站风格统一化以及构造响应式布局，使界面更加简洁、美观。在选择后端开发语言时充分考虑项目的需求和未来的发展，对目前基于MVC设计模式的主流开发框架进行了多方面的对比后，选择使用在Web开发领域占据较大市场份额PHP语言进行服务端数据交互。网站的数据库使用的是开源、强大的MySQL，通过SQL语句可以对数据进行存取操作，并且支持多种查询方式，方便快捷。本研究将开发一款以社交互动为业务核心的网络社交平台，取名为：ON，寓意着“即时在线、时刻活跃”，网站具有良好的社交特性，用户能从中感受到使用价值。开发目标通过研究多款主流Web社交平台的界面、功能、交互等设计，分析得出社交平台的核心开发要素，确定本次设计与开发的社交平台具有社会化属性，以用户为核心，创造一个自由交流的平台，强调分享和个性化定制的新理念。根据从社交出发的思路，融合自媒体和社交互动的模式，搭建传播与交流的平台，形成活跃的用户社区，在满足用户的社会化需求的同时，提供保留个人私密性信息的空间，隐私信息停留在用户终端上，只有本人可以查看，不会在其他用户的界面被获知。本平台不仅具有上述的社交和媒体双重属性，也可以作为即时通讯工具被使用，实现即时传播的效果。利用平台的聊天功能不仅可以实现文字交流，而且可以互相传递、接收图片以及短视频，成为实用的多媒体通讯工具。在即时通讯这个板块下，构建的是以双向互动为中心的对等网络（P2P），加强了个体之间的直接交流，获取信息的速度相较于传统交流方式如：电话、邮件等迥然不同，沟通效率得到显著提升，充分利用了传播载体创造社交传播价值。本着从“用户的需求出发服务用户”的设计理念，确定平台的各项特性。从功能属性上看，本社交网站不仅是一款即时通讯工具，而且还是一个大型交流社区，具有双重属性，能够互相融合。网站面向的社交网络是多面的，既可以构建熟人社交网络，也可以是陌生人社交网络，或是基于兴趣爱好等构建特色的社交网络。

在这个追求信息传输效率的时代，社交网站的设计初衷并不只局限于提供一个交友的平台，它亦是“微内容”的传播载体。微内容是一种新兴的内容形态，是传播环境碎片化的结果，更适应现代人快节奏的生活习惯。信息含量少、主题离散的微内容能够在短时间内获得大量传播，离不开信息平台的聚合与发布功能，这意味着，信息平台能够为用户提供海量的微内容，也可以提供用户制作微内容的工具，用户阅读与制作微内容所需要的时间短，制作成本低。微内容不仅包含了文字和图片，还有短视频以及音频等多种表现形式，直观具体，传播成本低，受众面广泛。本社交平台项目正是致力于打造新型的信息聚合平台，建立一个开放多元的交流空间，用户可以是读者，也可以是作者。在这个平台上，用户可以自行选择阅读的内容，也可以自由编辑内容进行发布，在这个平台中融合多重身份，在互联网的虚拟社区里创造互动，打造个性。以上为本次社交平台开发目标的详细说明，目标的确定有利于后续的研究与设计，并且制定一个理想的可持续发展模式。网站的核心四大驱动要素为内容形式、社交模式、两类用户（信息消费者、信息生产者），通过下图1-2说明这四者间的关系。图1-2网站核心驱动要素关系图

本文组织结构本文共分为7个章节，各章节的主要内容如下：第一章绪论，概述本次项目的选题目的和意义，并对国内外的相关研究进行分析说明，并且通过研究结果确定开发目标。第二章相关理论与技术，对网站开发所用的核心技术进行详细地说明，分为前端和后端两部分阐述技术原理，并对数据库技术加以解释。第三章网站系统分析，对网站开发涉及的功能性需求及非功能性需求进行全面的分析，确定其可行性。第四章网站的详细设计，根据上述几章的分析，确定网页的设计，说明整体的原型设计及思路。并且将数据库的设计以表格的方式进行详细阐述。第五章网站各项核心功能的实现，按照开发流程详细阐述各功能的实现方法，并且演示效果。第六章网站测试，对开发完成的平台进行系统全面的功能测试，并对测试结果进行分析。第七章总结，将对本次开发的心得及感想作具体的陈述。

相关理论与技术前端技术HTMLHTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。HTML文件可以直接由浏览器解释执行，而无需编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容[[]雪丰盛.HTML5+CSS3[]雪丰盛.HTML5+CSS3程序设计[M].人民邮电出版社,2017.[]吴庆涛,刘超慧,聂荣.HTML5一下一代Web开发标准的核心技术探讨[J].许昌学院学报,2012,30(5):61-63.CSSCSS通常称为CSS样式或样式表，在制作网页时采用CSS主要是用于设置页面的文本内容，比如版面布局（对齐方式、边距、长宽等）、图片外形、组件样式、字体、背景等，对页面整体实现精准控制。操作简易，只需要在指定页面内容的代码中添加对应的规范语言，即可以实现网站的风格化。在目前较为流行的CSS+DIV（层叠样式表单元的位置和层次）布局网站中，CSS起到了无可比拟的美化作用。作为轻量的文本格式，CSS能够有效地优化网页速度，开发者可以直接使用其提供的滤镜效果，不需要大量图片即可实现风格化设定，缩小了文件的体积，下载速度进而得到提升。BootstrapBootstrap是由Twitter公司基于HTML、CSS、JavaScript开发的前端框架，具有简洁、直观的特点，其规整的HTML和CSS书写规范使得Web开发更加快捷，深受开发者的喜爱，成为经久不衰的热门开源项目。Bootstrap自带丰富的CSS

样式、可重用组件以及多种jQuery插件，均支持开发者进行自定义修改，得到符合个人需求的版本。Bootstrap中自带的Web组件包括：导航条、按钮组、下拉菜单、排版、对话框、媒体对象等，使用这些组件可以快速地搭建起一个功能齐全的网站，且不失美感；其自带的jQuery插件共有13个，为组件提供了交互支持，包括：菜单下拉选择、对话弹出框、滚动选择等。经过开发商的不断改进，Bootstrap不再依赖单一的CSS驱动项目，目前不仅具备完善的组件集、插件集等工具库，还拥有灵活的响应式栅格系统。后端技术PHP根据W3Techs数据显示：在最受欢迎的服务器端Web编程语言排行榜中，PHP排名第一，使用率为81.9%，远远领先于其他语言[[]张超.基于PHP[]张超.基于PHP的Web开发框架的设计与实现[D].东北大学,2013.JavaScript使用JavaScript（以下简称JS）对本次开发的网站进行动态行为编程。作为解释性语言，JS可以直接被嵌入前端页面代码中，即时编译且轻量级，被广泛运用于开发Web端的应用。应用JS，开发者可以为网页增添各种各样的动态效果以及功能，向用户提供丰富的人机交互事件。当Web浏览器显示被CSS渲染过后的HTML标记时，若需要在页面中产生交互，例如：验证需提交的服务器数据、行为警告等，都可以通过JS实现。常见的用途还包括：响应浏览器事件、创建和修改cookies等。JS遵从ECMAScript（以下简称ES），以及一些ES的其它实现版本，比如JScript、ActionScript等等，JS成为了其中最为流行的一种规范。JS还是一种多规范式语言，意味着它拥有很多不同的编写代码方式或范式，既可以采用面向对象编程，也可以采用函数式编程。

AjaxAjax的全称为“AsynchronousJavascriptAndXML”，这是一种无需重新加载整个页面便可通过局部刷新获取所需数据的技术。原理是通过JavaScript中一个名为XMLHttpRequest（以下简称XHR）的对象，在避免用户被阻塞的情况下，与网站服务器进行特定数据的交换。在这个过程中，浏览器和Web服务器之间进行了异步数据传输，且这个过程对于用户来说是透明的，因为在用户可视的界面上，看不出任何的变化。但是当XHR对象接收了Web服务器返回的数据后，会对DOM采用回调方法继而在页面的特定位置更新数据，这种技术可以使用户的动作更快速地被Web端应用回应，避免重复发送没有变化的冗余信息。运行原理图示如下图2-1所示。图2-1Ajax运行原理数据库技术MySQLMySQL是一个被广泛运用于Web应用开发的关联型数据库管理系统，它最显著的特点是可以将各种复杂的数据分别保存在不同的表中。MySQL一般在面向客户端的服务器或者嵌入系统中进行工作，与其他数据库管理系统相比，更加快速、可靠且易于使用。在需要重负载生产系统和关键任务时，MySQL也能够有效地发挥作用，甚至可以在大型配置的软件中嵌入它。MySQL系统的整体构造如图2-2所示。

图2-2MySQL系统构造MySQL不仅支持多种操作系统，比如MacOS、Windows、Unix等，而且其支持的编写语言也不局限于一种，使用C语言或者C++均可，实现了数据的可移植性，方便开发人员进行管理。除了上述的优势，MySQL还具有多种特性，可以帮助开发人员完成不同的数据管理需求，比如：支持多线程；内部提供了多种储存引擎；连接数据库的方式有多种。在安全性方面，MySQL采用的是加密传输密码的方式，本质上就是通过主机验证保护使用者账号。MySQL中所使用的SQL语句具有高度完整性，也是其一大亮点。

开发环境开发工具开发所用工具采用列表详述，如表2-1所示。表2-1开发工具序号名称版本备注1WebStorm2017.2.2前端编译工具2DreamweaverCS6后端编译工具3PhotoshopCS6UI设计工具4MySQL5.5.8数据库管理系统5Apache2.2.17网页服务器6phpMyAdmin2.10.3数据库管理界面7Windows10（64位）操作系统硬件环境开发所处的硬件环境采用列表详述，如表2-2所示表2-2开发硬件环境序号名称配置备注1HPPavilion8G内存+1TB主硬盘笔记本电脑2CPU英特尔Corei5-6300HQ处理器

网站系统分析可行性分析开发项目必须要进行可行性分析的原因在于，明确本次项目需要实现的内容，在项目开发的工作中起着至重要的作用，是不能被忽略的前期准备。经济效益分析网站面向用户的客户前端采用开源的Bootstrap前端开发框架，以及免费的CSS、jQuery插件、JavaScript等工具库。开发工具选择破解开放版的Dreamweaver、WebStorm，无须支出费用。在不影响工作效率的情况下，将网站开发过程中的技术、工具成本降到最低。本次开发充分利用了Bootstrap的响应式栅格系统，一次开发便可以搭建多终端适用的前端界面，供持有不同终端设备的用户使用，无须耗费人力及时间分别搭建手机端的和PC端的网站界面，较大程度上降低了对人力的需求，并且缩减了开发周期缩。网站充分遵循“高内聚，低耦合”原则，各功能板块均使用前后端分离的方式实现，降低了后期维护的人力成本，从网站运营的角度看，这样不仅可以节省管理的经济支出，而且提高了网站本身运行的效率。用户只需要在有网络（包括：无线局域网、蜂窝数据）的地方就可以使用本平台，其响应式界面使其没有终端设备的限制，任何设备都可以浏览，并且支持大部分系统（包括Windows、MacOS）。利用平台，用户可以无限地拓展自己的交友圈，而平台可以从用户的拓展行为中获取巨大的流量，以“流量变现”的概念来看，网站具有比较高的商业价值，经济效益与社会效益比较可观。技术可行性分析本社交平台的系统架构采用主流的HTML5技术以及PHP语言，按照BS架构进行用户界面的设计与开发。充分利用这种模式的优势，在服务器上实现网站的各种核心功能，这样既简化了开发流程，也能够为用户的使用带来便利。在实现动态需求的时候，还使用了开源且热门的JavaScript框架——jQuery，配合Bootstrap框架能够让网站完美地实现跨平台，这种响应式框架为网站提供了多终端建设的有效

方法。本次开发所用的技术都是具有多年发展历史的优秀语言，在发展的过程中不断改进，能够适应现代的开发需求和环境，长期占据开发领域的领先地位，多家知名企业的长期选择，PHP语言能够完美地支持Facebook（脸书）运行，Bootstrap框架被运用在美国有线电视新闻网旗下的BreakingNews网站开发中，这些例子足以证明，本次开发所采用的技术均是成熟可靠的。操作可行性分析网站采用的是B/S架构，增强了平台的扩展性，而且数据传输速率快。在对网站进行功能分析时充分研究了用户的操作习惯以及需求，并设计了对应的UI（用户界面），在Web客户端可以直观地看到功能的展示，并且有对应的指示性标语，引导用户进行操作，用户能够获得良好的体验性，交互感强。总体上而言，本社交网站的核心操作是可行的。功能需求分析社交平台既要满足用户维护社交圈子的需求，还要满足获取信息、发布信息等一系列需求。在为用户提供以个人为中心的社交服务的同时，向用户展示公共信息，分别有其他用户发布的公开内容、官方运营的话题内容等，为用户的多向信息交互创造条件。社交平台的开发不仅需要考虑客户端的功能需求，也要保证后台管理系统的完善。可移植性和扩展性应在系统的前期设计时便得到充分考虑，避免因软件或硬件的更替造成数据丢失或其他难以修复的问题。管理界面需要尽可能地可视化，帮助管理员便捷高效地处理问题，在满足需求的同时积极寻求高效的“平滑升级”方式，使管理系统能够更好地承载不断增加的用户流量以及数据信息。

功能设计的核心主要是考虑用户群体的关系互动，基于此，为本平台设计了以下功能：（1）具备完善的个人账户资料及关联要素，便于用户树立在网络中的特色个人标签；（2）具备高效沟通的通讯工具，将其打造成一种强有力的活跃方式，维护社交关系；（3）随时随地可进行内容的分享，激发用户的表达欲，以此维护用户的活跃度；（4）通过好友列表赋予用户管理关系的权力，对话、添加、删除的行为都由用户把握；（5）用户对个人动态（空间）的进行自定义管理，增强用户的投入感与归属感，为用户提供私人发布空间，保护隐私；（6）用户首页展示大量可供阅览的即时信息、新闻、个人动态等，满足用户的群体归属需求以及求知欲。本次基于HTML5的社交平台的功能设计分析如下图3-1。图3-1平台功能设计分析

网站详细设计网站设计原则网站的一切功能的实现和内容的传播应在满足我国法律条规的情况下进行。设置安全有效的身份验证机制，通过授予权限等方法加强平台数据管理的可靠性，保障用户在平台中存储的信息不被泄露。界面设计应该遵循“指示明确”的原则，避免用户产生解读歧义。需要充分考虑网站长期的业务发展，开发过程中尽可能降低各功能间的耦合度，利于后期对整体进行扩展。网站架构设计网站程序框架本社交平台是一个基于BS架构的Web端应用程序。BS架构的应用程序的特点是将平台整体的划分为三层，分别是：展示层、业务层和持久层（又称为数据层）。通过分层，可以直观地理解项目的开发需要和目标，帮助开发者梳理流程，降低代码编写的难度，避免出现代码混乱的情况，有利于前后端的分离开发。更好地延续了网站的扩展性。基于BS架构的前后端传输模式如下图4-1所示。图4-1基于BS架构的前后端传输模式

展示层也就是前端，它的目标很直接、简单，就是响应用户的输入，向业务层（后端）发送请求，获取数据并解析，并将结果输出，反馈给用户。输入是指用户通过外接设备（鼠标、键盘等）在平台中进行的操作，输出就是应用展示用户操作的结果。概括地说，这一层就是为用户提供和网站进行交互的界面。业务层即后端，它的工作内容是接收前端的请求后，负责校验，再取得数据，最后对数据做业务的逻辑处理，返回给前端。这个过程需要调用持久层的数据，进行两端的数据交换，起到了承上启下的作用。相对于数据访问层（持久层），业务逻辑层是调用者；而对于表示层（展示层），它是被调用者[[]季淑微.基于HTML5[]季淑微.基于HTML5的档案管理系统的设计与实现[D].2017.韩安.HTML5WebSocket技术研究[J].电子世界,2013(20):7-8.季嘉明.基于Bootstrap+SSI的跨平台企业管理系统的设计与实现[D].季聿阶.基于HTML5的多媒体自动播放系统的研究与设计[D].上海交通大学.林民山.基于HTML5的高职院校互联网+课堂教学平台的设计与实现[D].[10]黄悦深.基于HTML5的移动WebApp开发[J].图书馆杂志,2014,33(7).[11]闫晓亮.基于MVC设计模式的轻量级PHP开发框架的研究与实现[D].[12]李霞.微博仪式互动的社会心理学研究[D].南开大学,2013.[13]吴信东,李毅,李磊.在线社交网络影响力分析[J].计算机学报,2014(4):735-752.[14]黄伟.基于PHP技术的WEB数据库开发[J].电脑知识与技术,000(003):8-10.[15]王浩百.基于PHP和MySQL的办公室网站设计与实现[D].吉林大学.致谢始于2016年初秋，终于2020年盛夏，转瞬之间，南海求学，四载生涯，将告结束。回顾往昔，感念悠悠过往，尽尘埃落定，收笔作终章。在此论文结束之际，我要向所有期间给予我支持、帮助和鼓励的人表达我最诚挚的感谢。在此特别感谢我的指导老师吴志达老师，论文从选题到完成的整个过程中，每一步我都得到了吴老师的热情帮助和精心指导、纠正。在我的论文经过多次修改后，老师都不厌其烦的给我指正问题，吴老师严谨的治学态度、渊博的专业知识、敏锐的学术眼光、精益求精的精神给我留下了深刻印象，并对我的学习及未来工作产生很大的促进作用，在此特向吴老师致以崇高的敬意及真挚的感谢！感谢在校四年的传授给我知识的每一位老师，是老师们在课堂上的循循善诱和详细指点，为我的专业知识打下了良好的基础，这能够让我在深入学习时，更好地理解与掌握新内容。还需要感谢各位进行答辩工作的老师，即使在今年无法返校答辩的情况下，依旧保持高度的学术钻研精神，组织线上进行有序的答辩工作，为每位毕业学子进行学习成果的检阅，在此向各位老师在此表达感谢，老师，您辛苦了！其次我要感谢我的父母亲人。感谢他们的养育及辛苦付出为我营造的优厚的生活环境，让我衣食无忧的沉浸象牙塔中安心完成学业。求学四载，他们始终操心挂念、默默支持，他们的无私奉献是我不断前进的动力。祝愿我的家人身体安康、和睦美满！感谢我们510宿舍的室友，及我所有的朋友们。大学四年生活是他们给予我温暖与欢乐，帮助与支持，人生最青春的时光，感谢你们都在场。我坚信我们每个人都会有大好前程，拥有美好未来。燕过不先递信，花飞肯候归人，几点余红藏碧绿，对看还疑画讵真。年年误好春。半卷海棠艳影，一笺红杏香魂，若有昆冈终可到，何妨青鸟寄春痕。天知路几分？时光荏苒，白驹过隙，感谢大学这四年对我的栽培浸润，这段日子是我人生中最灿烂的时光，不论时光如何变幻，都将激励我坚毅前行。持久层所包含了开发项目数据库的所有数据信息，保证数据库中的数据进行正常的存储和读取是它的主要工作内容，最常见的为关系型数据库，如本次开发使用的MySQL。MySQL需要靠SQL语句与业务层进行交互，传递指令。SQL语句定义了具有特色的一套语法规则，易于解读和使用。网站的使用者分为功能用户和后台管理人员，都是通过展示层参与网站的信息交换，平台的体系架构如图4-2所示。图4-2平台的体系架构

网站页面设计ON社交平台的开发主要是为了满足用户的社交需求，为广大用户提供一个能够自由交流的空间，前端界面设计的核心理念是“简洁直观”，一般的用户能够无障碍使用。用户进行简单的操作，比如点击按钮和填写文本等，就可以传送简单的交互命令，服务器可以通过这些命令进行数据分析，再将用户需要的数据分离出来在前端清晰地向用户展示。页面均为兼容多终端的响应式设计，页面会根据不同的终端自动进行分辨率的调整，使用不同终端的用户都可以得到良好的使用体验。网站中的每个页面都具备了导航栏，用户想要切换不同的功能界面只需要使用导航栏便可以方便快捷地转跳。主页导航栏具有4个不同的导航页签，分别是广场、好友、动态以及个人，用户在登陆后首先进入的是广场，广场中展示的是用户好友发布的动态以及官方发布的话题内容或新闻等，在这个页面，用户可以自由浏览各种内容，直接点击页面上方的导航栏页签可以直接转跳到其他页面，在好友栏页面可以查看好友列表，选择好友进行对话。在个人页面，可以发布不对外公开的私人动态，并且可以对已经公开的动态或者私人动态进行删除，操作简单且方便。网站导航结构如图4-3所示。图4-3导航结构图

根据以上各项功能分析和需求分析，在明确开发目标和网站系统结构以后，对网站原型进行设计，设计需要充分考虑开发原则以及用户需求，致力打造美观与实用并存的平台界面。首先对广场首页进行设计，需要从多个角度考虑设计的走向。首先要对信息量的承载程度进行考虑，设计大小合理的容器盒子，用于容纳流动的大量信息；其次，需要突出网站的核心功能——动态分享，优先确定其位置；最后，在突出功能的同时，要保证网站整体风格的协调，信息展示的完整性。通过上述简要的分析概括，设计出广场首页的原型如下图4-4.图4-4首页原型图在好友页面需要展示清晰的好友列表，通讯窗口居中，列表可容纳一定量的好友数，并且可以滚动列表进行查询。列表与聊天窗口并列展示，便于切换通讯的对象，方便日常使用，设计出的好友页原型图如下图4-5。

图4-5好友页原型图收藏页主要是对用户在网站中的收藏进行展示与管理，每项收藏内容都采用相同的展示方式，横向对齐排列，使布局整齐，内容一目了然。收藏页面原型如下图4-6。图4-6收藏页原型

个人页面向用户陈列了已发布的公开动态和隐私动态，隐私动态在页面中呈折叠状态，点击可展开，具友好的隐私承载性质。用户可以在当前页面编辑发表隐私信息，也可以对已发送的公开动态及私人信息进行删除管理。个人页面原型如下图4-7。图4-7个人页原型网站功能模块设计网站整体开发流程本社交网站的整体开发流程分为前期、中期、后期三个流程，每个流程之间的联系紧密，迭代进行。前期流程包括：通过调研确定需求、网站框架构想、页面原型设计；中期流程包括：页面风格设计、前端技术开发、后端部署开发；后期流程包括：前后端对接、内容录入、测试调整、发布验收。开发流程联系说明如下图4-8。

图4-8开发流程联系网站注册登录在注册与登录的模块中，可以新增用户信息并配置对应的权限，在登陆时直接通过身份验证进入网站。账号注册需要遵守一定的命名规则，比如：不允许出现空格和符号等，避免用户数据出现混乱，便于管理。注册账号名时使用了错误字符，平台会向用户进行详细的错误提示，指引完成注册。注册完成后，系统将会自动转跳至登陆界面，输入准确的账户密码，便可以链接数据库，进入个人的网页。用户进行注册和登陆的流程如下图4-9。图4-9注册登录流程

动态发布个人在本网站可发布的信息分为公共动态及私人动态，公共动态直接在首页进行编辑发布，私人动态可以在个人中心进行编辑发布，两种动态面向的群体不同，前者可供所有好友及使用网站的用户浏览，后者只能由自己查看。动态编辑完毕发布后，无需重新刷新整个页面，平台可以使用Ajax回调指令在页面中局部刷新，显示新发布的信息。动态发布的流程如图4-10所示。图4-10动态发布流程动态删除使用JQuery中的删除函数，用户可以即时对已发送的动态的进行删除，删除后无需整体刷新页面，Ajax能够与服务器进行部分数据交换，删除动态后用户可以正常进行其他操作。使用JQuery.js来实现Ajax和dom删除为平台整体的开发带来了便捷，后端管理系统中亦运用了这种方法进行网站内容的管理。动态（或信息）删除的流程如图4-11所示。图4-11动态（或信息）删除流程

动态评论在评论页面的前端为评论按钮添加点击事件，与Bootstrap的输入弹窗modalform关联，实现评论的PHP方法是，当用户发表评论时，评论的内容将被写进数据库中，并进行页面的刷新，这时将用Ajax方法完成对评论的读取，在刷新页面时，将评论的内容读取出来，并按时间在评论面板依次读出。后端将会进行评论数量的循环，每写入一条新评论，数量显示加一，评论的回复将在最后放进新的数组中。动态评论的流程如下图4-12所示。图4-12评论动态流程数据库设计概念结构设计通过E-R模型图对网站的数据库结构进行描述，一般使用实体、关系以及属性这三个E-R模型的基本概念进行说明。在本平台的数据库设计中，实体与联系两者之间的属性繁多，在本段不逐一描述。平台系统的E-R图如图4-13所示。图4-13平台系统E-R图

在平台系统的E-R模型中，每个实体都具有不一样的属性。（1）功能用户的属性如图4-14所示。图4-14功能用户实体属性图（2）功能菜单的实体属性图如图4-15所示。图4-15功能菜单实体属性图（3）用户角色的实体属性图如图4-16所示。图4-16用户角色实体属性图

（4）网站管理的实体属性图如图4-17所示。图4-17网站管理实体属性图数据库设计思路本平台在设计数据库时主要考虑个人账号信息以及动态信息的存储，并且需要保证两者之间的联系。信息包括文字、图片以及视频，可以将信息与用户看作两类实体。因此，平台数据库分别设置了news和users两类实体集作为信息和用户信息的存储容器。其中users用于存放功能用户的信息，news用于存放用户发布的内容，news_comment为用户评论内容的存储器。本平台的数据库还设置了存储管理员信息的admin表，系统可以通过已经存储的管理员登录信息，在有人登陆管理后台时，对登陆者的身份进行校验。前后台发布的信息内容都有其对应的不同分类属性，便于管理员分类以及管理信息。后台管理员所发布的公告内容使用名为posts的实体集存储。本平台的数据库汇总如表4-1所示。

表4-1数据库表汇总表名中文名称描述admin_users管理员存储系统后台管理员的编号、密码等信息users用户存储用户的详细资料news公开动态存储用户发布的公共动态posts公告存储后台公告内容news_comment动态评论存储用户的评论本平台中每个数据库表的详细信息均以表格的方式说明。表4-2admin_users管理员信息表列名数据类型长度主键允许空说明idint11是否编号usernamevarchar255否否管理员名称passwordvarchar255否否管理密码表4-3users用户信息表列名数据类型长度主键允许空说明idint11是否编号usernamevarchar255否否用户名称passwordvarchar255否否用户密码

表4-4news动态内容信息表列名数据类型长度主键允许空说明idint11是否编号user_idint11否否用户名称contentvarchar200否否动态内容create_timetimestamp否是发布时间表4-5posts公告内容信息表列名数据类型长度主键允许空说明idint11是否编号user_idint11否否用户名称contentvarchar200否否公告内容create_timetimestamp否是发布时间表4-6new_comment动态评论信息表列名数据类型长度主键允许空说明idint11是否编号news_idint11否否动态编号comment_idint11否否评论编号user_idint11否否用户名称contentvarchar200否否评论内容create_timetimestamp否是评论时间

网站主要功能的实现注册登录实现方法为前端注册页面中的信息输入表单分别命名为“username”和“password”，使用Ajax中的post函数向后端提交数据，当后端接收数据并进行了正确的反馈后，回调函数执行，跳转至登录页面，即可输入注册的账号与密码登陆。核心代码如下：function

checkForm(form)

{

var

add_name

=

checkName();

var

add_password

=

checkPassword();

var

upassword

=

checkUpassword();

if

(add_name

&&

add_password

&&

upassword)

{

$.post(location.href,

$(form).serialize(),

function

(data)

{

if

(data.code)

{

Swal.fire({

icon:

'success',

title:

'登陆成功，正在进入主页',

timer:

5000,

showConfirmButton:

false

});

location.href

=

'../PHP/login.php';

}

else

{

Swal.fire({

icon:

'error',

title:

'无法注册',

text:

'用户已存在',

footer:

'<a

href>看看昵称推荐？</a>'

});

}

},

'json');

return

false;

}

else

{

return

false;

}

}

本网站均使用美观的、响应式的JavaScript动态弹窗代替原生的alert弹窗，增强了网站整体的交互体验。为了防止用户在取账户名时出现大量不规则、不合法的字符，需要在前端加入对账号名进行检查的函数方法，用来限制用户的取字范畴，规定合法字符，以便于网站的后期管理。核心代码如下：function

checkName()

{

var

inputNode

=

document.getElementById("add_name");

var

spanNode

=

document.getElementById("user_name");

var

nameLength

=

document.getElementById("add_name").value.length;

var

content

=

inputNode.value;

var

reg

=

/^[a-zA-Z

]*$/;

if

(content

==

"")

{

spanNode.innerHTML

=

"不能为空".fontcolor("red");

return

false;

}

if

(nameLength

>

15)

{

spanNode.innerHTML

=

"姓名长度过长".fontcolor("red");

return

false;

}

if

(reg.test(content))

{

spanNode.innerHTML

=

"正确".fontcolor("green");

return

true;

}

else

{

spanNode.innerHTML

=

"只允许字母跟空格".fontcolor("red");

return

false;

}

}

后端进行数据交互的步骤主要是：首先通过isset函数判断是否获取了表单信息，再通过mysqli_real_escape_string转义字符函数向数据库发送插入信息的请求命令,连接数据的动态文件名为model.php。当函数能够返回结果时，说明数据库中已有相同的账号和密码，此时，后端将会向前端返回一段Json字符串，前端通过解析这段字符串输出“用户已存在”的文本提示内容，不执行注册行为。当mysqli_num_rows函数不能返回某个结果时，说明数据库里没有相同的账号信息，这就意味着这条新的账号信息可以被插入数据库，注册新账号的前提成立。这时，前端由Ajax更新注册信息后页面将自动转跳至登录页面。

<?php

header('charset:

utf-8');

require

'model.php';

if

(isset($_POST['add_name'],

$_POST['add_password'],

$_POST['upassword']))

{

$username

=

mysqli_real_escape_string($conn,

$_POST['add_name']);

$password

=

mysqli_real_escape_string($conn,

$_POST['add_password']);

$result

=

mysqli_query($conn,

"SELECT

*

FROM

`users`

WHERE

`username`

=

'$username'

LIMIT

1");

if

(mysqli_num_rows($result))

{

exit(json_encode(array('code'

=>

0,

'msg'

=>

'用户已存在')));

}

else

{

mysqli_query($conn,

"INSERT

INTO

`users`(`username`,

`password`)

VALUES

('$username','$password')");

exit(json_encode(array('code'

=>

1,

'msg'

=>

'注册成功')));

}

}

else

{

require

'../html/register.html';

}

?>

功能演示如下图5-1、图5-2、图5-3所示。图5-1账号密码字符不合法

图5-2用户已存在图5-3注册成功

进入注册页面后，根据用户名和密码查找用户，找到对应用户，登录成功，并设置登录标识（cookie），输出登陆成功的弹窗信息，并转跳至账号首页。未找到对应用户时，将根据输入的内容判断错误的原因，并弹出警示框向用户进行提示。功能演示如下图5-4、图5-5所示。图5-4登录界面图5-5账号密码错误提示

首页前端显示网站整体使用Bootstrap框架搭建，利用了它款式众多的组件，为前端网页开发的工作节省了大量的时间及人力。首先在首页顶部放置其自带的默认导航栏navbar-default，需要在navbar导航栏下创建一个装载导航内容的<ul>列表，再将导航内容逐一放进其下的<li>标签中；其次在导航栏内放置默认搜索框按钮btn-default；可以通过dropdown属性设置列表，点击后可以下拉；在导航栏内放置navbar-header容器，并设置属性为navbar-brand，可以在其中放置网站的LOGO。网站首页所用的HTML结构设计的如下图5-6所示。图5-6网页HTML结构图网站使用的panel是一种信息面板，可以用来容纳多种形式的内容，网站整体采用的是panel-info属性的面板，维持页面的颜色协调。网页的核心内容，如文本编辑框、信息框等，均采用panel-info进行容纳。Panel的结构如下图5-7所示：图5-7Panel结构图网站主页使用了配套的Bootstrap组件，以蓝色和灰色为主题色调，整体风格一致。可浏览图文信息，以及播放视频，成品如下图5-8、图5-9、图5-10所示。图5-8主页展示图

图5-9浏览图片图5-10播放视频

分享功能实现方法当用户处于首页时，如需发布动态，可以直接在首页的编辑栏里输入内容，用户在点击发送按钮时，后端数据交互如下：先由isset函数判断是否有已登录的用户信息被存储在COOKIE中，然后查找数据库中的用户登录信息，若能够找到，则登陆有效，如果未找到，则说明登陆无效，系统将会自动返回登录界面。发布内容时，首先需要判断输入的内容是否为空，使用的判断函数为isset函数。其次判断输入的内容是否合法，若确定合法，mysqli_real_escape_string函数将对数据库发送的SQL语句中的特殊字符进行转义，也就是将用户需要发布的内容发送至数据库对应的表中进行存储。发送成功后，则向前端输出Json编码的新动态，若失败则返回false，无法显示。核心代码如下所示：<?php

require

'model.php';

if

(isset($_COOKIE['username'],

$_COOKIE['password']))

{

$username

=

mysqli_real_escape_string($conn,

$_COOKIE['username']);

$password

=

mysqli_real_escape_string($conn,

$_COOKIE['password']);

$result

=

mysqli_query($conn,

"SELECT

*

FROM

`users`

WHERE

`username`

=

'$username'

AND

`password`

=

'$password'

LIMIT

1");

if

(mysqli_num_rows($result))

{

$user

=

mysqli_fetch_assoc($result);

}

else

{

header('Location:

./login.php');

exit();

}

}

else

{

header('Location:

./login.php');

exit();

}

if

(!isset($_POST['content'])

||

$_POST['content']

==

'')

{

exit(json_encode(array('code'

=>

0,

'msg'

=>

'内容不能为空')));

}

$content

=

mysqli_real_escape_string($conn,

$_POST['content']);

mysqli_query($conn,

"INSERT

INTO

`news`(`user_id`,

`content`)

VALUES

('{$user['id']}','$content')");

exit(json_encode(array('code'

=>

1,

'msg'

=>

'发布成功')));

?>

在前端获取用户的表单信息并向后端提交数据的是Ajax的Submit函数，此函数是JQuery中的一个事件触发函数。对用户发起的提交请求进行保存后，后端返回的数据格式统一为Json，此操作的最后必须返回false，主要是为了阻止表单自动提交事件，若没有在最后返回false，表单将会在结束请求后再做一次提交操作。若判断输入的内容是空值，将出现弹窗提醒。核心代码如下：$('#send').submit(function

()

{

$.post(this.action,

$(this).serialize(),

function

(data)

{

if

(data.code)

{

Swal.fire({

icon:

'success',

title:

'发布成功'

});

location.reload();

}

else

{

Swal.fire({

icon:

'warning',

title:

'内容不能为空'

});

}

},

'json');

return

false;

});

功能演示如下图5-11、图5-12、图5-13，发布成功会有弹窗提示，点击确定后，新动态将直接在首页动态最前方出现。图5-11空内容输入提醒

图5-12发布成功提醒图5-13动态在首页显示

删除动态实现方法用户可以在首页对发送的动态进行删除操作，也可以在个人中心删除私人动态。平台系统同样是在确定当前登录信息后，向数据库发送删除请求。以下为后端代码：<?php

require

'model.php';

if

(isset($_COOKIE['username'],

$_COOKIE['password']))

{

$username

=

mysqli_real_escape_string($conn,

$_COOKIE['username']);

$password

=

mysqli_real_escape_string($conn,

$_COOKIE['password']);

$result

=

mysqli_query($conn,

"SELECT

*

FROM

`users`

WHERE

`username`

=

'$username'

AND

`password`

=

'$password'

LIMIT

1");

if

(mysqli_num_rows($result))

{

$user

=

mysqli_fetch_assoc($result);

}

else

{

header('Location:

./login.php');

exit();

}

}

else

{

header('Location:

./login.php');

exit();

}

if

(!isset($_POST['id'])

||

$_POST['id']

==

'')

{

exit(json_encode(array('code'

=>

0,

'msg'

=>

'请选择要删除的内容')));

}

$id

=

mysqli_real_escape_string($conn,

$_POST['id']);

mysqli_query($conn,

"DELETE

FROM

`news`

WHERE

`id`

=

'{$id}'");

exit(json_encode(array('code'

=>

1,

'msg'

=>

'删除成功')));

?>

前端使用Ajax进行获取用户的删除指令，并对后端进行部分数据的传输，在确定指令前，弹出询问操作的警示对话框。数据交互完成后，使用location.reload方法，重新载入文件，对页面局部进行刷新。前端请求操作的核心代码如下：<script>

$(document).ready(function

()

{

$('.delete').click(function

()

{

swal({

title:

'确定删除吗？?',

type:

'warning',

showCancelButton:

true,

confirmButtonText:

'确定删除',

cancelButtonText:

'Cancel',

}).then(function(isConfirm)

{

$.post('./admin-id-delete.php',

{id:

this.dataset.id},

function

(data)

{

if

(isConfirm

===

true)

{

swal(

'已删除',

'success'

);

}

else

if

(isConfirm

===

false)

{

swal(

'已取消',

'error'

);

}

else

{

}

});

});

});

});

</script>

执行删除操作前，系统将会进行弹窗询问，点击确定删除后，将会得到删除成功的弹窗反馈。个人动态页面如下图5-14，功能演示如下图5-15、图5-16。

图5-14个人动态页面图5-15删除个人动态

图5-16删除已完成评论动态实现方法评论所用的输入框采用的是Bootstrap模态框，为评论的按钮添加点击事件的函数（onclick）。首先需要确定点击后获取的组件元素，在函数中添加JQuery的parent方法，选中panel面板，并找到它的子元素，也就是放置评论相关信息的列表，在显示评论列表的同时，弹出评论输入框，并获取此时数据库中对应容器表的动态编号、评论编号以及评论内容，再将以上信息显示在列表中。在后端添加一个存储评论数的数组，初始的值为0，当在数据库中取得值时，意味着有新的评论发布，这时将在数组中增加1，前端便可以显示具体的评论数量。 以下为实现评论功能的核心前端代码：$('.comment').click(function

()

{

$(this).parents('.panel').find('.comment-list').show(500);

$('[name="news_id"]').val($(this).data('newsid'));

$('[name="comment_id"]').val($(this).data('commentid'));

$('[name="content"]').val('');

$('#comment-modal').modal({show:

true});

});

以下为实现评论功能的核心后端代码：while

($res

=

mysqli_fetch_assoc($result))

{

$res['comment_count']

=

0;

$comment_result

=

mysqli_query($conn,

"此处编写具体的sql语句");

$res['comment']

=

array();

while

($comment_res

=

mysqli_fetch_assoc($comment_result))

{

$sub_result

=

mysqli_query($conn,

"此处编写具体的sql语句");

$comment_res['comment']

=

array();

while

($sub_res

=

mysqli_fetch_assoc($sub_result))

{

$res['comment_count']++;

$comment_res['comment'][]

=

$sub_res;

}

$res['comment_count']++;

$res['comment'][]

=

$comment_res;

}

$news[]

=

$res;

}

功能演示如下图5-17、图5-18所示。图5-17输入评论

图5-18新评论发布后显示在最顶部即时对话实现方法根据网站的设计目标并且充分考虑功能的实用性，采用传统的方式，即Ajax短连接模式配合PHP语言实现功能。实现的方法思路是，在发送信息时，Ajax异步传输数据至服务器，同时，需要设置一个定时器用于不断发送异步请求以获取对话列表中的内容，否则，请求结束后http短连接将会断开链接。为避免服务器负载，刷新数设不能过于小，合适的时间是1至3秒。此方法的优势在于，无须与数据库进行信息的存储与获取操作，加载信息的速度快，符合网站追求社交效率的理念，大体与目前流行的“阅后即删”思想相一致。用file_get_contents函数读取整个对话页面的信息文件，在网页的文本区域，也就是对话区域，使用fopen函数将对话信息文件打开，然后再通过fputs函数将需要显示的信息写入文本区域，可以自行设置显示的格式与内容。在创建了XMLHttpRequest对象后，通过open命令连接服务网页，并将获取信息的请求发送至服务器，当请求完成并且响应完毕后，便开始执行刷新消息的任务。以下为实现对话功能的核心前端代码：

var

xmlobj;

var

count=0;

function

createXMLHttpRequest(){

if(window.ActiveXObject){

xmlobj=new

ActiveXObject("Microsoft.XMLHTTP");

}

else

if(window.XMLHttpRequest){

xmlobj=new

XMLHttpRequest();

}

}

function

Autofresh(){

createXMLHttpRequest();

count=count+1;

xmlobj.open("GET","?id=msg&count="+count,true);

xmlobj.onreadystatechange=doAjax;

xmlobj.send("r="+Math.random());

}

function

doAjax(){

if(xmlobj.readyState==4

&&

xmlobj.status==200){

var

time_span=document.getElementById('msg');

time_span.innerHTML=xmlobj.responseText;

setTimeout("Autofresh()",1000);

}

}

以下为实现对话功能的核心后端代码：<?php

if($_COOKIE['用户名']==null){

$user=$_POST['username'];

}else{

$user=$_COOKIE['用户名'];

}

$news=$_POST['news'];

$id=$_GET['id'];

$url="chat.php";

setcookie('用户名',$user,time()+10*60,'/');

if($id=="send"

&&

$user!=""

&&

$news!=""){

$wenjian=file_get_contents("news.txt");

$a=fopen("news.txt","w

w+");

fputs($a,$news."：".$user."\n\n".$wenjian);

fclose($a);

header("Location:$url");

}else

if($id=="[清除]"){

setcookie("用户名",

'');

unlink("news.txt");

header("Location:$url");

}

?>

功能演示如下图5-19、图5-20所示。图5-19在对话框中输入信息图5-20信息已发送

个人收藏页面个人收藏页面主要展示个人在网站中收藏的内容，包括音乐、书籍及讨论的话题等。本网页为Bootstrap与自定义CSS搭建的静态模型网页，用于浏览其中包含的多媒体信息。页面如下图5-21所示。图5-21个人收藏页

后台管理系统平台的管理人员可以通过后台管理系统，对网站进行数据的管理和维护。界面整体采用的是Bootstrap的开源后台框架，再根据网站的需求做对应的更改。界面风格与网站整体色调相同，能够保持网站整体的调性。网站管理系统的实现方法与网站功能的实现方法一致，降低了开发成本，更有利于提升系统的跨平台性，维护和升级更加便捷。系统实现的主要基础功能如下表5-1所示。表5-1后台系统基础功能表后台管理系统功能项描述用户管理浏览所有用户的信息、删除指定用户动态管理浏览用户发布的动态、删除指定的动态管理员管理浏览所有管理员的信息、删除指定的管理员公告发布创建特定的管理信息、管理信息向管理员公开管理系统主页面在管理系统主页面主要显示待处理的任务和信息，能够查看其他的在线管