基于web的日记同享网站

基于web的日记同享网站Web-baseddiarysharingsite在当今社会，互联网对人民生活的影响日益增大，它给人民带来了便利，让人民更了解社会，丰富了娱乐活动，甚至习惯了网络工作生活，因此，随着不断的完善，越来越多的人追求物质美和精神享受，人们也热衷于记录，去分享自己的所学所感，而日记同享网站能够很好的满足这一需求，通通过共享文本，照片，文档等，我们记录了积极的能量和美好的生活。其次，它不仅是一个在线社区，而且还是一个共享平台，因此用户可以提出疑问并分享他们的共享需求。本次毕业设计基于MVVM开发模式,以phpStudy为开发环境，用AdobeXD及Photoshop软件设计板块，采用PHP+MYSQL动态网站开发技术，研究和开发了一个面向所有用户的分享生活、交流观点、互帮互进以及资源贡献的网站平台。本篇论文就日记同享的开发背景、现状等和在过程中使用的环境和技术，以及它的分析、主体设计、功能的实现、系统测试等几个方面展开分析论述。关键词：MVVMphpStudy动态网站开发AdobeXDPHP+MYSQL分享AbstractIntoday'ssociety,theinfluenceoftheInternetonpeople'slivesisincreasingdaybyday.Ithasbroughtconveniencetothepeople,letthemknowmoreaboutthesociety,enrichedentertainmentactivities,andevengotusedtoworkingandlivingontheInternet.Therefore,withcontinuousimprovement,moreandmoreThemorepeoplepursuematerialbeautyandspiritualenjoyment,peoplearealsokeentorecordandsharetheirlearningandlearning,andthediarysharingwebsitecanmeetthisdemandwell.Bysharingtexts,photos,documents,etc.,werecordApositiveenergyandagoodlife.Second,itisnotonlyanonlinecommunity,butalsoasharingplatform,souserscanaskquestionsandsharetheirsharingneeds.ThisgraduationdesignisbasedontheMVVMdevelopmentmodel,usesphpStudyasthedevelopmentenvironment,usesAdobeXDandPhotoshopsoftwaretodesigntheboard,usesPHP+MYSQLdynamicwebsitedevelopmenttechnology,researchanddevelopasharedlife,exchangeviews,andhelpeachother.Websiteplatformformutualadvancementandresourcecontribution.Thispaperanalyzesthedevelopmentbackground,currentsituation,etc.ofthediarysharing,theenvironmentandtechnologyusedintheprocess,aswellasitsanalysis,maindesign,functionimplementation,andsystemtesting.Keywords：MVVMphpStudydynamicwebsitedevelopmentPHP+MYSQLShare目录1.课题绪论 课题论述1.1研究背景随着社会的网络化趋势，互联网颠覆人们的生活方式与学习方式。在生活方式上，在线上平台与他人进行互动交流变成了时兴方式，人们也时常会在网络平台上发布自己的生活感想或创作展现自己；人们通常会在学习期间发现需要解决的问题后便立即在Internet上寻找答案。用户共享的观点，想法，经验和观点不断通过Internet注入高质量的内容，以帮助人们快速有效地寻求知识，以找到问题的答案。由于信息社会的变化，人们的生活已离不开互联网，如今，网络已成为新世纪的主要平台，而现在关于“种草”社交网络主要均为手机端，以App为主，网页PC端的目前相对没那么完善，均是分开的专题各网站，对很大部分工作人员和大学生来说不是很方便。而日记同享本着单纯分享和共享的初心，将日志进行分类，将资源进行整合，让用户在日常生活中发现共享和惊喜，拥有更好的用户体验。1.2国内外研究现状社交网站从2003年在美国逐渐兴起后，发展至今，人民的生活几乎离不开社交平台，尤其自Web.2在2001年面世之后，在互联网中广泛应用，社交网站成为Web.2使用最广泛的区域。随着互联网的发展，分享网站因强大的搜索引擎和网络宽带的迅速提升的技术支持，现今，分享网站社区已成为互联网的主流网站，它之所以赢得大部分网民的青睐，主要还是大众所需的资源可以免费分享。新浪微博，国家社交交流门户平台之一，是一个在线平台，用于基于用户关系共享，传播和获取信息。据网络查询显示，2013年3月，微博注册用户达到五点多亿人，短短几年时间，用户数量剧增；资源分享学习平台之一CSDN.NET,仅致力于为软件开发者提供知识的中文IT技术社区，根据其官方网站数据显示，CSDN平台资源注册用户至今达到2700万，流量日均PV2100万。在国外的社交分享平台，如Facebook，Twitter等都在不长的时间里用户数量剧增。Facebook平台开放后大获成功，半年之内用户从2400万增加到了7000万，在平台运行的程序也达到了250000个。[1]美国AOL在线门户网,据网络查询运营分析显示，在全球它曾经超过3400万用户，它将各类网站或公司的资源整合到一起，利用客户数量优势，通过向商家收取服务费为其提供推广平台，经过不断的发展，购物、新闻、旅游、娱乐等都有涉及，服务范围广泛，成为全球最大的网站之一。尽管随着移动互联网的崛起，网民使用手机上网的趋势上升，但PC端并不会衰退。如果人们与信息交互的方式发生了变化，PC仍然是必不可少的，例如目前正在进行的工作是内容创建。同样的，世界1000强企业和政府机构也得依靠PC来完成基础工作。[2]各种数据表明，社交分享平台让仍有很大的发展空间，尤其是日常社交和资源整合的网站更是少之又少。1.3研究的目的和意义在科学技术的发展下，生活质量的提高，越来越多的人追求物质美和精神享受。而现在的人群几乎都有自己的手机，家里至少有一台电脑，人们也热衷于记录，去分享自己的所学所想和所感，而日记同享网站能够很好的满足这一需求，通过共享文本，照片，文档等，记录了积极的能量和美好的生活，其次，日记同享为寻找攻略的人们提供更便捷的途径，来于本人亲身的经历分享和推荐，相比商家和其他广告推荐要更全面，更真实。日记同享是基于当前研究主要内容中所包含的日常知识交流的行为特征，例如共同态度的差异，共同意愿的大小，共同行为的类型，共享知识的数量和质量等为用户提供良好的分享共享环境，为用户提供便利的资源查找条件。此外，日记同享系统更注重单纯分享和共享，它不仅是一个在线社区，还是一个共享平台，因此用户可以提出疑问，在共享中获取自己需求。1.4论文组织结构这次的论文主要介绍了分享和共享网站的开发和设计和实现，分六个章节描述设计的过程和思路。第一章节为课题绪论，介绍日记同享的开发背景、现状以及开发它的意义等。第二章节介绍了此次开发所用的技术和开发环境。第三章节为网站的系统分析，介绍了用户的需求分析、功能细述和用户示例图。第四章节为网站的系统设计，介绍了界面设计软件简介、系统的模块设计、系统时序图、数据库ER图和数据库的表单设计以及实现流程，为网站实现奠定基础。第五章节为系统实现，介绍了日记同享系统的功能实现。第六章节为日记同享的的系统测试，介绍了为什么要进行系统测试和用实操测试示例。后面依次为参考文献和致谢。2.网站开发环境和技术2.1MVVM开发模式简介MVVM是一种在Web前端流行的开发模式，它是由Model-View-ViewModel的缩写，在开发上也叫模型-视图-视图模型，它的可以说是MVC模式的一种加强改进版本。模型（Model）——指的是后端传递的数据，在Model层中，不管是数据还是业务逻辑都在这里定义；视图（View）——指的是所看到的页面，它主要担任数据的展现；视图模型（ViewModel）——它是MVVM模式的主要核心，担任监听Model中数据的改动以及实现DOM监听事件，它是衔接view和model的桥梁，处理用户交互操作。使用MVVM可以使咱们不需要太过关心DOM操作，而更专注于处理业务逻辑，通过函数处理Model，更一步的规划了页面布局和页面跳转。容易被阅读、测试、维护、替换、扩展和改进。[3]使用MVVM为开发模式有很多可取之处，具有低耦合，可重复性，独立开发和可测试等优点。因此，此次毕业设计选择它为开发模式。2.2PhpStudy集成环境简介在PHP动态网页设计中，假如没有一个集成开发环境，那么我们需要将编程所需用的软件意义安装并将参数设置完成，如网页设计软件Dreamweaver、数据库服务器MySQL、PHP代码书写工具phpMyAdmin以及web服务器软件Apache等等，这将耗费很长的时间，尤其是像学校、培训室和公司等几十台电脑要逐台安装将更加繁琐耗时。PhpStudy集成了Apache＋PHP＋MySQL＋phpMyAdmin＋ZendLoader等工具合集,是十分方便、好用的PHP、MySQL环境调试工具。[4]目前最新版本为phpStudyv8.1，它不只支持最新php、mysql版本，并且不影响在不一样的站点选择不同版本php和mysql，界面全新，使用FTP服务器，多用户支持，带有网络安装的马监视器，支持系统服务和无服务启动方法，您可以随时记录文件修改，可以在操作后更改路径或在运行时复制到其他计算机，其集成软件PHP5.2.17，PHP5.4.23，PHP7.0.12和其他新的CGI编程语言不但易于学习和运用，并且跨平台，非常快速；最受欢迎的Apache2.4.7HTTP服务器软件；MySQL5.5.35，十分棒的数据库，运转速度快，容易运用且执行功能高，简单方便，其附带的工具也比较齐全是较为合适的开发集成环境。由于它非常方便好用，为此，此次毕业设计选择了PhpStudy作为开发集成环境。2.3动态网站开发技术简介随着互联网和社会经济的开展，互联网成为人们获取信息和交流的另一种主要方式，网站能够分为静态网站和动态网站。动态网站是运用对应的技术生成的网页，和界面呈现的效果不直接相关。因此完成一个静态网页的制作，只需用到HTML与CSS就可以完成，所以我们常用HTML+CSS代表制作一个标准网页的技术。[12]而与用户进行交互仅支持静态文字和图片的静态网页以不再满足于当代社会，尤其是电商的发展，更是让动态网站的开发飞速的提升，它的技术已站在了网络技术的最前沿，CGI技术主要用于早期刚开始发展的动态网页。随着发展，这种编程不简单，复杂的修改技术慢慢的被新技术取代，现如今常用的主要动态网页语言是ASP，PHP，JSP等，使用单独的编程格式进行的现有动态网站开发通常很容易受到攻击，而且不是很安全，PHP技术的出现有效的调整了传统动态网站开发模式的弊端。[5]本次毕业设计基于MVVC为开发模式，运用HTML、JavaScript、CSS、Vue框架开发语言等完成前端页面成果，用PHP语言和MySQL数据库以及内容管理框架完成后台页面。JavaScript作为网络编程中主要应用的脚本语言，其性能提升对开发计算密集型Web应用意义重大，[8]框架通过将两者界面分别独立很好的解决了后台管理界面用户体验度问题，[7]通过接口完成前后端的数据交互，形成动态网站。Vue是一套渐进式的JavaScript框架，用于构建用户界面，使用vue.js不仅简单快速，组合强大，对模块也友好，因而VUE.JS这种基于MVVM架构模式的前端应用技术应时而生，[6]使用PHP和MySQL开发动态网站具有很好的移植性和扩展性，跨平台语法简单、性能也比较强。3.网站系统分析3.1用户需求分析为了更好的满足用户的需求，为了更好的了解客户需要什么，在设计和开发一个系统之前，通常需要先进行需求分析，避免出现期望差异。假如耗费了大量的精力和下了重大工夫开发一款软件，最后客户不满意，不满足客户要求就得重新返工，或者在还未搞清楚客户真正要的是什么就投入大量的时间、精力和人力等去开发一个系统或软件，最后没人要也是很得不偿失的。此次毕业设计的日记同享网站主要从分享者和浏览者的角度出发，对他们的需求进行了分析。1.分享者的用户需求：（1）美观、简洁、清新的操作界面；（2）分享自己的日常生活，展现自我，既可回顾自己的生活又能得到他人的欣赏和回应；（3）共享自己的一些资源和经验教程帮助他人，既巩固了知识又实现了自己的价值；（4）共享的资源能上传图片、文件等素材供他人下载；（5）能被关注且有问题需要咨询的能够相互私信交流；2.浏览者的用户需求：（1）美观、简洁、清新的浏览界面；（2）浏览自己感兴趣的、需要的、他人“种草”的页面，给自己提供参考；（3）寻找自己所需求的资源，帮助自己更好的学习，甚至从解决自己的问题；（4）共享的资源文档、文件等能下载；（5）能关注自己想常了解或欣赏的分享者，能够私信或留言咨询交流；3.2网站功能概述本次毕业设计基于web的日记同享的网站主要分为前端展现和后台管理，为分享者提供了日常分享和资源共享交流学习的平台，前台主要的功能分为注册登录、搜索功能、点赞、评论、收藏、资源下载、私信他人等，后台的主要功能有分享管理（分享分类、文章管理、资源管理）、用户管理以及Banner管理。通过接口连接，完成用户日常分享和资源共享的平台。3.3网站功能细述前台展现功能描述：注册：用户输入用户名并输入密码，再一次输入相同的密码以实现注册；登录:用户输入与数据库验证的用户名和密码登录，登录后能享有更多权限，对网站进行更多操作；首页：用户可根据不同的分享分类信息进行浏览，分别有美妆、美食、影视、资源等；搜索内容：用户可搜索自己想查看的分享内容；分享生活：用户可发表自己的生活体会，推荐自己觉得不错的物品、心得等；发表文章：用户可在网站发表自己的学习心得，成果等，提升自己，帮助他人；上传资源：用户可上传文件文档等素材，共享资源；资源下载：用户可找到自己想要的资源进行下载学习和使用；点赞：用户可对自己喜爱的作品进行点赞；收藏：用户可收藏自己觉得有用或感兴趣的他人分享；评论：用户可在他人的分享详情页进行评论交流；关注：用户可关注本人感兴趣的分享者；私信：用户可私信分享者进行交流学习；留言：用户可在分享者的信息页进行留言；修改资料：用户可自行修改对外展示的昵称、职称、头像、地址、联系方式等个人资料。后台管理功能描述：登录：管理员输入用户名和密码，然后登录，进入后台管理界面；分享分类管理：管理员可对网站导航栏的分享分类进行编辑、是否上线或删除；分享管理：管理员可查看用户发表的分享信息，用户昵称、点赞数、评论数、收藏数、发表时间等，后台可选择用户是否展示或删除；资源管理：管理员可查看用户共享的资源，用户昵称、点赞数、评论数、收藏数、发表时间等，管理员可选择用户是否展示或删除；用户管理：后台管理员可以查看注册用户的信息，注册时间、分享作品数、关注数、粉丝数等；轮播图管理：后台管理器可以添加，删除和修改前台轮播图像，对用户推荐高频点击的分享或优秀作品等。3.4用户示例图3.4.1前台用户示例：前台用户可实现操作的主要有注册登录、分享生活、发表文章、上传资源、资源下载、点赞评论、收藏留言、私信他人、查看内容、修改资料等。图3-1前台用户示例图3.4.2后台管理员示例：后台管理者可实现操作的主要有登录、分类管理、分享管理、资源管理、用户管理、轮播图管理。图3-2后台台管理员示例图网站系统设计4.1界面设计软件简介4.1.1AdobeXD软件介绍AdobeXD是Adobe公司出的软件，推出的一款集原型、设计和交互为一体现代格调的设计软件。它的界面简单但高效，为不同平台提供了原型工具，可用于移动程序应用，网页设计和原型创作，包括网站、手机、平板电脑等。除此之外，这款免费下载，安装好后打开显示各种不同尺寸（iPhone、iPad、PC等）的分辨率，你也可以自己设置想要的画布大小，设计几个界面完成后，点击原型可以进行页面与页面之间的交互，还有个便利的是可以上传到蓝湖，在任何时段复看各个元素的尺寸、间距、文字大小，可以下载图标等。本次毕业设计采用AdobeXD根据系统概要设计对整个网站进行了初步的界面设计，因为这个软件确实非常方便，直接复制拖动就可设计新的页面效果，将网站设计好后进行链接交互，预览效果，在代码实现时可以更好地帮助还原，同时也更好的了解要做的是什么，怎么做，以至达到满意的效果。图4-1运用AdobeXD进行网站设计图4.1.2AdobePhotoshop软件介绍PhotoShop是一款图像处理软件，有效地对各种图形图像文件进行编辑、修改、合成[11]。在该版本的不断强化中，它的功能越来越强大，被运用的范围也非常广泛：图形设计，广告摄影，创造，网页制作，后期修改，视觉创造和设计。有关界面，大多数设计人员几乎总是会使用此软件。功能中，图像处理的基础是图像编辑，例如镜像、缩放、旋转等；传达清晰的图像是艺术设计的途径之一，Photoshop的色彩校正是功能更强大的功能之一，操作者能够在不同的色彩之间进行切换，并快速，轻松地调整图像颜色校正的颜色底纹和颜色编码，除此之外，还有特效字的创作以及图像的特效创意。总而言之，学习好使用Photoshop软件还是有很多好处的，其学习方便，功能强大，应用广，界面也非常友好。本次毕业设计采用这款软件主要是处理图片和图片合成，用于网站的Banner轮播图以及推荐图，使用精美的图片能让整个网站变得更简洁好看，配于好的操作界面更让整个网站有魅力。图4-2运用AdobePhotoshop制作图片4.2系统界面设计原则网页用户界面（WebsiteUserInterface）是网站用户与用户之间信息交换的外观、程序等，好的网站，可以让人一种好用和舒服的感觉，网页界面设计和平面设计还是有差别的，它有自身的设计特征，它表达和传递的信息主要是视觉信息。因此，在设计中还得遵循视觉传达的一般规则。毕业设计的日记同享网站本着以用户为中心的原则，用户的习惯和能力不同，整个网站设计的风格简单，界面清晰，采用橙黄色为网站的主色调，整个网站的风格偏扁平风，信息联结，减少用户操作，运用一致性原则和统一的导航设计，帮助用户用更短的时间更有效的学会如何操作网站，体验它的功能，用图片和文字相结合的版面设计相互衬托，让整个页面变得更加和谐。扁平化界面设计由于其具有良好的交互性和适用性,使其很快被运用到了人机交互界面设计当中。[9]4.3系统概要设计在开发一个软件或网站系统前通常需要架构设计，其为开发软件系统奠定了根底，更好的理解“怎么做”，提高设计效率，更利于快速应用，保持输出一致性，在修改或优化时能更好的进行检查并解决，便于维护。本次结业设计的网站系统主要分为前台页面展现和后台监控模块两个部分，前台展现主要是用户可推荐和分享生活信息和资源共享，可点赞、收藏、评论、关注等，后台模块主要是对前台的管理，分享管理、用户管理、轮播图管理等。系统模块设计如下图所示。图4-3系统架构图4.4系统时序图4.4.1前台展现时序图此次的网站前台展现的页面导航栏中有旅游、美妆、美食、影视、资源、其他，前台还有个人中心、发布页面、查看页面、其他用户个人中心等页面。这里主要以用户注册、登录、查看页面和发布页面实现时序图为例，在ProcessOn上画出对应的时序图，介绍其实现流程。图4-4用户注册时序图图4-5用户登录时序图图4-6用户查看分享内容时序图图4-7用户发布内容时序图4.4.2后台展现时序图网站系统后台页面主要分享管理，其中分享管理分为分享分类即导航栏的分类、以及文章管理、资源管理，还有用户管理和banner管理，这里以分享管理的文章管理时序图展现流程。图4-8用户发布内容时序图4.5数据库ER图在搭建数据库之前，搭建数据库关系图即ER图，能协助开发者更好的明确数据库表与表之间的关系，ER图提供了实体、属性、关系的方式，主要的关联关系有三种，一个一对一（1:1），一个一对多（1：N）和许多对多（M:N）,是各种数据模型的共同根底，为此它更容易理解、接近于人的思维，以下是此次数据库的相关E-R图。注册用户E-R图图4-9注册用户E-R图日常分享E-R图图4-10日常分享E-R图资源共享E-R图图4-11资源共享E-R图轮播图管理E-R图图4-12轮播图管理E-R图4.6数据库表单设计用户表（design_user）序号命名类型是否为空注释1design_user_idint非空主键2user_namevarchar非空用户名3sexint非空性别10男20女0未设置性别4headvarchar非空用户头像5accountvarchar非空账号6passwordvarchar非空密码7mobilevarchar非空手机号8emailvarchar非空邮箱9current_pint非空现居省份10current_cint非空现居城市11hometown_pint非空家乡身份12hometown_cint非空家乡城市13user_qqvarchar非空用户QQ14user_wechatvarchar非空用户微信15occupationvarchar非空职业16autographvarchar非空用户签名17synopsistext可空简介18schoolvarchar非空学校19graduation_timeint非空毕业时间20update_timeint非空更新时间21create_timeint非空创建时间用户屏蔽表（design_shield）序号命名类型是否为空注释1design_shield_idint非空主键2shield_design_user_idint非空被屏蔽用户3design_user_idint非空所属用户4is_deleteint非空是否删除5delete_timeint非空删除时间6update_timeint非空更新时间7create_timeint非空创建时间分享表（design_share_filer）序号命名类型是否为空注释1design_share_idint非空主键2design_share_category_idint非空所属类别ID3design_user_idint非空所属用户4titlevarchar非空标题5contenttext可空富文本6is_draftint非空10草稿20已发布7release_timeint非空发布时间8is_onint非空是否上线9is_deleteint非空是否删除10delete_timeint非空删除时间11update_timeint非空更新时间12create_timeint非空创建时间分享文件文档表（design_share_filer）序号命名类型是否为空注释1design_share_file__idint非空主键2design_share_idint非空分享ID3file_namevarchar非空文件名4file_sizedecimal非空文件大小5filevarchar非空文件6file_typevarchar非空文件类型7update_timeint非空更新时间8create_timeint非空创建时间分享文件图片表（design_share_img）序号命名类型是否为空注释1design_share_img__idint非空主键2design_share_idint非空分享ID3imgvarchar非空文件名4is_covervarchar非空是否为封面5typevarchar非空类型10图片20视频6update_timeint非空更新时间7create_timeint非空创建时间用户喜欢表（design_shield）序号命名类型是否为空注释1design_share_like_idint非空主键2design_share_idint非空分享ID3design_user_idint非空所属用户4is_deleteint非空是否删除5delete_timeint非空删除时间6update_timeint非空更新时间7create_timeint非空创建时间用户评论表（design_comment）序号命名类型是否为空注释1design_comment_idint非空主键2design_share_idint非空分享ID3design_user_idint非空所属用户4comment_user_idint非空评论5parent_idint非空父级评论ID6commenttext非空评论7is_deleteint非空是否删除8delete_timeint非空删除时间9update_timeint非空更新时间10create_timeint非空创建时间用户评论喜欢表（design_shield）序号命名类型是否为空注释1design_comment_like_idint非空主键2design_comment_idint非空上级评论ID3design_user_idint非空所属用户4is_deleteint非空是否删除5delete_timeint非空删除时间6update_timeint非空更新时间7create_timeint非空创建时间用户评论收藏表（design_share_collection）序号命名类型是否为空注释1design_share_collection_idint非空主键2design_share_idint非空分享ID3design_user_idint非空所属用户4is_deleteint非空是否删除5delete_timeint非空删除时间6update_timeint非空更新时间7create_timeint非空创建时间用户粉丝表（design_fans）序号命名类型是否为空注释1design_fans_idint非空主键2fans_design_user_idint非空被粉用户3design_user_idint非空所属用户4is_deleteint非空是否删除5delete_timeint非空删除时间6update_timeint非空更新时间7create_timeint非空创建时间用户私信表（design_letter）序号命名类型是否为空注释1design_letter_idint非空主键2letter_design_user_idint非空被私信用户3design_user_idint非空发送用户4lettertext非空私信内容5is_readint非空是否已阅10已阅20未阅6read_timeint非空阅读时间7update_timeint非空更新时间8create_timeint非空创建时间前台Banner表（design_letter）序号命名类型是否为空注释1design_banner_idint非空主键2nameint非空名称3bannerint非空Banner4sorttext非空排序5is_onint非空是否上线6is_deleteint非空是否删除7delete_timeint非空删除时间8update_timeint非空更新时间9create_timeint非空创建时间4.7系统实现流程设计4.7.1注册登录页面流程用户按提示输入信息进行和进行密码验证注册，前台注册访问/design/user/register路径、登录访问/design/user/loginByPassword路径到后台，后台通过定义$validate=newValidate限定长度，$validate->message进行判断,前台根据提示注册登录，后台通过数据判定，实现前后台连接。下图为流程图：图4-13用户注册流程图图4-14用户登录流程图4.7.2发布页面流程前台访问design/share/releaseShare路径到后台，采用混编的方式token进行用户身份凭证，其参数title（标题）、img（图片）、design_share_category_id（类别）为必填，参数cover（富文本）和file（文件）为不是必填，后台定义函数list（获取列表）、getCategory（获取分类）、releaseShare（新增）等进行判断，实现前后台的连接。下图为用户发布流程图：图4-15用户发布流程图4.7.3后台分享管理流程后台分享管理可以看到用户分享的内容，发表时间、点赞数、评论数和收藏数等，前台分享列表访问路径/design/share/list给后台，collection_nums为被收藏数量、like_nums为被喜欢数量、comment_nums为被评论数量，后台定义函数delByShare（是否删除）、change（是否上线）等实现前后端的连接，后台可监控前台分享的内容。下图为分享管理流程图：图4-16后台分享管理流程图5.网站系统实现5.1前台页面实现5.1.1注册登录页面进入网站的第一步是注册登录，网站LOGO放在网站中间，注册用户根据文本框的提示进行输入，账号密码为6-16位，如不按提示操作，会显示“账号长度不规范”，在确认密码时需与输入的密码一致，否则会显示“密码不一致”，无法注册，注册成功后直接进入网站，登录用户则直接手动打入账号密码登录，可以自行选择是否保存账号密码。注册登录的主要功能是权限设置，如果不注册登录就会无法进入网站，而登录的信息数据需与注册时传给后台的数据一致才能登录，登录进去后享有网站的各种功能操作。下图为界面效果图。注册界面设计图：图5-1注册界面效果图图5-2登录界面效果图5.1.2首页界面进入网站后可以看日常分享的进行了分类，可以从导航栏中看到它分为旅行，美妆、美食、影视、资源等主要在生活中能体验出来的、分享的主题，网站左上角为网站Logo,从左至右依次为导航栏、搜索栏，收藏、通知和个人头像，鼠标划过具有下拉菜单，个人分享、资源、收藏等快捷导航，从上至下一次为Banner轮播图，图片导航、美妆分享、美食分享、影视分享、旅行分享以及资源共享。整个页面采用的是垂直分布的版面设计，板块清晰，对分享的主题进行了分类，即不会因不同的人分享不同的话题总和到了一起观看混乱，降低用户体验，又使界面更加的简洁好看，增加时尚感，帮助用户更快速的找到自己感兴趣的主题进行浏览。下图为首页界面的效果图：图5-3首页界面效果图首页的主要功能如下：功能注释导航功能用户可通过上方导航栏及下拉列表选择进入子页面搜索功能用户可在搜索框输入内容进行搜索自己想要的信息推荐功能首页推荐的一般为点赞数或浏览数最多的分享消息通知功能在首页右上角点击消息通知按钮可以看到消息5.1.3分享页面分享页面是用户点开子页面后进入另一用户或自己发表的详情页，最上方依然为Logo、导航栏和搜索栏等，左侧为用户发表的内容，也可以看到其发表的时间，包括标题、图片、叙述等，图片为轮播的方式，减少页面空间，使页面更简洁，内容下方可看到所有的评论，自己也能够点赞、收藏和评论；右侧为发表用户的信息，包括其关注的人数、粉丝数、喜欢数和收藏数，可点击头像进入对方的个人中心页面，点击“关注”按钮可关注对方、点“私信”按钮也可直接私信对方。下图为分享内容页效果图：图5-4分享内容页面效果图分享页的主要功能如下：功能注释私信功能用户可点击“私信”按钮对分享者发消息交流关注功能用户可关注用户，方便更好的查看分享者分享的内容搜索功能用户可在搜索框输入内容进行搜索自己想要的信息收藏功能用户可点击“收藏”图标收藏分享内容，方便日后再次查看评论功能在首页右上角点击消息通知按钮可以看到消息喜欢功能用户可以对喜欢的内容话题作品点赞5.1.4资源页面资源页面是用户上传到网站的资源或文档，也可以直接在网站上发表文章，用户可以点击“下载”按钮下载所需要的资源或观看其他分享者的文章，同样的，左侧为分享内容和发表时间，可以进行收藏、评论和喜欢；右侧为用户分享者的信息。下图为效果图：图5-5资源内容页面效果图分享页的主要功能如下：功能注释下载功能用户可点击“下载”按钮下载共享的资源，进行学习或引用私信功能用户可点击“私信”按钮对分享者发消息交流关注功能用户可关注用户，方便更好的查看分享者分享的内容搜索功能用户可以在搜索框中输入内容来搜索所需内容收藏功能用户可点击“收藏”图标收藏分享内容，方便日后再次查看评论功能在首页右上角点击消息通知按钮可以看到消息喜欢功能用户可以对喜欢的内容话题作品点赞5.1.5个人中心页面个人中心页面可以看到自己或其他用户的信息，由个人首页、个人资源、收藏、个人资料和草稿几个部分组成，此外可以看到获赞数、收藏数、粉丝数、和关注数，点击粉丝或关注进去可查看详情，此外，还可以看到其他用户给自己的留言和评论，下图为效果图：图5-6个人中心页面效果图个人中心页的主要功能如下：功能注释信息展示功能用户可看到的喜欢数量、收藏的数量、粉丝数和关注数，点击粉丝或关注，可查看对应的用户查看分享成功内容用户分别查看日常分享和资源共享发表成功的案例草稿保存功能用户在分享发表时临时需退出时可以保存为草稿，再后面进行编辑发表资料修改功能在资料上可以修改个人的基本信息和更改头像留言功能用户可自行留言或查看回复其他用户给自己留的言5.1.6发布编辑页面发布页面主要是用户用来分享发表的页面，通过填写标题，选择类型，文字描述，图片上传、文件上传对话题进行描述发布，在发布之前可以先预览，查看是否需要修改，或者保存为草稿箱，方便下次编辑，提高效率，下图为效果图：图5-7发表编辑页面效果图发步编辑页的主要功能如下：功能注释编辑功能用户在文本框或选择按钮进行操作编辑，分享发表自己想表达的内容上传图片文档功能用户可上传分享自己的图片、文档、压缩包等文件预览功能用户可在编辑好内容后先进行预览检查再发表存为草稿功能用户可在编辑内容时保存为草稿，便于下次重新分享5.2后台页面实现5.2.1分享管理页面分享管理主要分为分享分类、文章管理和列表管理，通过后台的管理可对前端进行操作和管理，对前台网站有监控限制功能，例如不法人员在网站发表违规内容，后台不经过用户可直接禁用和删除。下图为分享管理的分类管理效果图：图5-8分享分类管理页面效果图分享管理的主要功能如下：功能注释分类管理功能管理员可对网站的导航栏进行分类管理，可以新增、编辑或删除，还可以对子页面的banner进行调整文章管理功能管理员可查看前台用户分享的信息，可以选择是否禁用，也可以直接进行删除资源管理功能管理员可查看前台用户分享的资源信息，可以选择是否启用，也可以直接进行删除5.2.2用户管理页面它的主要功能是可以查看注册用户的基本信息和注册时间，管理员有权管理用户是否禁用。下图为用户管理效果图：图5-9分享分类管理页面效果图5.4.3Banner管理页面它的主要功能是对前台首页的轮播图进行管理，通过上传图片，对图片进行排序，决定轮播先后顺序，管理员可决定哪一张图是否上线，是否删除，下图为Banner管理效果图：图5-10banner管理页面效果图6.网站功能测试6.1测试的目的与意义开发一个软件或网站，并不能保证一开发好就毫无漏洞，在项目发出去或交给客户之前需要对系统进行测试。它的目的是以最少的时间和功夫去测试系统，发现其潜在的各种错误，保证其质量和可靠性，在整个开发过程中，测试这一环节也是必须认真进行的，是提高软件产品质量和可靠性的关键。[10]以用户的角度去操作，确保操作的流畅性，是否存在错误，如出现错误，及时对开发人员反馈，进行代码修改，确保整个系统最大的完美化，如未测试就进行发布，用户在体验后发现有写功能点击不了，或者界面出现混乱，用户体验就会大大的降低，没有使用此应用的欲望，毕竟，软件或系统的开发是基于用户的，因此，系统功能测试特别重要。在这里主要展示对前台的几个主要功能和后台的部分功能的测试，通过测试，整个网正常运行，整体比较流畅，其用户操作界面也不会出现乱码现象，在测试出现错误时及时修改代码，解决问题，提高网站的可用性和质量性，更一步贴合用户操作习惯，提高用户体验性。6.2测试实操示例6.2.1注册登录功能用户注册登录测试表测试编号用例目的测试步骤期望结果实测结果001注册用户长度控制6~16，不按提示操作查看网站是否正常注册在注册用户账号输入001，其他正常输入系统显示注册登录成功系统显示账号长度不规范000001注册用户长度控制6~16，两次输入密码不同，查看网站是否正常注册在注册用户账号输入000001，第一次密码为123456，第二次密码654321系统显示注册登录成功系统显示密码不一致000002注册用户均按提示操作，查看网站是否正常注册在注册用户账号输入000002，第一次密码为123456，第二次密码654321系统显示注册登录成功系统显示注册登录成功000003用户在登录时密码与注册时密码不一致，查看网站是否正常登录在注册用户账号输入000003，注册密码为123456，登录密码654321系统显示登录成功系统显示密码错误000004用户在登录时密码与注册时密码一致，查看网站是否正常登录在注册用户账号输入000003，注册密码为123456，登录密码123456系统显示登录成功系统显示登录成功001测试结果效果图： 图6-1001测试结果效果图000001测试结果效果图： 图6-2000001测试结果效果图000002测试结果图： 图6-3000002测试结果图000003测试结果图： 图6-4000003测试结图000004测试结果图： 图6-5000004测试结果图6.2.2分享发布功能测试分享日常功能测试表测试编号用例目的测试步骤期望结果实测结果1.0分享用户不输入标题，查看网站是否正常发表用户不输入标题，其他正常操作，点击“发布”系统显示发布成功系统显示标题不能为空2.0分享用户不上传任何图片等，查看网站是否正常发表用户输入标题，选择分类等，不上传图片，点击“发布”系统显示发布成功系统上传至少一张图片或视频3.0用户均按提示操作，查看网站是否正常发布用户均按提示操作，写标题、分类、上传图片等系统显示发布成功系统显示发布成功1.0测试结果效果图： 图6-61.0测试结果效果图2.0测试结果效果图： 图6-72.0测试结果效果图3.0测试结果效果图： 图6-83.0测试结果效果图3.0分享成功效果图： 图6-93.0分享成功效果图6.2.3评论收藏功能测试评论收藏功能测试表测试编号用例目的测试步骤期望结果实测结果4.0用户评论他人分享，查看是否评论成功用户输入评论内容，点击“评论”按钮系统显示评论成功系统显示评论成功5.0用户收藏其他用户者分享的内容用户点击“收藏图标”系统显示收藏成功系统显示收藏成功4.0评论成功效果图： 图6-104.0分享成功效果图5.0评论成功效果图： 图6-115.0分享成功效果图6.2.4私信功能测试私信功能测试表测试编号用例目的测试步骤期望结果实测结果6.0用户发送信息是否成功000003用户向000001用户输入评论内容，点击“私信”按钮系统显示私信成功系统显示私信成功7.0用户接收信息是否成功000001用户查看私信内容系统显示接收信息系统显示接收信息6.0私信效果图： 图6-116.0私信内容效果图 图6-126.0私信成功效果图7.0接收私信成功效果图： 图6-137.0接收私信成功效果图6.2.5后台操作文章功能测试后台操作文章功能测试表测试编号用例目的测试步骤期望结果实测结果2.0管理者对前台分享内容是否可展示，默认为启用查看分享者分享的“中式小点心”信息，点击“展示”按钮，改变为不展示系统显示改变状态成功前台“中式小点心”内容不可见成功2.1管理者对前台分享内容是否可删除查看分享者分享的“中式小点心”信息，确认删除后台显示删除成功前台“中式小点心”内容不可见成功2.0改变状态功效果图：图6-142.0改变状态成功效果图2.0前台展现“中式小点心”内容效果图： 图6-152.0前台展示“