PHP童年交友分享社区的设计与实现
童年交友分享社区的设计与实现
媛麻+：
图：
童年交友分享社区的设计与实现
摘 要
本设计界面采用HTML5、CSS3、JavaScript技术，后台采用PHP结合MySQL设计实现了一套小型社交网站。用户可以用游客的身份浏览网站，也可以注册和登录。登录用户可执行修改基本资料、发布信息、关注和查找用户以及找回密码等一系列操作。本设计目的是让用户分享童年趣事，是一个极具特色适合推广的软件系统。本论文以软件工程的角度对技术点探究和分析，对实现过程遇到的问题提出了解决方案。论文详细描述了各个模块的功能与实现，阐述实现思路和测试方法。
关键词：社区网站；分享平台；童年网；交友
The design and implementation of the childhood friends sharing community
ABSTRACT
The website was built with PHP,MySQL in back-end and the front-end was used HTML5,CSS3,JavaScript.The website could be viewed by visitors and all logged in users.When user logged in and they could modify the user data,release of information,attention others,find the password and a series of operations.The purpose of this design was to let users share the happiness in childhood,and it’s a suitable for the promotion of software system.In this paper,the website technology was analyzed in terms of software engineering,and gave solution.And there were functions and process of implement and test method in this paper.
Keywords: Community website; sharing platform; childhood site; making friends
目 录
第1章 绪 论 1
1.1童年网开发背景 1
1.2本设计的意义 1
1.3本设计的应用分析 1
1.4网站前端开发的发展 2
第2章 需求分析 5
2.1网站基本功能需求 5
2.2用户体验需求 6
2.3功能模块需求 7
第3章 流程分析与控制 9
3.1整体操作流程 9
3.2具体流程分析 10
3.2.1 登录注册流程 10
3.2.2 发表说说流程 11
3.2.3 寻找好友流程 12
3.2.4 未登录判断流程 13
第4章 模块设计 14
4.1用户模块 14
4.2公共模块 15
4.3服务器模块 15
4.3.1 PHP与服务器 15
4.3.2 目录结构 16
第5章 数据库设计 17
5.1 MySQL简单介绍 17
5.2 数据需求分析 17
5.3 概念结构设计 18
5.4 逻辑结构设计 19
第6章 系统开发与实现 22
6.1 CSS、HTML、JS简介 22
6.2 前端搭建与分析 23
6.2.1 网站界面实现 23
6.2.2 页面共用事件与模块 23
6.2.3 数据验证 24
6.2.4 动画处理 25
6.3 后端数据与逻辑处理 26
6.3.1 公共数据库操作函数 26
6.3.2 好友寻找功能 26
6.3.3 发表说说 29
6.3.4 关注与取消关注 30
6.4重要功能描述与技术分析 31
6.4.1用户头像修改 31
6.4.2 全屏背景幻灯片 32
6.4.3说说评论与点赞 33
6.4.4 数据结构与算法 33
第7章 综合测试 34
7.1测试的目的与意义 34
7.2测试的方法与流程 34
7.3功能测试 35
7.3.1 界面测试 35
7.3.2 功能测试用例 36
7.3.3 流程测试 38
7.4性能测试 38
7.5测试结果分析 40
第8章 总结 41
致 谢 42
参考文献 43
附 录 44
附录A:主要源程序 44
附录B:使用说明书 49
第1章 绪 论
1.1童年网开发背景
互联网已遍及全球，中国是互联网大占比“消费者”。互联网打破了传统的通讯和信息获取渠道，互联网越来越融入人们的生活。如今，人们随时都和互联网打交道，刷微信，微博，在线视频，天气，地图等等。随着互联网的吹来的热潮，网站开发如雨后春笋发展起来。社交，交友网站更是随处可见。
“社交网站”近几年饱受关注，随着互联网的渗透普及，在世界范围内的发展十分迅速。中国的社交网站也经历了从无到有的发展历程，各类社交网站层出不穷，如今已发展成多家网络纷争的局面。
1.2本设计的意义
目前国内社交网站存在诸多问题：过度沉溺其中，影响现实生活，创新性不足，针对性不强，涉及面太广泛等等。
身为软件工程专业的在校大学生，对互联网和社交网络了解较全面。因此，本设计将运用本人的目前的知识面和技术点实现一个小型的社交网站。跟随者互联网的浪潮，借着学到知识点开发一个社交Web应用。同时巩固老师教的和自学的知识点，毕竟实践出真知。
如今的社会，正是因为互联网的发展迅速，使得人们也来越脱离原本的生活，因此互联网被贴上了一些不好的标签。比如，互联网耽误学生学习，使人们忽略身边的朋友，脱离和亲人朋友的沟通等等。所以，本设计的开发点就出现于此。 本设计基于互联网，但是不妥协于互联网，本设计借互联网的优势来弥补互联网的不足。在这个“浮躁”的时代，人们需要的是怀旧、回忆、关怀，和小时候那样的爱与时光。因此“童年网”是本着这样的一个目的，希望用户通过“童年网”找到童真，找到快乐。
本设计界面美观，功能齐全，使用简单，运用新的技术知识点给用户一个完美的使用体验。
1.3本设计的应用分析
一个应用投入市场，首先得考虑此应用的使用人群。“童年网”的使用人群定在年龄在18-48之间的，有童心爱分享的用户。这些受众用户偏好与互联网应用，喜欢交友，喜欢花时间和网站打交道。
当用户进入网站时，除了登录注册，还可以浏览信息。通过浏览热门信息，让用户产生兴趣，从而注册成为注册用户。网站有个人中心，资料修改，关注好友，等等模块，让用户使用的同时也感受到方便。
用户通过关注用户和发表一系列自己的说说，从而有一定的自己的关注好友和粉丝数据量。并且用户通过和其他用户的说说评论，让用户在本网站留下自己的交流信息。用户还可以在主页查找自定义用户，可以找到与之匹配的用户。因此“童年网”就慢慢成了用户不可或缺的交友和分享的社区网站。
1.4网站前端开发的发展
从狭义来看，Web前端技术，指围绕JavaScript、CSS、HTML的开发技术，运行宿主是浏览器。而从广义来看，包括了：
1、为移动端终端设计的类似WML的HTML语言。
2、用于服务于后端ASP，JSP，ASP.NET，PHP，Node.js等语言或者技术。
3、被第三方程序打包的一种类似浏览器的宿主环境，比如Adobe AIR和使用HyBird方式的一些开发技术，如PhoneGap（它使用Android中的WebView等技术，让开发人员使用传统Web开发技术来开发本地应用）。
从前端开发技术的发展来看，大致可以分为以下几个阶段：
1、静态页面：早期的Web界面是在互联网上浏览内容，填写表单并提交。以浏览为主，都是HTML代码，偶尔穿插JavaScript代码，校验客户端的的数据。组织的代码简单，CSS运用得比较少。
2、带有简单逻辑的界面：这个界面带有一段JavaScript代码，用于拼接字符串与入框中的内容，并且弹出窗口显示。详见图1.1所示。
图1.1 带有简单逻辑的界面的前端代码
3、结合服务端的混合编程：静态界面不能实现数据交互等功能，因此衍生出很多服务端技术，CGI，ASP，JSP，PHP等等，Python和Ruby等语言也常被用于这类用途。有了这类技术，在HTML中就可以使用表单提交数据了。详见图1.2所示。
图1.2 带form表单的HTML代码
在这个阶段，由于客户端和服务端的职责未作明确的划分，比如生成一个字符串，可以由前端的JavaScript做，也可以由服务端语言做，所以通常在一个界面里，会有两种语言混杂在一起，用<%和%>标记的部分会在服务端执行，输出结果，甚至经常有把数据库连接的代码跟页面代码混杂在一起的情况，给维护带来较大的不便。（本设计目前采用这种形式）
4、出现组件化：比较常见的有服务端的组件化，比如把某一类服务端功能单独做成片段，然后其他需要的地方来include进来（本设计采用了这样的做法）。也有针对JavaScript的，把某一类的Javascript代码写到单独的文件中，界面根据需要，引用不同的JS文件。针对界面的组件方式，通常利用frameset和iframe这两个标签。某一大块有独立功能的界面写到一个HTML文件，然后在主界面里面把它当作一个frame来载入，以前很多的B/S系统集成菜单的方式都是这样的。
5、AJAX出现，Web程序效果逐渐好转，JavaScript代码量迅速增加。出于组织代码的需求，“JavaScript框架”的概念渐渐形成。
6、数据模型和控制器、视图。后来出现了MVC、MVP、MVVM框架，这些框架统称为MV框架。这些框架都是为了解决数据交互越来越复杂的问题，只是具体的实现思路不同。主流的有Backbone，AngularJS，Ember，Spine等等。在Backbone中，是没有独立的控制器的，它的一些控制的职责都放在了视图里，所以其实这是一种MVP（Model View Presentation）模式，但AngularJS有很清晰的控制器层。在这些主流的MV框架中，一般都提供了定义视图的功能。
7、模板和路由。
模板是这个时期一种很典型的解决方案。常常有这样的场景：在一个界面上重复展示类似的DOM片段，例如微博内容，后台管理系统表格行等等。
通常路由是定义在后端的，但是在这类MV*框架的帮助下，路由可以由前端来解析执行。
本人3多年的Web方面学习和开发生涯中，虽然没有经历了上述Web相关技术的很多变革，但是也目睹了IE的逐渐被淘汰，Firefox和Chrome的逆袭，对JavaScript的模块化有过持续的思考。未来究竟是什么样子？很难说清楚，只能凭已累积的一些认识，把这些年一些比较主流的发展过程总结一下。
本设计是偏前端的Web应用，能理会到这些前端的变革和发展也是对本人有很大的帮助。
第2章 需求分析
2.1网站基本功能需求
网站的功能需求是至关重要的一项。试想，网站建设完成之后，不能光有一个页面，内容才是用户最为关注的东西。那么，如何展现这些内容？如何能够把网站想要展现的内容全部展现出来呢？
Web应用是基于用户的，所以用户注册和登录等功能是一定必备的，同时完善的信息提示（错误提示，友好提示等等）也能加深用户对于网站的印象。既然登录注册是必须功能，那么密码找回和修改密码同时也是必备功能。
本设计是社交形Web应用，在用户登录或未登录时首先得有信息浏览功能（某些功能是需要判断用户是否登录，未登录是不能查看的）。信息浏览功能主要涉及到其他好友发布的说说的浏览（文字和图片）、其他用户列表查看和其他用户信息浏览、用户个人中心信息查看（包括自己发布的说说和自己的资料信息）。通过这些功能，网站能够将所需要展示的信息通过网络让用户查看或者使用。网站有几个注意点，说说发布功能是否支持图片上传，是否支持错误提示，等一些细节的小功能设置，才能实现更便利和更人性化的用户交互和体验。
其次是图片发布功能。图片发布功能是以图片的形式展示企业信息的重要方式，主要用在用户说说发布中所需要插入图片，以及用户设置头像的时候。这里需要注意的是图片发布功能是否支持图片太大提醒等小细节。
再次需要热门说说和热门用户展示功能。说说展示功能应重点考虑到点赞和评论数量而排序，而说说的展示排版形式是否够美观，直接关系到用户的使用情况。说说评论能够让说说与访客之间形成互动，搜集用户对当前说说的的意见与看法，对网站的运作推动是有很大的帮助。
既然有信息展示与信息发布，那么就有信息管理功能，这是也社交Web应用必须具备的功能。所以信息管理功能是必不可缺的，包括用户的个人信息，电话、地址、学校、是否恋爱、QQ、头像、个性签名、邮箱等基本信息，而且这些信息是用户随时可以修改的。那怎样才能提高用户对个人信息的完善，所以本设计还建设了信息完善度这样的一个小功能。信息完善度的大小是根据用户自己的个人信息完成的多少来决定的。信息完善度越高的用户就会在首页排行越靠前。因此信息管理是一大块，并且很重要的功能区。
以上几点是本设计在设过程之中所必须具备的基本功能介绍。
2.2用户体验需求
用户体验主要是来自用户和人机界面的交互过程。在早期的软件设计过程中，人机界面被看做仅仅是一层包裹于功能核心之外的“包装”而没有得到足够的重视。其结果就是对人机界面的开发是独立于功能核心的开发，而且往往是在整个开发过程的尾声部分才开始的。这种方式极大地限制了对人机交互的设计，其结果带有很大的风险性。因为在最后阶段再修改功能核心的设计代价巨大，牺牲人机交互界面便是唯一的出路。这种带有猜测性和赌博性的开发几乎是难以获得令人满意的用户体验。
用户体验是同产品自身的设计分不开的。用户更多的是关注应用的功能是不是完善，但是很多时候（特别是现在互联网美学已经发展的如今的地步）用户体验已经超越了功能设计，或者说是用户体验成就了功能设计。
现在流行的设计过程注重以用户为中心。用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。其目的就是保证，对用户体验有正确的预估，认识用户的真实期望和目的，在功能核心还能够以低廉成本加以修改的时候对设计进行修正，保证功能核心同人机界面之间的协调工作，减少BUG。
本设计，目前考虑的用户体验大部分来源界面的美观，排版的人性化，良好的提示交互。本人认为，用户体验是一个很大的，而且需要不断挖掘的方面，不是一朝一夕就能成就的。所以本设计所涉及的用户体验设计不一定是最好的，但是是目前本人能做到的最优的。
用户体验本设计要做到下面这几点：
1、UI（用户界面）是广义概念，包含软硬件设计，囊括了GUI 、UE以及ID（交互设计）。对于本设计就界面排版，要做到位。
2、GUI（用户图形界面）界面美工，只管软件视觉界面，比UI窄。大部分的UI设计师其实做的是GUI。大多出自美术院校。而本人不涉及太多美学的功底，所以本设计尽量保证美观即可。
3、ID（交互设计）简单地讲是指人和电脑之间的互动过程，一般是代码实现。本设计在网页上运用JavaScript实现大部分的交互设计。
4、UE（用户体验）关注的是用户的行为习惯和心理感受，就是琢磨人会怎么用软件或者硬件才觉得顺心就手的。完成好的用户体验是比较难的，本设计的体验都出自本人自身的揣摩，但是在设计的同时也有让其他用户测试和使用，以便改进。
2.3功能模块需求
功能模块需求详见图2.1所示:
图 2.1 功能需求模块图
1、登录注册模块：登录和注册模块是网站交互的必要功能。登录注册模块包括验证用户名和密码验证码的格式是否符合要求否则动态提醒用户，密码2次安全匹配，验证码异步采用AJAX获取时时服务端的Session状态码，验证码异步刷新。注册会通过AJAX后台接口拉去数据检测用户名是否注册过，因为本网站是通过用户名唯一确定用户的，所以用户名不能重复。
2、密码修改和找回密码模块：密码修改时社交网站必备的功能之一，还必须提供忘记密码功能。通过输入用户名和密码保护问题修改密码，或者通过输入用户名和旧密码修改密码。在检测输入数据与后台数据时候匹配的情况，一致采用无刷新技术。动态提示用户，提高页面交互能力。
3、用户信息修改模块： 默认用户只有用户名一个信息，还有其他的信息项需要用户自己填写，每多填写一项，用户的信息完善度就会增加，信息完善度会提高用户的推荐排名。修改信息保存时，会检测用户输入的信息内容格式是否符合标准。信息修改有还支持头像修改，头像修改支持在线上传图片，图片上传有格式和大小的限制，会动态监测图片时候合格的图片，会提示用户。上传头像成功可以在线裁剪图片，然后保存裁剪后的图片。
4、发表图片说说模块： 这是一个社交网站，就像微博一样，发表状态发表图片是必不可少的功能。此功能包含，验证是否有SQL注入，发表内容格式检测，发表图片大小格式过滤等。
5、搜索用户模块：此模块主要用来用户和用户之间的相互搜索，PHP后台可以实现与数据库的模糊匹配把相应的用户列出来。搜索模块看似简单，其实集成了验证输入，提示输入，结果动态展示等功能。
6、热门推荐模块：热门推荐模块包含2个模块，一个推荐用户，一个推荐说说。后台代码编写接口从数据库获取用户的信息资料，以信息资料完善度排序，把前6个用户推荐给其他用户。后端读取所有用户发表的说说，根据说说的评论数量来排序（会涉及数据库SQL多表连查），将前10条热门说说推荐给其他用户。
7、关注与取消关注模块：用户之间相互关注是必备功能，可以让整个网站的活跃度高起来。通过用户相互关注，增加自己的粉丝数量，也可以结交好友。关注了对方，对方可以查看到你关注了他。技术方面，涉及数据库同时多表查询，伪线程队列等。
8、图片裁剪模块：用户修改头像的时候，可能会上传各种长宽比的图片，但是本网站设计的是1：1的宽高，所以必须实现用户在线剪切图片功能。本功能主要设计前端JavaScript图片放缩与定位，把数据传给后端，后端实现绝对定位图片的裁剪存储。
9、匹配好友模块：匹配好友是本网站最好玩也是最有核心价值的模块。登录用户可以选择由系统提供的9个子模块，来进行交友等操作。比如选择“生日一样的你们”，系统就会AJAX异步匹配数据库设置过生日信息的用户并和当前登录用户的生日进行匹配，然后把匹配成功的用户列举出来。这个板框设计多方面技术。既要把前端界面设计得通俗易通、简单、美观还要性能优异，查找快速。
第3章 流程分析与控制
3.1整体操作流程
本设计的网站在没有登录顾得情况，用户只能预览，不能操作。在登录页面，有游客身份进入，会跳转到首页。然后执行相应的信息查看与操作。
未登录整体操作流程详见图3.1所示。
图 3.1 未登录整体操作流程图
如果用户愿意登录或者注册，就拥有个人中心和说说发布等一系列功能。
登录注册整体流程详见图3.2所示。
图 3.2 登录注册整体流程图
3.2具体流程分析
3.2.1 登录注册流程
用户填写用户名，密码，重复密码，密码保护问题，已经密码保护答案，验证码，然后点击注册。JavaScript获取用户填写信息，以此判断合法性。比如验证用户名是否已经被注册，就需要利用AJAX发送当前用户名给PHP后端，然后判断是否已经被注册，如果已经被注册，则返回失败信息，如果没有被注册则继续验证其他输入信息。如果所有验证都通过了，就把所有数据打包成后端PHP所需要的JSON格式，然后提示用户注册中，同时PHP构建SQL语句，在用户表插入相应的数据，数据保存成功后在Session里面插入当前注册的用户名和id。最后返回给页面的JavaScript，页面检测到没有出错信息就跳转到个人中心页面。
登录的时候，用户填写用户名和密码验证码，依旧利用JavaScript验证这些数据的正确性，错误则提示，正确则进行数据保存（发送AJAX数据给PHP保存）然后跳转到个人中心页面。
登录注册流程如图3.3所示。
图 3.3 登录注册流程图
3.2.2 发表说说流程
用户在登录成功后，进入个人中心，点击“发表童言”按钮，弹出发表说说框（发表说说框如图3.4所示。），用户填写信息（1-200个字），和选择图片（为了整个网站的发展和使用效果，本设计规定用户必须选择图片才能发表说说），然后提交，在提交的时候会检测发表字数是否合格，发表的图片时候合格，数据保存成功后，或者失败都会给出相应的提示。但是，如果成功则会把当前的说说数据插入Dom文档流中。
发表说说流程如图3.4所示。
图 3.4 发表说说流程
3.2.3 寻找好友流程
如果是未登录用户进入寻找好友模块，则会提示用户进行登录，并且跳转到登录页面。
如果是已经登录用户进入寻找好友模块，这会执行相应的动画，展示出相应的寻找好友选项列表。用户根据自己的喜好选择相应的模块。
比如用户当前选择了“来自同一个故乡”模块。当用户选择模块的点击事件发生时，调用“寻找模块”JavaScript方法，这个方法里面首先获取用户当前选择的模块的信息（“来自同一个故乡”），然后再去数据库查询当前个人信息里面的“故乡”和当前用户相等的用户。然后把获取到的数据返回给JavaScript，页面上用模板字符串替换的方式把搜索到的用户展示到页面上。
寻找好友流程如图3.5所示。
图 3.5 寻找好友流程图
3.2.4 未登录判断流程
在登录模块和注册模块里面，如果登录成功，代码中是会保存当前用户id和uername在Session和Cookie中的。所以，判断当前页面用户是否已经登录有2中方法。
方法一，在服务器端，PHP直接查看当前Session信息是否设置过，如果Session设置过用户id和username值，那么表示已经登录。
方法二，在页面端，利用JavaScript判断Cookie中的id和uername是否设置过，同样可以判断用户登录情况。但是方法二，不是很安全，因为浏览器端，用户发起的JS可以自己设置Cookie，如果用户或其他非法使用者模拟Cookie，那么就会绕过第二种登录方法。
所以第二种登录方法只是一种手段，用于辅助判断是否登录。
在有些页面是必须用户登录才能查看的，这个时候，在PHP渲染数据前，都会利用方式一判断用户时候已经登录。如果没有登录，则会返回到登录页面。
判断是否登录流程如图3.6所示。
图 3.6 判断是否登录流程图
第4章 模块设计
4.1 用户模块
1、登录注册模块。用户通过登录注册能实现信息的查看修改和匹配。通过登录，网站就能唯一的识别出当前用户是谁。本设计中，注册模块和登录模块是相互作用的。用户注册后才能登录。通过登录模块获取到用户信息并且标识当前用户。
登录注册系统看似简单，但是里面的各种策略和逻辑非常的灵活和多变，并且隐藏着各种安全方面的陷阱，同时还要考虑用户体验的便捷性。登录注册系统的设计其实没有一个千篇一律的模板，都需要根据自己产品系统的特点来灵活处置，并且做好每一步的引导，处处都是细节。
登录注册模块运行如图4.1所示。
图 4.1 登录注册模块运行图
2、资料查看与修改模块。信息是网站的基本驱动力，没有用户资料，整个网站就不能正常的运作。用户资料保存此用户的一些基本信息，且这些信息是对应用有使用的价值。本设计的资料修改有基本资料和生活资料，工作资料，以满足“用户匹配模块”的各种功能。用户通过资料修改模块可以查看自己的信息也能修改信息。
3、个人中心模块。用于展示“资料查看与修改”模块里的详细内容，同时还必须具有交互友好的界面。在个人中心模块除了展示资料模块的内容，更重要的是发布说说，修改头像，查看当前关注人数和粉丝人数。在个人中心页面，大部分的篇幅用于展示说说列表。
在当前用户访问其他用户的个人中心模块的时候，需要先判断当前已登录用户是否是查看用户，如果是，表示当前用户在查看自己的个人中心，则拥有编辑信息功能，如果不是，表示当前用户在查看别人的个人中心，则只有信息查看功能和说说评论功能。
4.2 公共模块
1、好友查找是本设计必不可缺的一个应用模块，此模块要涉及到字符串验证，分割字符串构建SQL语句查询。好友查找，用于用户搜索其他用户，并且支持用空格分开用户名同时搜索多个用户。好友查找模块路口需要固定在头部，在每个页面都能进行用户搜索。
2、本设计的重要功能之一“好友匹配模块”。本设计设计此模块的初衷是，本人认为一个网站或者WebApp一定要有自己的特色，而本设计的特色就是“好友匹配模块”，通过这个模块用户可以匹配信息相关的的用户。因此铺设了本设计的交友“引导线”。
4.3 服务器模块
4.3.1 PHP与服务器
PHP是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到HTML中，尤其适合Web开发。
PHP主要是用于服务端的脚本程序，因此可以用PHP来完成任何其它的CGI程序能够完成的工作，例如收集表单数据，生成动态网页，或者发送／接收 Cookies。但 PHP 的功能远不局限于此。
PHP 脚本主要用于以下三个领域：
1、服务端脚本。这是 PHP 最传统，也是最主要的目标领域。开展这项工作需要具备以下三点：PHP 解析器（CGI 或者服务器模块）、Web 服务器和 Web 浏览器。需要在运行 Web 服务器时，安装并配置 PHP，然后，可以用 Web 浏览器来访问 PHP 程序的输出，即浏览服务端的 PHP 页面。如果只是实验 PHP 编程，所有的这些都可以运行在自己家里的电脑中。请查阅安装一章以获取更多信息。
2、命令行脚本。可以编写一段 PHP 脚本，并且不需要任何服务器或者浏览器来运行它。通过这种方式，仅仅只需要 PHP 解析器来执行。这种用法对于依赖 cron（Unix 或者 Linux 环境）或者 Task Scheduler（Windows 环境）的日常运行的脚本来说是理想的选择。这些脚本也可以用来处理简单的文本。请参阅 PHP 的命令行模式以获取更多信息。
3、编写桌面应用程序。对于有着图形界面的桌面应用程序来说，PHP 或许不是一种最好的语言，但是如果用户非常精通 PHP，并且希望在客户端应用程序中使用 PHP 的一些高级特性，可以利用 PHP-GTK 来编写这些程序。用这种方法，还可以编写跨平台的应用程序。PHP-GTK 是 PHP 的一个扩展，在通常发布的 PHP 包中并不包含它。如果对 PHP-GTK 感兴趣，请访问其» 网站以获取更多信息。
在本设计中，PHP发挥“服务端脚本”的任务，负责和HTML嵌套使用，本设计没有使用模板引擎和PHP相关的框架。本人想通过原始构建PHP代码和SQL语句，使PHP代码混合HTML查询数据，不经过模板引擎渲染直接用原声PHP声明和调用。
4.3.2 目录结构
目录是项目运行和路由控制的初始化结构，一旦经过确定几乎不会修改。也就是项目目录一定要经过良好的设计，需要涉及到路由的访问和代码模块化开发。
本设计的项目目录相对简单，每一个应用模块都是一级目录的文件夹，入口文件index.php。项目公共调用函数（如数据库公共操作函数，在admin文件夹）。
项目根目录模块如图4.2所示。
图 4.2 项目根目录模块图
第5章 数据库设计
5.1 MySQL简单介绍
MySQL是最受欢迎的开源SQL数据库管理系统之一，它由MySQL AB公司开发、发布和支持。MySQL是一个快速、多线程、多用户的SQL数据库服务器。
一个数据库是一个结构化的数据集合。如果要添加、访问和处理存储在一个计算机数据库中的数据，就需要一个像MySQL这样的数据库管理系统。从计算机可以很好的处理大量的数据，数据库管理系统同计算机处理和独立应用程序一样扮演着重要的角色。
关系数据库把数据存放在分立的表格中，这比把所有数据存放在一个大仓库中要好得多，这样做将增加速度和灵活性。“MySQL”中的SQL代表“Structured Query Language”（结构化查询语言）。SQL是用于访问数据库的最通用的标准语言，它是由ANSI/ISO定义的SQL标准。SQL标准发展自1986年以来，已经存在多个版本：SQL-86，SQL-92，SQL:1999，SQL:2003，其中SQL:2003是该标准的当前版本。
MySQL是开源的，开源意味着任何人都可以使用和修改该软件，任何人都可以从Internet上下载和使用MySQL而不需要支付任何费用。如果你愿意，你可以研究其源代码，并根据你的需要修改它。
MySQL服务器原本就是开发比已存在的数据库更快的用于处理大的数据库的解决方案，并且已经成功用于高苛刻生产环境多年。尽管MySQL仍在开发中，但它已经提供一个丰富和极其有用的功能集。它的连接性、速度和安全性使MySQL非常适合应用在Internet上。
MySQL主要适用场景：Web网站系统（Web站点，是MySQL最大的客户群，也是MySQL发展史的中流砥柱。原因有二：安装配置简单和开源免费）、数据仓库系统、日志记录系统、嵌入式系统（嵌入式环境对软件系统最大的限制是硬件资源非常有限，而MySQL在硬件资源的使用方面可伸缩性非常强，而且MySQL有专门针对嵌入式环境的版本）等。
5.2 数据需求分析
根据需求分析和功能模块详解，可以设计出如下的数据结构：
1、用户表：包括id(每个用户唯一)、用户名、密码、密码保护问题、密保问题答案、性别、个性签名、是否恋爱、QQ号码、生日、手机号码、小学、中学、高中、大学、家乡、资料完善度、是否设置头像、注册日期、专业。
2、说说表：包括发表此说说的用户（id）、说说创建日期、点赞数量、评论数量、说说内容、发表的说说的图片路径（唯一指向一张图片的相对路径）。
3、粉丝表：关注人（id）、被关注人（id）。
4、评论表：评论人（id）、被评论说说（id）、评论内容、评论日期。
5.3 概念结构设计
通过概念结构设计能让用户理解表的设计意义和目的，与数据库具体细节无关，用于概念结构设计的模型有很多种。本设计采用E-R模型进行概念结构设计。
用户操作E-R图详见图5.4所示。
图 5.4 用户操作E-R图
本设计数据概念结构以用户为中心，评论和说说以用户为主体。用户表对应用户基本信息字段，如：用户名、密码、性别、个性签名等。在本设计用，每个登录用户都可以发表说说，所以设计了说说表。用户表的字段数目已经足够多，而且说说表的内容需要单独查询，因此单独为说说设计了一张表。所以说说表要有一个字段指向唯一的一个用户，才能表示此说说是哪一个用户发布的。评论表和说说表一样，每个登录用户都可以评论其他用户发表的说说，并且也必须有一个字段指向唯一的一个用户，当然评论表还必须有一个字段指向唯一的一条说说。所以评论表和用户表、说说表都有实体联系。评论表需要记录的信息有评论内容、评论日期、评论人等。在用户相互关注的功能上，实现起来比较简单，只需要建立一张关系表，记录谁关注了谁。关注表就两个字段，关注人和被关注人。
5.4 逻辑结构设计
通过对操作流程和功能模块的详细分析，本设计一共可以分为评论表、说说表、粉丝表、用户表等数据库表。
用户表(user)：保存用户基本信息，在用户注册的时候插入新数据，在登录的时候查询数据验证，在个人中心修改数据的时候更新。此表有md5加密的密码和用户名和其他基本信息字段。用户表是最重要的表，其他表都会基于这个表查询。数据结构如下表5.1所示。
其中约束的简写PK：主键，FK：外键，NN：非空，下同。
表 5.1 用户表结构
字段名称 类型 长度 约束 备注
id int 11 PK，NN id(主键)
name varchar 20 NN 用户名
password varchar 40 NN 密码
question varchar 50 NN 密码保护问题
answer varchar 50 NN 密保问题答案
gender varchar 1 性别（默认为3，1:男，2:女，3:未设置）
motto varchar 50 个性签名
loving char 1 NN 是否恋爱（默认为3，1:恋爱，2:单身，3:未设置）
qq varchar 11 QQ号码
birthday varchar 10 生日
phone varchar 11 手机
primary_school varchar 50 小学
middle_school varchar 50 中学
high_school varchar 50 高中
university varchar 50 大学
hometown varchar 60 家乡
progress varchar 3 资料完善度（默认为1，最多100）
head char 1 是否设置头像（默认为0：没有设置，1：设置过。没有设置头像以默认图片代替。）
add_date timestamp 注册日期
profession varchar 50 专业
说说表（says）：说说表用于保存用户发表的说说，和发表的图片路径。数据结构如下表5.2所示。
表5.2 说说表结构
字段名称 类型 长度 约束 备注
id int 11 PK，NN id(主键)
to_who init 11 NN，FK 指向发表此说说的用户（id）
create_date timestamp NN 说说创建日期
aggre_num int 11 NN 点赞数量
com_num int 11 NN 评论数量
content varchar 600 NN 说说内容
img varchar 14 发表的说说的图片路径（唯一指向一张图片的相对路径）
粉丝表(fans)：粉丝表主要记录用户之间的关注，用户操作了关注或者取消关注就会插入一条数据或者删除数据，以记录用户之间的关注情况。数据结构如下表5.3所示。
表5.3 粉丝表结构
字段名称 类型 长度 约束 备注
id int 11 PK，NN id(主键)
from_care int 11 FK，NN 关注人（id）
to_care int 11 FK，NN 被关注人（id）
评论表(comment)：评论表用于保存用户评论其他人的说说的数据表。数据结构如下表5.4所示。
表5.4 评论表结构
字段名称 类型 长度 约束 备注
id int 11 PK，NN id(主键)
user_id int 11 FK，NN 评论人（id）
tolk_id int 11 FK，NN 被评论说说（id）
content varchar 200 NN 评论内容
create_date timestamp NN 评论日期
第6章 系统开发与实现
6.1 CSS、HTML、JS简介
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
HTML英语意思是Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。HTML是由Web的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记式语言。它是标准通用化标记语言SGML的应用。
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML一种能够被广泛理解的语言。
HTML( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字、动画、影视等内容显示出来。因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。 超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。在HTML中每标签的符号都是一条命令，它告诉浏览器如何显示文本。这些标签均由"<“和”>"符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字 属性>”来表示。
HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个Web浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。Web浏览器是用来打开Web网页文件，提供给用户查看Web资源的客户端程序。
JavaScript是一种网页编程技术，其功能强大，实现简单方便，入门简单，即使是程序设计新手也可以非常快速容易地使用JavaScript进行简单的编程。
JavaScript就是一种基于对象和事件驱动，并具有安全性能的脚本语言，脚本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言，而不需要服务器的处理和响应，当然JavaScript也可以做到与服务器的交互响应，而相对的服务器语言像ASP，PHP，JSP等需要将命令上传服务器，由服务器处理后回传处理结果。
JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应，使网页更好地与用户交互；在利用客户端个人电脑性能资源的同时，适当减小服务器端的压力，并减少用户等待时间。
本设计基于HTML5，CSS3，JavaScript而开发，所以对这三门语言的熟练使用时很有必要的。
6.2 前端搭建与分析
6.2.1 网站界面实现
页面的基本骨架搭建，本设计运用了base.css（由本人原创），base.css同时兼具resetCSS 和 CSS基本原子类功能，比如最常用到的浮动，在原子类本人定位为：.fl { float: left; } .fr { float: right; }。在引入base.css后，搭建HTML骨架的同时就可以赋值class给HTML元素。同时base.css中的reset基础样式格式化了不同浏览器的差异。这样整个页面的基本构架就在base.css和HTML5骨架下搭建完成。
页面布局美化，每个页面（模块）都有一个与之对应的CSS文件，此CSS文件的样式表的渲染顺序是从页面至上而下，由内而外，比如头部（header），导航栏(nav)，主体（main）,侧边栏（aside）,主区域（section）,页脚（footer）等等。每个栏目都有自己的独特样式和表现，都需要在当前文件与之对应的CSS文件中一行一行的写出来。这一阶段完成了页面的美化工作，但是还没有适应页面动画和点击响应等操作。
6.2.2 页面共用事件与模块
本设计页面共用模块分CSS，HTML，JavaScript三个方面的共用模块。
CSS共用模块除了上一节提到的base.css之外，还有CSS动画公共模块：animate.css。本设计参考了github开源的的一个同名CSS库，并且优化和裁剪很多CSS处理效果，成为自己的animate.css文件。只需在想要加动画的标签上加上animate.css类就能触发相应的CSS3的transform或animate动画。
页面公共也包括，公共文件，比如页头，是需要在每个页面都要引入的。引入公共页面文件（模块）的同时，也引入了公共的CSS模块。
JavaScript共用的事件模块，最多的就是页面处理的方法。本设计引用了比较著名的jQuery.js，利用jQuery.js获取页面Dom结点。jQuery.js除了获取页面节点被采取为公共模块之外，还有jQuery.js的公共页面处理方法，比如fadeIn()和remove()，这些都是页面的公共的事件和处理方法。
本人还封装了网页常用的方法，比如Cookie的读取、存储和删除等操作。和基本的其他的操作，如解决JavaScript的弱类型语言的乘法和加法的不足的而编写的公共模块方法。
6.2.3数据验证
网页的数据验证是很有必要的。现在的基于B/S的架构的开发模式，即使在S端（service，服务端）数据验证做的十分出色也有在B端（Browser，浏览器端）做数据验证的必要。现在的开发验证绝大部分在表单区域，或者说是输入框的区域，当用户（或者灌水机器人）填写信息内容给服务端的时候，如果没有经过浏览器端JavaScript的数据验证，那么就很有可能会导致不正确的信息发送到服务端，而如果服务端也没有做相应的验证，那么这些不正确的信息就可能保存在数据库，在数据取出展示在页面的时候就会混乱，或者这些不正确的信息会导致数据库的插入数据不按照自己编写的代码逻辑来走。所以不论是在网站后端还是前端，数据的验证是很有必要的。在各大网站，如淘宝，百度等大型公司和很多小型公司都做了完善的数据验证，比如登录验证邮箱是否合格，手好号码是否正确，用户名是否重复等等。
本设计在浏览器端用JavaScript和HTML5做了页面上的数据判断。
比如用jQuery验证id为test的input Dom节点的的value值是否是空，代码如下：
if(
.
t
r
i
m
(
.trim(
.trim((‘#test’).val())) {
alert(‘您输入的内容不能为空！’);
}。
用HTML5验证input DOM节点的最大长度为10，代码如下：
。
除了运用JavaScript和HTML5验证，本设计在PHP服务端也做了大量的数据验证。比如验证用户是否登录，验证AJAX发送过来的数据是不是正确的，验证用户名是否是重复，等等一些列操作。比如验证Session的name和id是否为空，代码如下：
if(!
S
e
s
s
i
o
n
[
′
n
a
m
e
′
]
∣
∣
!
_Session['name'] || !
Session[′name′]∣∣!_Session[‘id’]){ echo ‘请登录’; }
6.2.4动画处理
本设计运用到了CSS3的transition、animation和jQuery的显示、隐藏动画函数（fadeIn和fadeOut）。
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡，语法如下：transition: transition-property transition-duration transition-timing-function transition-delay [, …]。所以当网页元素在鼠标经过(hover)的时候，需要给一个过渡动画，就可以利用CSS3的的自动过渡。比如某个Dom元素的起始背景色是#f00(红色)需要在鼠标悬浮的时候以动画的方式变成绿色，代码如下：
.thisClass {
background-color: #f00;
transition: background-color .3s ease;
}
.thisClass:hover {
background-color: #0f0;
}
在本设计首页中的好友寻找模块，实现了一个永久循环匀速旋转的Dom节点。运行效果如图6.1所示。
图 6.1 永久循环匀速旋转的Dom节点
这里运用了CSS3的animation方法。
最后一方面的动画就是jQuery库自带的动画方法：fadeIn、fadeOut，使用方法如：fadeIn(400, function() { console.log(‘已经加载完成’); });
fadeIn、fadeOut这两个函数很简单，在jQuery内部根据用户传递的第一个参数（时间），去循环显示当前Dom节点(利用CSS的display、opacity属性)，最后执行用户传来第二个参数（回调函数）。
6.3 后端数据与逻辑处理
6.3.1 公共数据库操作函数
PHP链接数据库需要用户名、用户密码、数据库名、服务器四个参数。
在本设计中，构建了一个名叫DB（database）的类，DB有四个共有（public）属性，在构建函数（__construct）中会给这四个共有属性赋初始值（来自配置文件）。通过这四个参数就可以连接到服务器的MySQL数据库，然后得到一个链接结果，把此结果存储在一个变量中，如
c
o
n
n
e
c
t
变量。那么
D
B
类的其他方法都都使用这个
connect变量。那么DB类的其他方法都都使用这个
connect变量。那么DB类的其他方法都都使用这个connect链接，从而对数据库增删改查。同时DB类拥有一个close方法，用来关闭与数据库的链接，在每次和数据库交互完成后，都需要调用本方法，以释放数据的链接数量，似新能得意提高。
比如公共方法“通过SQL语句获取数据”，这个方法接受一个参数（SQL字符串），然后通过该SQL语句联通
c
o
n
n
e
c
t
属性查询数据库，得到数据结果集。然后根据数据结果集封装成数据
J
S
O
N
对象，关键代码如下：
p
u
b
l
i
c
f
u
n
c
t
i
o
n
g
e
t
O
b
j
L
i
s
t
B
y
S
Q
L
(
connect属性查询数据库，得到数据结果集。然后根据数据结果集封装成数据JSON对象，关键代码如下： public function getObjListBySQL(
connect属性查询数据库，得到数据结果集。然后根据数据结果集封装成数据JSON对象，关键代码如下：publicfunctiongetObjListBySQL(SQL) {
$this->open();
r
s
=
m
y
s
q
l
i
q
u
e
r
y
(
rs = mysqli_query(
rs=mysqliquery(this->conn, $SQL);
o
b
j
L
i
s
t
=
a
r
r
a
y
(
)
;
w
h
i
l
e
(
objList = array(); while (
objList=array();while(obj = mysqli_fetch_object(KaTeX parse error: Expected '}', got 'EOF' at end of input: rs)) { if (obj) { $objList[] = $obj; } }
$this->close();
return KaTeX parse error: Expected 'EOF', got '}' at position 10: objList; }̲ 6.3.2 好友寻找功能 本…_POST[‘search’]) && preg_match(“/1+$/u”, $_POST[‘search’])
构建SQL语句支持模糊查询关键代码如下：
// 以空格分开搜索关键字
KaTeX parse error: Undefined control sequence: \s at position 21: … preg_split("/[\̲s̲]+/", trim(_POST[‘search’]));
l
=
c
o
u
n
t
(
l = count(
l=count(arr);
// 构建查询SQL语句前半部分
S
Q
L
=
"
S
E
L
E
C
T
‘
i
d
‘
,
‘
n
a
m
e
‘
,
‘
g
e
n
d
e
r
‘
,
‘
m
o
t
t
o
‘
,
‘
l
o
v
i
n
g
‘
,
‘
p
r
o
g
r
e
s
s
‘
,
‘
h
e
a
d
‘
F
R
O
M
‘
c
h
u
s
e
r
‘
W
H
E
R
E
‘
n
a
m
e
‘
L
I
K
E
"
;
/
/
根据搜索关键字构建后半部分
S
Q
L
语句
w
h
i
l
e
(
SQL = "SELECT `id`, `name`, `gender`, `motto`, `loving`, `progress`, `head` FROM `ch_user` WHERE `name` LIKE "; // 根据搜索关键字构建后半部分SQL语句 while (
SQL="SELECT‘id‘,‘name‘,‘gender‘,‘motto‘,‘loving‘,‘progress‘,‘head‘FROM‘chuser‘WHERE‘name‘LIKE";//根据搜索关键字构建后半部分SQL语句while(l-- ) {
if ($l !== 0) $SQL .= ‘’%’ .
a
r
r
[
arr[
arr[l] . ‘%’ OR name LIKE ‘;
else $SQL .= ‘’%’ .
a
r
r
[
arr[
arr[l] . ‘%’';
}
模块二需要2个GET参数，user、type。type参数表示用户是要搜粉丝好友还是关注好友，user参数表示当前的寻找的用户id。
在好友搜索前，根据GET参数type判断用户是想查看粉丝好友，还是关注好友。然后验证GET参数user的数据格式是否合法（只能为数字，且不能为空），如果参数user通过了合法性验证，那么就构建SQL语句链接数据库开始搜索相关数据，最后得到数据和展示数据。如果参数user没有通过合法性验证就跳转页面到首页。
好友搜索逻辑流程如图6.2所示。
图 6.2 数据搜索逻辑流程图
6.3.3 发表说说
用户在登录过后进入个人中心页面，点击“发表童言”按钮，就会弹出发表说说的弹窗，用户输入信息和选择图片后，点击发表按钮就可以提交form表单到deal_say.php的页面，这个页面首先提示用户“正在处理说说…”，然后进行相应的处理。
发表说说流程如图6.3所示。
图 6.3 发表说说流程图
部分关键代码如下：
//getcwd() 获取当前文件路径
i
m
g
n
a
m
e
=
t
i
m
e
(
)
.
img_name = time().
imgname=time()._POST[‘imgSuffix’];
KaTeX parse error: Undefined control sequence: \user at position 24: …th = getcwd()."\̲u̲s̲e̲r̲_img\\".img_name;
// 以时间戳转存图片
o
k
=
m
o
v
e
u
p
l
o
a
d
e
d
f
i
l
e
(
ok = move_uploaded_file(
ok=moveuploadedfile(_FILES[‘publishImg’][‘tmp_name’], $upFilePath);
// 开始存数据库 说说内容
include(“…/admin/ch.class.php”);
$columns = array(“to_who”, “create_date”, “content”, “img”);
v
a
l
u
e
s
=
a
r
r
a
y
(
values = array(
values=array(_Cookie[‘ch_user_id’], date(“Y-m-d H:i:s”, time()),
$_POST[‘publishText’], $img_name);
$db = new DB();
$id = $db->insertData(“ch_says”, $columns, $values);
6.3.4 关注与取消关注
当“童年网”用户A关注用户B的时候，用户B的粉丝列表就多了一个人用户A，同样的道理用户A的关注列表也多了用户B。实现这样的关注功能，只需要在粉丝表插入一下条新的数据即可。
首先判断传过来的POST数据的存在和合法性，通过判断后，链接数据库，获取数据库是否已经有这一条数据，如果有则表示要取消关注，则删除相应的数据记录，如果没有则表示要添加粉丝，则添加相应的数据记录。
部分关键代码如下：
// 获取值 判断是否有关注数据
$status = $db->getRowByTwo(‘ch_fans’, ‘from_care’, $_POST[‘from’], ‘to_care’,
P
O
S
T
[
′
t
o
′
]
)
;
i
f
(
_POST['to']); if (
POST[′to′]);if(status) {
$status = $db->delete(‘ch_fans’, ‘id’, $status); // 删除关注数据
} else {
$columns = array(‘from_care’, ‘to_care’); // 插入关注数据
v
a
l
u
e
s
=
a
r
r
a
y
(
values = array(
values=array(_POST[‘from’], $_POST[‘to’]);
$status = $db->insertData(‘ch_fans’, $columns, $values);
}
6.4 重要功能描述与技术分析
6.4.1 用户头像修改
用户初次进入个人中心的时候，是没有设置头像的（判断用户表head表字段，表示是否设置头像），如果head字段为“1”表示设置过头像，就直接读取当前用户的头像目录的图片。如果head字段为“0”表示此用户没有设置过头像，就显示默认图片（路径固定）。
在个人中心的头部区域，显示有当前头像（默认或者用户自定义的头像），用户点击后会跳转到啊相应的头像设置页面。
头像设置页面如图6.4所示。
图 6.4 用户头像设置页面
在头像设置页面会再次去当前登录用户的用户目录寻找曾经上传过的头像，如果找到就显示出来，可以让用户继续编辑，如果没有找到就提示用户上传图片。
用户在上传图片的时候会检测图片的格式和大小，通过JavaScript获取当前图片的全名，以“.”为分隔符，利用split(‘.’)方法得到数组，拿去第一个元素，得到图片后缀名。判断此后缀名时候是合法的（比如jpeg，png，gif等等）。在图片格式判断合法后，会继续向PHP后端提交数据，这个时候，PHP会根据HTTP传过来的参数得到当前文件的大小，如果文件太大会返回页面提示用户”图片太大，请选择其他图片”。
经过所有的判断过后，PHP在服务端根据用户上传的图片，经过压缩处理放在当前用户的用户目录下面，命名规则为：user_img>user_id>head_img>head.jpeg，然后回写此路径给页面，页面上就能展示出当前图片。
因为用户上传的是一张比例不规范且内存很大的图片，所以接下来就是图片裁剪。要实现图片裁剪功能，就必须得有图片裁剪时候的预览功能。在实现这一功能的时候，本人当初是有想过了利用网上的图片裁剪插件，但是过后，觉得不合适。在翻阅某技术社区的一片帖子后，得到了灵感。图片裁剪预览其实很简单，在图片裁剪区域，固定一个裁剪比例（比如本设计的1：1），实现出一个裁剪框。这个裁剪框的宽高比就是设置好的宽高比，利用CSS和CSS3的某些属性就能完成此功能，但是这还不够，这个裁剪框需要用户拖动的时候也能跟着动，这一点就有点麻烦，需要监听很多用户的鼠标点击和拖动事件，在这一点的处理上花了很久的时间。
具体的处理流程：用户鼠标点下（mouseDown）->记录位置A->鼠标移动->得到位置B->根据位置B的屏幕相对坐标和位置A的屏幕相对坐标可以计算出用户的移动方向和在此方向的移动距离。得到这写数据后就能吧裁剪框利用CSS的绝对定位（position: absolute;）移动到鼠标移动的位置。在计算过程后还有性能等一些列需要处理的问题，本人利用的JavaScript的setTimeout方法延迟运行，那么在鼠标快速移动的时候也不至于页面很不流畅。
在鼠标移动的过程中，不仅仅要实现裁剪框的位置移动，更重要的实现预览功能。
头像裁剪预览流程图6.5所示。
图 6.5 头像裁剪预览流程图
6.4.2 全屏背景幻灯片
本设计的设计是想突出，欢快，活波，开心……所以，本人就想到了全屏背景幻灯片这么一个概念。在实现的的时候，难度不大。基本实现是运用CSS的背景属性：background：url(/imgPath)，利用background-size可以实现背景图自适应：background-size: cover，利用JavaScript的时间循环定时器：setInterval(function() { // 代码 }, _time)，每隔_time毫秒给背景图的url更换。在背景配置参数初始化的时候就需要给出要轮播的图片数组，这个时候就会从这个数组里面循环轮播。
6.4.3 说说评论与点赞
说说评论功能实现需要2个步骤。 首先加载出当前已经评论的内容，展示出来，如果没有内容则提示。 运行效果如图： img 然后用户填写自己的评论，信息验证通过后，就可以提交。
主要涉及到的内容有AJAX动态获取数据，模板字符串拼接，Dom节点渲染，数据验证等等。
在用户比较喜欢某个用户的说说的时候，但是又不想评论，这个时候，就可以使用点赞功能。当用户对一条说说点赞的时候，系统会自动记录当前用户已经点赞过这条说说，就不能继续点赞。
点赞的时候也是运用的AJAX无刷新，异步实现数据获取和更新，在点赞成功后会吧点赞后的数量跟新进Dom节点，显示反馈给点赞用户。
6.4.4 数据结构与算法
本设计运用了大量的数据结构和简单的算法。而现在的Web程序员使用传统算法和数据结构都比较少，因为很多算法都是包装好的，不用实现者去操心 具体的实现细节，如PHP的取栈操作array_pop，进栈操作array_push，都有指定的库函数，导致开发者对基础算法的研究越来越少，最后成为一个工具的傀儡而已。所以本设计在运用了少量的系统数据结构以外，还自己实现了很多需要的数据结构和算法。
在“全屏背景幻灯片”的实现过程中，运用到类循环队列的数据结构。循环队列在内存占用中类似数组，也可以用数组模拟循环队列。首先遍历数组，用数组的当前下标判断数组遍历到最后一位的时候，把当前元素的指向数组第一位，然后又重新开始遍历，这样就实现了循环队列的操作。
第7章 综合测试
7.1测试的目的与意义
网站测试的目的是尽可能发现并改正被测试网站中的错误，提高网站的可靠性。测试往往会花很大力气设计一些复杂的测试用例去发现一些迄今尚未发现的缺陷，而如今很多测试人员并不关心这些缺陷是否在实际用户的使用过程当中是否会发生，从而浪费了大量的宝贵时间，那为什么会出现这样的额问题呢？就是因为对测试目的错误的理解造成的。网站的bug的数量是无从估计的，如果测试的目的是为了找bug，那么测试工作将变成一项无法完成也无法衡量进度而且部分无效的工作（因为有些bug在实际的运行过程当中根本不会发生）。
那么测试的目的应该是什么呢？在1983年IEEE提出了软件测试的定义：“使用人工或自动手段来运行或测定某个系统的过程，其目的在于检验它是否满足规定的需求或是弄清预期结果与实际结果之间的差别。”
所以，测试的目的应该是验证需求，bug（预期结果与实际结果之间的差别）是这个过程中的顺产物而非目标。测试人员应该更专注于应用或系统本身，在客户和产品经理预期的方向上寻找bug，而不需要去关心那些根本不会发生的情况。那么测试的目的可以总结为以下五点：
1、验证网站需求和功能是否得到完整实现；
2、验证网站是否可以发布使用；
3、发现网站系统的缺陷、错误及不足；
4、预防用户使用网站时可能出现的问题；
5、提供可以用以分析的测试结果数据。
7.2测试的方法与流程
在Web工程过程中基于Web系统的测试、确认和验收是一项重要的工作。基于Web的系统测试与传统的软件测试不同，它不但需要检查和验证是否按照设计的要求运行，而且还要测试系统在不同用户的浏览器端的显示是否合适。重要的是，还要从最终用户的角度进行安全性和可用性测试。然而Internet和Web媒体的不可预见性使测试基于Web的系统变得困难。
因此本人必须为“童年网”设计一套测试方法和流程。
测试方法：
1、白盒测试：测试人员可以看到软件系统的内部结构，并且使用软件的内部知识来指导测试数据及方法的选择。目前大多数的测试人员都是做黑盒测试，很少有做白盒测试的。因为白盒测试对软件测试人员的要求非常高，需要有很多编程经验。做PHP程序的白盒测试你要能看得懂PHP代码。做Java程序的测试，需要你能看懂Java的代码。但是本设计的测试是由本人独自完成，所以有必要进行白盒测试。
2、黑盒测试：把网站系统当作一个“黑箱”，无法了解或使用系统的内部结构及知识。从网站的行为，而不是内部结构出发来设计测试。经过白盒测试后，没有原则性的问题，或者有些难以发现的问题没有发现，然后就可以开始黑盒测试，本人觉得黑盒测试更偏向于“感性”而白盒测试跟偏向于“理性”，但是两者都必不可少的，测试流程如图7.1所示。
图 7.1 测试流程图
7.3功能测试
7.3.1 界面测试
“童年网”的设计也是本人通过photoShop完成的，所以在界面的审美程度不能和专业设计师比较。但是在此前提下，界面的实现效果首先要达到：在各大浏览器的兼容情况，在保证界面排版和功能都正常。在不同的大小的窗口模式要能实现不混乱，即使没有做响应式设计，也要达到界面的完整性。
首先进行浏览器兼容测试，以首页为测试对象。在最新版本的Chrome浏览器打开网站首页。然后在国内使用较多的360浏览器下打开。然后进行，最难兼容的IE浏览器测试。在IE11到IE10打开。单独在IE9模式下。最后在IE8和以下测试。界面测试结果如图7.2所示。
图 7.2 界面测试结果图
7.3.2 功能测试用例
1、用户注册测试用例。以用户名userName注册，从userName已经注册和未注册区分测试，从注册时确认密码输入不相同和相同进行测试。
用户注册测试详请见表7.1所示。
表7.1 用户注册测试试
执行的操作 预期结果 实际结果 结论
注册（用户名为userName,未注册） 提示用户名已经被注册 提示用户名已经被注册 测试正确
注册（用户名为userName,已注册） 注册成功，跳转到首页 注册成功，跳转到首页 测试正确
2、用户发表说说测试用例。以用户userName发表测试，从发表内容为空与否和发表内容长度和发表说说是否带图片3个进行测试。
用户发表说说测试详情见表7.2所示。
表7.2 发表说说测试
执行的操作 预期结果 实际结果 结论
发表说说内容为空，无图 提示“长度只能在1-200” 提示“长度只能在1-200” 测试正确
发表说说内容超过200字，有图 提示“长度只能在1-200” 提示“长度只能在1-200” 测试正确
发表说说内容100字，有图 发布成功 发布成功 测试正确
3、头像修改测试。用户userName进行头像修改，本别上传一张4M以上的图片和4M一下的图片进行测试。
头像修改测试详情见表7.3所示。
表7.3 头像修改测试
执行的操作 预期结果 实际结果 结论
图片大于4M 提示图片太大 提示图片太大 测试正确
图片小于4M 上传成功 上传成功 测试正确
4、用户资料修改测试。用户userName进入个人中心，修改个人资料。以输入内容为空和不为空，以增加信息和删除信息为测试对比用例。
用户资料修改测试详情见表7.4所示。
表7.4 用户资料修改
执行的操作 预期结果 实际结果 结论
没有任何信息修改，然后保存 提示修改成功 提示修改成功 测试正确
修改信息，然后保存 提示修改成功 提示修改成功 测试正确
删除信息然后保存 提示修改成功 提示修改成功 测试正确
7.3.3 流程测试
以未登录和已登录进行整体流程测试。
页面流程测试详情见表7.5所示。
表7.5 页面流程
执行的操作 预期结果 实际结果 结论
未登录用户进入首页 提示登录注册 提示登录注册 测试正确
已登录用户进入首页 跳转到首页 跳转到首页 测试正确
7.4 性能测试
以Chrome浏览器的Network面板和Timeline面板进行测试。查看页面加载性能和速度。这里以首页为测试页面。
Network测试结果如图7.3所示，Timeline测试结果如图7.4所示。
图 7.3 Network测试结果图
图 7.4 Timeline测试结果图
7.5 测试结果分析
经过上述测试方法与流程，测试了界面，功能，性能。
在界面方面，浏览器支持情况良好，虽然在IE9没有了动画，但是不影响性能。在IE8模式下会自动跳转到提示用户此版本浏览器过低的页面，因此做到了“优雅降级”的同时也做到了友好交互。
在功能测试方面，所有的测试用例都通过测试。每个功能都是按照需求而完成了，做到了在界面测试通过的情况下，功能也能完成。
在性能测试方面，有一些缺点。页面Dom节点加载时间221ms，页面整体加载时间255ms。Dom加载时间远远小于3s，是很好的速度。页面渲染用了255（ms）-221(ms)=34（ms）,34ms也是很流畅的页面渲染时间。在资源加载的情况，还有未压缩的CSS和JavaScript文件，因此页面加载性能还有待提高。
第8章 总结
本设计运用了CSS3、HTML5、JavaScript、jQuery、PHP、MySQL等技术 ，完成了一个基于B/S架构的社区交友网站。
通过本次设计学习到了很多新的技术，增加了对网站搭建的经验。学会了数据库搭建、MySQL内联查询语句。在这次设计中收获了实战经验，并且更加充分理解到了Web的建设过程。
本次设计的搭建，没有利用PHP的模板引擎，如Smart。所有在编写静态页面和PHP有和数据交互的代码的时候，会比较混乱。如果代码格式不规范就会造成难于阅读和维护。因此在模板引擎方面还有待加强。
本设计的内容是偏向于前端。在数据库和后端方面，采用了较简单的代码逻辑。而在前端方面，没有采用别人已经造好的“轮子”，从技术点上理解到整个Web前端的基础技术和原理。
比如在前端这块，本人从设计中学到CSS的高效原子类操作，减少重复代码的生产。在JavaScript这一方面，更加的理解JavaScript的万物皆对象的这么一个理念，和它的原型链（prototype ，proto）的工作机制。由于技术的限制，本设计目前没有涉及代码打包压缩的构建工具方面的知识，比如vue.js、gulp.js等。所以本设计打算当本人掌握了构建工具后，再对前端代码整体优化压缩。
在本项目中，完成了最开始对它的需求定义和规划，通过了测试。但是本人觉得所以的东西都没有完美的，在当前条件下，做到了就是完美。因此，本项目达到了目前所有的需求与标准。在这次项目实践中，前端技术更加使我着迷，因此在以后的职业规划中，前端开发应该是本人着重要钻研的点。
致 谢
本人从一个不会计算机技术的高中生，从一个不会数据结构的非专业小白，在大学里，在老师的指导下，学会了很多知识。让本人能在即将毕业的时候有一技之长，在社会中能靠自己过得漂亮和精彩。
因此要首先要感谢在大学期间教过我的所有老师和辅导员。大一上期，宋健老师带领我们进入C语言的世界。大一下期，袁超老师让本人领略了C++的风采。还有华才健老师，教会我静态网页建设。还有我们公认的美女老师张颖慈传授算法与数据结构方面的知识。要感谢的老师太多：Windows程序设计，张立人；计算机组成原理，欧阳俊林；数据库系统原理及应用，编译原理，黎远松；计算机网络，曾浩；J2EE程序设计，软件开发案例分析，赵春生；多媒体技术及应用，吕戈静；软件工程，彭龑；软件测试与质量保证，何海涛；移动开发技术，周刚。当然还有这次毕业设计的指导老师：梁兴建老师。
还有在大学期间，“科技创新中心”的所有小伙伴和我们软件三班的所有他同学，是你们陪我度过无数个日日夜夜，能有今天的学识有很大程度是因为你们。当然同时也要感谢“科创”的领导人：肖书记。
转眼一瞬间，回首大学军训的时候还在眼前，而现在都将要踏上人生的又一个旅途。感谢这四年来的所有经历，感谢四川理工学院，计算机学院，感谢图书馆，感谢看过的每一本书籍，感谢以往在学校的每一天。因为这些都是心中的回忆，都是人生的痕迹。
没有想过毕业之际是什么时候，现在想想就已经在眼前。时间很快，在大四下学期这段时间，体验很多，经历了很多,有过几段工作经历，有过很多的新的体验。
最后感谢我的父母和家人。
谢谢。
参考文献
[1] [美]Nicholas C.Zakas.JavaScript高级程序设计（第3版）[M].北京：人民邮电出版社，2006.
[2] 列旭松，陈文.PHP核心技术与最佳实践[M].北京：机械工业出版社，2012.
[3] 李红.数据库原理与应用[M].北京:机械工业出版社，2012.
[4] 巴德.精通CSS[M]. 北京:人民邮电出版社，2010.
[5] [英]Jeremy Keith，[加]Jeffrey Sambells.JavaScript DOM编程艺术（第2版）[M].北京：人民邮电出版社，2014.
[6] [美]弗拉纳根.JavaScript权威指南（第5版）[M].北京：机械工业出版社，2007. [7] [美]Nicholas C.Zakas.高性能JavaScript[M].北京：电子工业出版社，2010.
[8] [美]Ross harmes，[美]Dustin Diaz.JavaScript设计模式[M].北京：人民邮电出版社，2009.
[9] [美]Adam Freeman.HTML5权威指南[M].北京：人民邮电出版社，2014.
[10] 廖伟华.图解CSS3[M].北京：机械工业出版社，2014.
[11] [美]Michael Bowers，[美]Dionysios Synodinos，[美]Victor Sumner.HTML5与CSS3设计模式[M].北京：人民邮电出版社，2013.
[12] [美]Robbins.Web前端工程师修炼之道[M].北京：机械工业出版社，2014.
[13] [美]Steve Souders.高性能网站建设指南[M].北京：电子工业出版社，2015.
附 录
附录A:主要源程序
童年交友分享社区主要源程序代码
//--------------------------------------------------------------------------
-
\x{4e00}-\x{9fa5}A-Za-z0-9 ↩︎