基于PHP实现的WEB图片共享系统

1、基于基于 PHPPHP 实现的实现的 WEBWEB 图片共享系统图片共享系统 摘摘 要要 本系统主要从现代社会电脑化观念出发，通过对现有资料的分析、研究和 整理，确定了在基于现存的 WEB2.0 模式下开发图片共享系统的可行性、紧迫性 和必要性。在现阶段,国内基于 WEB2.0 的图片共享系统才刚起步,该市场还有很 大的介入空间。其中，在国外，已经有了很成熟的图片共享平台。在 WEB2.0 时 代，信息由以前的服务器发布变成了用户发布。也就是从以前的通过服务器搜 集资源并且发布变成了通过用户提供资源，服务器进行整理，分类，发布的模 式。而且这种模式对于一个网站的用户吸引度也远远高于传统模式。

2、本论文旨在详细说明如何在基于 PHP 以及 Ajax 框架的环境下，使用 MVC 的 开发模式，完成一个具有完整功能的图片上传以及图片管理系统，并能够实现 方便的添加，删除图片以及分类，后台主要实现对用户以及用户的图片进行管 理；能实现相关个人的设置更改。并且系统中对于图片上传需要有比较直观的 进度显示，图片的呈现使用比较友善的显示效果。 关键词关键词：模型-视图-控制器；图片共享；Ajax A Picture Share System Based on PHP Abstract This system mainly embarks from the modern society comput

3、erization. Based on existence information analysis, the research and the reorganization, we considered the pressing and the necessity of implementing order form developing picture share system base on WEB2.0.At the present stage, the domestic picture share system based on WEB2.0 is just underway. Th

4、ere is expansive to take part in this field, at the same time, mature picture share system aboard is already exist for a long time. In WEB2.0 period, the style of information publishing turned from server publishing to user publishing .In another word, it is changed from server publishing informatio

5、n to user providing information, and in this case, servers only need to coordinating, sorting and republishing. Furthermore, in this model, a website is much friendlier to user. This thesis mainly describes how to developing fully functional pictures upload and picture management system. This system

6、 can easy to add, delete pictures and categories. In the backstage management, is mainly to implementing user and pictures management and user information changing. In this system, picture uploading is intuitionisticly showing, and the picture is need to be shown user friendly. Key words: MVC; Pictu

7、re Share; Ajax 目目 录录 论文总页数：36 页 1引言 .1 2系统概述 .1 3总体设计 .2 3.1系统需求分析 .2 3.1.1图片上传需要支持的方式.2 3.1.2用户上传图片需要支持的格式.2 3.1.3分类.2 3.1.4图片管理.2 3.1.5图片展现.3 3.1.6查询功能.3 3.1.7用户管理.3 3.2总体结构 .3 3.3图片共享系统流程 .3 3.4图片共享系统模块功能介绍 .5 3.4.1用户界面子模块划分.5 3.4.2管理后台子模块划分.7 4方案选择 .8 4.1方案比较 .8 4.1.1系统模式比较.8 4.1.2程序语言比较.8 4.2方案

8、选择 .9 4.3系统技术平台 .9 4.4开发环境搭建 .9 5实现技术与数据结构 .12 5.1系统架构设计 .12 5.1.1网络架构.12 5.1.2系统逻辑服务器.12 5.2系统处理流程 .13 5.2.1基于 MVC 的 Smartemplate 架构 .13 5.2.2SmartTemplate 技术概述.14 5.2.3SmartTemplate 与 html 模版之间的关系 .15 5.3数据库设计 .18 5.3.1前台用户主要数据库表结构设计.21 5.3.2管理后台数据库表结构设计.22 6特殊问题解决办法 .24 6.1乱码问题 .24 6.2动态显示上传进度 .2

9、4 6.3图片随意批量上传问题 .25 7结果测试、性能分析 .29 7.1运行模块组合 .29 7.2系统登陆界面 .29 7.3模块应用举例 .30 7.4系统现存问题 .33 7.4.1批量上传连接的 URL 参数泄漏.33 7.4.2批量上传页面源代码中回调脚本泄漏用户 ID .33 7.4.3无法正常返回.33 7.5改进意见 .34 结 论.34 参考文献.34 致 谢.35 声 明.36 商业源代码，全套计算机毕业设计免费下载 http:/ 更多全套设计联系 QQ: 最新设计大全 http:/ 1 1引言引言 随着前段时间 WEB2.0 的热潮，整个 BS 开发方向和 WEB 的

10、运营模式渐渐开 始向另一个方向转变。随着 AJAX 的重新使用，大大提高了用户的 WEB 体验。其 页面局部刷新的方式在很大程度上减少了用户访问页面时所花的时间。并且让 用户在提高体验的同时，也能够参与的内容的提供者里面来。在传统的 WEB 系 统中，都是有某个网站的管理员，或者类似的人去收集网站所需要的资源，并 且将这些资源发布出去，但是随着 WEB2.0 的兴起，分享和体验逐渐占据了网站 发展的重要的位置。于是，网站从以前的集中发布式，渐渐的转变成了用户提 供资源，网站整理发布的模式。其中最为常见的就是 BLOG，WIKI 这些形势。其 中图片共享是很有发展潜力的一个方向。首先，中国拥有数

11、码相机的人群正在 以一个稳定的数值在不断增长，但是，目前没有多少网站注意到了这片市场的 潜力。当用户拍了照片后，他们会找一个可以方便的共享自己所拍的照片的地 方。但是，现在传统的网站，要么操作太复杂，要么就是不方便共享，比如 163，不支持外部连接图片，虽然这样做的确可以明显的降低服务器的负担，但 是对用户体验却大大折扣。试想，当一个用户想直接给朋友看他某个相册里面 的某一张图片的时候，他还必须将自己的相册连接给对方，然后对方还要在相 册里面找到那张图片后才能查看。而且 163 上的图片没有专门针对数码照片的 整理和分类，也就是说多而不精。导致资源无法有效利用。国内目前在这方面 兴起的网站还不

12、多，国外也有比较出名的，例如：Flikre：， 巴巴变： 等。其中巴巴变基本仿照 FLIKRE 改版过来。就目 前看来，该市场还有比较大的介入空间。 就目前看来，图片共享系统现在需要解决的问题主要是如何更快的让用户 上传图片。如何以更快的形式显示图片。其中，影响到系统开发的主要有以下 问题：1、市场竞争，2、软件的可用性，稳定性，3、时间限制。由于目前已经 有部分市场被前期对手抢占，所以需要在尽可能短的时间内开发出一个可用的 网站系统。该系统初步分为两个部分，一个是作为 WEB 界面的 WEB 端，还有一 个部分是用来通过 C/S 模式远程上传本地图片的客户端工具。 2 2系统概述系统概述 在

13、对于由经用户提交的的方式来实现图片共享,首要就是提高用户上传效率， 以及用户上传体验和用户的浏览是否方便。一般的图片共享网站都是通过很单 一的上传页面对文件进行上传，并且展现形式单一化，不方便用户使用和查看。 在 WEB2.0 下，诞生了大批用于增强用户体验的控件，使得图片共享比传统的形 式更加的美观以及人性化。 而且除了需要良好的用户体验外，还需要良好的系统支持。不仅仅是程序， 而是随着用户需求可以不断拓展的业务平台，以及发展流程。本毕业设计就是 根据目前 WEB2.0 的需求和特点有针对的利用现在比较成熟的框架所编写。 应用 WEB2.0 中已经成熟的框架接口可以大大加快目前高可用性应用的

14、开 发以及设计。并且能够从用户角度来设计一个应用。大大减轻了设计的压力以 及风险。该系统能够通过多种方式来对用户的图片进行上传以及管理。并且使 用了现在比较流行的视觉框架来实现图片的呈现，大大改进了用户体验。 3 3总体设计总体设计 3.13.1 系统系统需求分析需求分析 图片共享，有三个方面需要考虑：一，用户应该以什么方式上传图片；二， 用户可以上传的图片有哪些类型；三，应该以什么方式展示这些图片。另外， 还应该实现对图片的简单整理以及统计。 因此，将上传图片的用户和浏览图片的用户作为系统服务的主要目标，对 系统的功能提出了如下需求： .1图片上传需要支持的方式图片上传需要支

15、持的方式 图片上传应该支持目前使用最多的页面表单方式。并且可以对其进行简单 的处理。 除此之外，最好还要支持客户端方式。并且需要实现在用户不安装客户端 的情况下，在 WEB 上实现批量上传图片。 .2用户上传图片需要支持的格式用户上传图片需要支持的格式 一种是 JPEG 一种是 PNG，现在大多数的数码相机都是使用 JPEG 格式保存 图片，但是考虑到版权问题，也应提供 PNG 格式图片的支持。 .3分类分类 图片上传后,根据图片的标签以及图片所在任务自动将图片按照标签以及任 务进行分类 .4图片管理图片管理 图片管理应该包括的基本内容：图片的删

16、除，图片的添加，图片分类的添 加以及删除，图片任务的添加以及删除，图片标签的添加以及删除。 同时，在图片管理中，用户能够以比较直观的方式查看自己上传的图片。 .5图片展现图片展现 应该能够很直观的展示给最终用户进行查看。 .6查询功能查询功能 用户需要了解自己的分类下的图片总量以及任务下的图片情况，又因为用 户可能需要根据不同的情况下，对自己的分类，任务下的图片情况做统计，因 此该系统还应具有分类，任务，标签的多条件组合查询功能。 .7由于该系统为多用户系统，系统后台还应该具有用户管理功能由于该系统为多用户系统，系统后台还应该具有用户管理功能 用

17、户管理包括的功能如下：用户的添加，删除，查询。以及对用户图片的 查看，删除；对用户的分类的查看，删除；对用户标签的查看，删除。 3.23.2总体结构总体结构 图片共享系统主要功能模块结构示意图如下： 图图片片共共享享系系统统 用用户户界界面面后后台台管管理理 用用户户前前台台图图片片处处 理理 用用 户户 登登 录录 验验 证证 用用 户户 图图 片片 上上 传传 用用 户户 图图 片片 预预 览览 用用户户后后台台管管理理 用用户户管管理理管管理理员员管管理理 用用 户户 信信 息息 管管 理理 用用 户户 图图 片片 标标 签签 管管 理理 用用 户户 图图 片片 任任 务务 管管 理理

18、用用 户户 添添 加加 用用 户户 信信 息息 修修 改改 用用 户户 图图 片片 管管 理理 用用 户户 搜搜 索索 后后 台台 用用 户户 添添 加加 后后 台台 用用 户户 修修 改改 后后 台台 用用 户户 删删 除除 后后 台台 用用 户户 权权 限限 分分 派派 图 3-1 图片共享系统功能模块图 图片共享系统包括两大部分：用户界面和后台管理，其中用户界面为用户 可视并且可使用的功能，后台管理为管理员所能使用的功能。 3.33.3图片共享系统流程图片共享系统流程 图片共享系统流程设计思想如下： 1. 用户（这里主要指直接使用本系统的最终用户，不包括后台具有管理功 能的用户）根据自己

19、的图片格式，选择合适的图片上传到本系统的处理端。 2. 系统在接到用户上传的图片后，应根据系统当前所允许上传的图片的类 型判断用户所上传的文件是否符合系统的要求，确定用户为上传图片所分配的 标签，依据上传图片的设置对图片进行分类以及更改格式，此时的图片并非最 后存储在系统中的图片，该图片在经过裁减以及根据系统设定更改后的格式进 行存储。 （这样做，是为了统一图片的格式，便于输出的处理以及图片入库时统 一处理接口。 ） 3. 图片添加成功后，将上传的图片直接缓存到用户所在的文件夹下，按照 上传日期排列，并且同时在数据库中保存图片的副本。 4. 图片在存储后，同时在前台显示已经上传的图片，并且将图

20、片添加到所 设定的标签下，并且按照任务对图片进行分批显示。 5. 用户在用户管理台里面可以对当前所有图片进行管理，用户删除图片时， 可以按照单个图片，分类，标签，以及任务对图片进行删除操作。 6. 已经上传的图片，可以通过用户查看图片的连接直接提供给第三方用户 进行查看。或者直接通过系统生成的连接发送给第三方用户进行查看。 7. 后台管理员可以通过系统提供的功能直接对管理用户进行添加以及更改。 当需要具体赋予用户某个功能时，可以通过更改后台用户的细节设定来更改用 户权限。 8. 管理员在需要删除某个用户的上传图片时，也可通过统一的图片管理接 口对用户的图片，分类，标签以及任务进行删除。 图片共

21、享系统流程图如下： 图 3-2 图片共享系统流程图 3.43.4图片共享系统模块功能介绍图片共享系统模块功能介绍 图片共享系统，主要完成图片的添加，删除以及图片标签的添加，删除功 能。以及对多用户的管理以及在后台对用户的图片进行管理。以下是子模块划 分以及各模块的功能介绍。 .1用户界面子模块划分用户界面子模块划分 图 3-3 用户界面子模块结构图 用户界面子模块 密码修改 密码修改，作为用户界面子模块的一部分，主要完成用户密码修改的工作。 执行流程是：用户在登陆到主界面后，点击导航栏上的密码修改，转向到修改 用户密码的界面。在输入当前使用密码以及修改的密码并且重复输入一次修改

22、 的密码，最后填入该操作的验证码（为了方便用户，验证码已经由后台自动填 入） 。当以上操作完成后，用户点击提交以对密码进行修改。 在用户提交修改内容时，页面内的代码首先检测用户两次修改的密码是否 一致。如果不一致，将提示用户密码不一致。当该检查通过后，信息提交到后 台系统。后台系统首先判断验证码是否相同，如果相同，将比较用户输入的当 前密码散列是否和数据库中的密码散列一致。当两个散列一致时，后台系统将 修改用户当前的密码为用户修改后的密码。如果用户没有输入验证码或者验证 码出错，当前用户密码散列无法和数据库中的密码散列对应，系统将给出对应 的出错提示。并要求用户重新填写。 用户界面子模块 上传

23、图片 上传图片，在用户登陆系统后，点击导航栏上的上传图片，进入上传图片 功能页面。此时，用户可以根据自己的需要选择单个图片进行上传或者直接批 量上传多个图片。）对单个页面进行上传：这种上传需要用户自己过滤不符 合系统需求的图片，当前系统只支持 JPEG 以及 PNG。如果图片格式不符合要 求，系统将给出出错提示。当用户所选择的图片格式无误，并点击“开始上传” ， 此时，系统会弹出一个设置图片信息的对话框，需要用户选择该图片的类型， 以及设置该图片的标签还有该图片的名称等信息。当一切设置完毕后，点击 “提交上传” ，用户图片开始上传到系统中。）直接批量上传多个图片：用户 点击“批量上传”标签，系

24、统提示该功能需要 JAVA 运行时支持，确认后，进 入批量图片信息设定页面，该页面用于设置接下来所上传的图片的名称，描述， 分类，标签等信息。接下来将转入批量上传界面。具体的操作步骤说明在批量 上传页面中有详细的说明。 用户界面子模块 管理图片 管理图片，在用户登陆系统后，点击导航栏上的上传图片，进入图片管理 页面。 该页面分为上中下 3 个部分，分别为用户图片按照任务，分类，标签进行 分类后的图片列表。在这个列表里，用户可以对图片按照任务，分类，或者标 签等批量对图片进行操作。同时，在该功能页面中，也可以对分类，任务，标 签进行删除操作。 .2管理后台子模块划分管理后台子模块

25、划分 图 3-4 管理后台子模块结构图 管理后台子模块 系统管理 系统管理作为后台管理的一个重要部分，主要是用于设置当前系统的环境 变量，以及一些说明性的信息。主要是由后台管理员对系统进行维护以及系统 初始化的时候确定这些设置。在设置完成后，如果不是系统性能问题或者系统 迁移，均可以保持设定的信息。 这个功能为系统提供了比较方便的扩展系统环境变量的方法。便于后期对 系统的常规设定的修改以及方便系统的简单迁移，例如系统更换域名或者更改 其他系统环境信息。 系统信息表中记录了系统的每个设定，对该模块进行修改最后将反馈到系 统信息表中。 管理后台子模块 管理员管理 管理员管理，主要是用于设置能够对当

26、前系统后台的功能进行操作的用户， 以及设置这些用户可以使用后台哪些功能。该功能使得后台管理更为灵活，可 以方便的进行权限托管。并且可以设置对某个功能专门进行操作的管理人员， 简化了管理的复杂程度。 这个功能为系统提供了比较方便的扩展系统管理团队的方法。以便于在中 后期对某个功能管理达到一定要求时可以对该功能赋予专用人员。 同时，该模块也提供了修改管理员信息的功能。可以方便的使该管理员在 各个功能之间实现切换以及更改现有权限。 管理后台子模块 用户管理 用户管理用于管理当前系统中已经正常注册并且使用本系统的图片共享功 能的用户。用户要注册该系统，除了可以在前台提供的注册页面注册外，也可 以由具有

27、用户管理权限的后台管理员在后台进行添加。除了用户能在自己的管 理面板修改自己的信息之外，管理员可以通过该模块的用户编辑功能对用户信 息进行修改。同时，可以通过搜索功能来定位特定用户名的用户，便于更快的 找到需要操作的用户。 管理后台子模块 图片管理 图片管理用于管理当前系统中已经正常注册并且使用本系统的图片共享功 能的用户所上传的图片。 在该模块中，后台管理员可以根据单个用户对该用户所上传的图片进行管 理。管理用户图片的界面和用户前台的管理界面相同。另外，和用户管理一样， 后台管理员也可以通过搜索特定的用户名来快速定位到某个用户，并且对他所 上传的图片进行管理。 在用户上传图片的过程中，有可能

28、由于用户的误操作导致用户所上传的图 片没有分类或者没有标签，这种情况下，管理员可以使用图片清理功能将这些 图片清理掉。避免冗余以及错误数据导致的系统不稳定或者统计数据出错。 4 4方案选择方案选择 4.14.1方案比较方案比较 .1系统模式比较系统模式比较 目前开发模式主要有 C/S 结构和 B/S 结构： C/S 结构，即 Client/Server(客户机/服务器)结构，是大家熟知的软件系 统体系结构，通过将任务合理分配到 Client 端和 Server 端，降低了系统的通 讯开销，可以充分利用两端硬件环境的优势。 B/S 结构，即 Browser/Server(浏览器/

29、服务器)结构，是随着 Internet 技 术的兴起，对 C/S 结构的一种变化或者改进的结构。在这种结构下，用户界面 完全通过 WWW 浏览器实现，一部分事务逻辑在前端实现，但是主要事务逻辑在 服务器端实现。B/S 结构利用不断成熟和普及的浏览器技术实现原来需要复杂 专用软件才能实现的强大功能，并节约了开发成本，是一种全新的软件系统构 造技术。 .2程序语言比较程序语言比较 目前流行的程序开发语言主要有 ASP 和 JSP 和 PHP： ASP 全名 Active Server Pages，是一个 WEB 服务器端的开发环境，利用它 可以产生和执行动态的、互动的、高性能的 W

30、EB 服务应用程序。ASP 采用脚本 语言 VBScript（Java script）作为自己的开发语言。 JSP 是 Sun 公司推出的新一代网站开发语言，Java Server Page。JSP 可以 在 Serverlet 和 JavaBean 的支持下，完成功能强大的站点程序。 PHP，即“PHP: Hypertext Preprocessor” ，是一种被广泛使用的开放源代 码多用途脚本语言，尤其适用于 web 开发并可以嵌入到 HTML 中去。 三者都提供在 HTML 代码中混合某种程序代码、由语言引擎解释执行程序 代码的能力。但 JSP 代码被编译成 Servlet 并由 Jav

31、a 虚拟机解释执行，这种 编译操作仅在对 JSP 页面的第一次请求时发生。在 PHP、ASP 、JSP 环境下， HTML 代码主要负责描述信息的显示样式，而程序代码则用来描述处理逻辑。普 通的 HTML 页面只依赖于 Web 服务器，而 PHP、ASP 、JSP 页面需要附加的语言 引擎分析和执行程序代码。程序代码的执行结果被重新嵌入到 HTML 代码中，然 后一起发送给浏览器。PHP、ASP 、JSP 两者都是面向 Web 服务器的技术，客户 端浏览器不需要任何附加的软件支持。 然而，相较与 ASP ， JSP，PHP 有其便于部署，可快速开发并且使用灵活 等特点。比较适合于做中小型系统的

32、快速开发，同等相较于 JSP，PHP 由于没有 那么复杂的处理，所以在一定程度上执行速度优于 JSP。 4.24.2方案选择方案选择 综上所述，本系统开发选择方案如下： 本图片共享系统采用 PHP、JavaScript 作为主要程序开发语言，采用 smarttemplate + 独立后台管理模版的构架， mysql 数据库。采用 B/S 结构。 系统界面美观内容丰富，很好的实现了与用户的交互。 4.34.3系统技术平台系统技术平台 开发环境：WindowsServer2003 Datacenter Edition SP1、MySql 4.2、Apache2； 开发工具：ZendStudio、

33、DreamweaverMX、PhotoShop、记事本； 系统构架：PHP+Smarttemplate+JavaScript+MySql4.2； 开发语言：PHP5。 4.44.4开发环境搭建开发环境搭建 配置 PHP 5 将从网络上下载下来的文件解包，然后需要以下操作： 打开 php.ini 文件，修改以下内容： max_execution_time = 600; max_input_time = 600; memory_limit = 16M post_max_size = 20M file_uploads = On upload_max_filesize = 20M default_so

34、cket_timeout = 60 以上选项避免由于用户上传过大的图片导致 PHP 处理超时。 register_globals = Off magic_quotes_gpc = On 以上选项为防止用户恶意提交。 extension_dir = D:PHPPHPext 以上选项用于设定 PHP 的扩展所在文件夹。 extension=php_mbstring.dll 该扩展用于支持长字符集 extension=php_exif.dll 该扩展用于支持 PHP 读取图片的 EXIF 信息。 extension=php_gd2.dll 该扩展用于 PHP 对图片的操作以及验证码的生成操作。 ex

35、tension=php_mysql.dll extension=php_mysqli.dll 以上两项用于 PHP 对 MYSQL 的支持 extension=php_sockets.dll 该扩展用于 PHP 对 SOCKET 的支持，主要用于支持上传时显示上传进度的 UPU 库 Apache 2.0 将从网络上下载下来的文件解包，然后需要以下操作： 1）修改 Apache 的配置文件: 进入到解包根目录下的 conf 目录。打开 httpd.conf 文件，修改以下内容： 设置执行超时：Timeout 300 设置监听 80 端口：Listen 80 开启 APACHE 对 PHP 的支持

36、： LoadModule php5_module d:/php/php/php5apache2.dll 开启 URL 重写功能：LoadModule rewrite_module modules/mod_rewrite.so 设定 WEB 服务的根目录：DocumentRoot E:web 设置 URL 重写所生效的范围： Options FollowSymLinks AllowOverride ALL 设置中文支持： AddLanguage zh-CN .zh-cn AddLanguage zh-TW .zh-tw AddLanguage zh-cn .cn 设置默认语言 AddDefaul

37、tCharset GB2312 设置默认索引页： DirectoryIndex index.html index.html.var index.htm index.php 设置 APACHE 对 PHP 文件进行解析： AddType application/x-httpd-php .php 2）将 APACHE 安装为服务： 进入命令行，转到 APACHE 文件夹下的 BIN 文件夹，执行以下命令： apache -k install 3）启动 APACHE 服务器 执行以下命令： net start apache2 mysql 安装 1）将从网上下载的 MYSQL 解包,然后修改其配置文件

38、如下: default-character-set=utf8/由于整个系统均使用 UTF-8,故数据 库也统一文字编码 key_buffer_size=20M max_allowed_packet=15M/以上设置用于处理将图片存入数据库的 大量信息数据。 2）运行 MySQLInstanceConfig.exe 对 MYSQL 进行初始化设置。 3）安装 MYSQL 服务 执行 mysql d-nt.exe install 将 MYSQL 进程作为系统服务运行。 4）使用 MYSQLADMIN 对 MYSQL 的管理员进行管理 PHPMYADMIN 配置 找到 phpmysdmin 的配置文

39、件，修改以下地方。 $cfgServers$ihost = localhost;/设置为本机 （只做调试用） $cfgServers$iport = 3306;/MySQL 的端口 $cfgServers$iconnect_type = tcp;/设置与 MySQL 连接的 方式 $cfgServers$icompress = FALSE;/使用压缩协议进行传 输 $cfgServers$iauth_type = config;/如果 PHP 安装模 式为 Apache，可以使用 http 和 cookie；如果 PHP 安装模式为 CGI，可以使用 cookie；默认为 config $cf

40、gServers$iuser = root;/MySQL 连接用户 $cfgServers$ipassword = ;/MySQL 连接密码 5 5实现技术与数据结构实现技术与数据结构 5.15.1系统架构设计系统架构设计 .1网络架构网络架构 整个网络架构体系如下图： 图 5-1 图片共享系统网络构架图 .2系统逻辑服务器系统逻辑服务器 在逻辑上可以将使用的服务器分为三类，每类服务器均有不同的功能： WebWeb 服务器：服务器：该服务器进行 Web 发布，提供用于普通用户业务工作的操作 界面（网页） ，亦将用户的操作参数通过处理后生成的数据库查询传递回数据库

41、 服务器，同时亦将结果在经过解析以及重新编码后生成的数据通过网页的方式 返回到用户前端。同时，该 WEB 服务器还负责解析用户的请求以及动态的生成 用户所能看见的 Web 页面。 数据库服务器：数据库服务器：该服务器上安装了 MySQL 数据库系统，数据库系统的设计 主要针对该服务器。在此存放着所有的原始数据及用于系统的其它结构数据， 所有的用户及管理者对信息的新增，修改，删除最终都将反映在该服务器上。 同时，该服务器需要处理通过 WEB 服务器传输来的查询请求，并将查询结果返 回给应用服务器。 5.25.2系统处理流程系统处理流程 本系统采用 B/S 模式,Smartemplate 构架，用

42、户使用本系统时，只需要安 装上网的浏览器即可，不需要安装其它任何软件。系统处理流程如下图所示： 用用户户浏浏览览器器 业业务务逻逻辑辑 (解解析析) 模模型型 (通通用用模模版版) 视视图图 (php) 发发出出Http请请求求新新请请求求转转发发 生生成成 SmartTemplate 更更新新/返返回回 HTML 同同请请求求缓缓存存转转发发 控控制制器器 (请请求求解解 析析，判判断断 缓缓存存) 图 5-2 系统处理流程 .1基于基于 MVCMVC 的的 SmartemplateSmartemplate 架构架构 本系统采用基于 MVC 的构架实现。模型由实现业务逻辑的

43、PHP 解析脚本构 成，控制器由 SmartTemplate 来实现，视图由一组含有 SmartTemplate 格式标 签的 HTML 文件构成。下图简要描述了工作流程。 图 5-3 响应用户请求的工作流程 MVC 是一种设计模式，它强制性的把应用程序的输入、处理和输出分开。 MVC 把应用程序分成三个核心模块：模型、视图和控制器，它们之间的相互关 系如下图所示： ( (控控制制器器) ) 接受用户请求 调用模型响应用户请求 选择视图显示相应结果 ( (视视图图) ) 显示模型状态 接受数据更新请求 把用户输入数据传给控制器 ( (模模型型) ) 代表应用程序状态 响应状态查询 处理业务流程

44、 通知视图业务状态更新 选择视图业务处理 用户请求 状态查询 通知数据更新 图 5-4 MVC 设计模式 .2SmartTemplateSmartTemplate 技术概述技术概述 在这个系统制作过程中，大量采用了 SmartTemplate 技术，现就自己对 SmartTemplate 技术的理解表述如下： SmartTemplate 是一个支持大型 WEB 应用程序的模板引擎，是由服务器端 调用和执行的 PHP 库。SmartTemplate 本身与协议无关。 要理解 SmartTemplate，首先需要理解模板引擎的工作方式。 普通模板引擎工作方式: 你的 PHP 脚本指

45、定一个 HTML 模板，指定动态内容 并显示。模板分析器使用指派的内容替换模板内所有的占位符，然后显示给用 户。 SmartTemplate 的工作方式类似模板编译，他把模板转换为可执行的 PHP 脚本，并且保存起来以备以后重用。当一个新的模板在第一次被使用时，模板 内所有的占位符被替换为简单的可输出指定内容的 PHP 代码元素。举个例子， 模板片断 TITLE，将被转换为 . 如果你指定内容给正确的变量, 将再也不需要进行模板分析了. 程序要做的仅 仅是自己包含并执行编译后的模板. 这种缓存方式能大大减少模板引擎的运行 时间。 .3SmartTemplateSmartTemp

46、late 与与 htmlhtml 模版之间的关系模版之间的关系 为了增强系统的移植性，使系统能在 Windows 、NT、UNIX 及 Linux 环境下 运行而不进行源代码的修改，采用 PHP 技术。开发基于 WEB 的软件系统，采用 PHP 脚本 工具，用 PHP 的动态库连接访问数据库，将一些对象的属性和方法封 装在 PHP 类库中，客户端界面可用 HTML 与 JavaScript 配合完成，服务器端的 应用处理可用 PHP 脚本SmartTemplate 引擎来具体实现。 html 模版主要用来定义最终的表现页面，而 PHP 脚本主要用来完成大量的 逻辑处理，SmartTemplat

47、e 用于将处理后的数据动态的封装到 html 模版中，最 终显示的页面有 PHP 解析后发送到客户端。也就是说，经过封装以及解析的 html 模版主要用来发送给前端的用户，而 PHP 脚本主要来响应用户的请求，完 成请求的逻辑处理,同时，充当着控制者的角色，用来负责响应的事务处理。 SmartTemplate 本身没有任何的业务处理逻辑，它只是简单地检索 PHP 脚 本定义的对象，再将动态的内容插入到预定义的 html 模版中。 PHP 脚本创建 SmartTemplate 需要的变量和对象，再根据用户的行为，决 定处理哪个 html 模版并发送给用户。 在实际开发过程中，往往是先把 html

48、 模版开发出来，然后再将 html 模版 中需要动态生成的部分用 SmartTemplate 预定义的标签代替。这样做的好处是 充分利用了 HTML 的页面表现能力，避免了 PHP 脚本在页面表现方面的不足，大 大缩短了开发周期，各尽所能。 以下是节选程序代码中的 HTML 模版转换为最终的页面对象： 1. 首先，用 HTML 编辑工具开发出 HTML 页面 . . . 搜索图片: flash_slideshow . . . 2. 通过 PHP 解析将对应内容填充到 HTML 模版内 . . . $_objimg_th b_block); $_tmp_arr_keys=array_keys($

49、_objimg_thb_block); if ($_tmp_arr_keys0!=0) $_objimg_thb_block=array(0=$_objimg_thb_block); $_stack$_stack_cnt+=$_obj; foreach ($_objimg_thb_block as $rowcnt=$img_thb_block) $img_thb_blockROWCNT=$rowcnt; $img_thb_blockALTROW=$rowcnt%2; $img_thb_blockROWBIT=$rowcnt%2; $_obj= ? a href= class=thickbox

50、rel=gallery-plantsimg src= alt= width=70 height=70 border=0 / . . . 5.35.3数据库设计数据库设计 图 5-5 图片共享系统数据库设计结构图 上图是根据需求设计出十二个数据表，分别是：系统设定表（setting） ， 管理员操作记录表（adminlog）,管理员信息表（admin_info） ，图片缓存记录 表（hash_cache） ，缩略图表（photothumbs） ，图片表（photo） ，用户组表 (group_setting)，用户信息表（member_info） ，用户登陆记录表(loginlog)， 图片分类

51、表（sort_setting） ，用户上传相册表（job）以及标签表 （tags_setting） 。 该表主要分为以下几个部分： 管理员相关表： 图 5-6 管理员相关表 系统设置表： 图 5-7 系统设置表 用户组设置表 图 5-8 用户组设置表 图片信息表 图 5-9 图片信息表 group_setting gid group_name bigint varchar 相册以及标签分类表 图 5-10 相册分类以及标签表 .1前台用户主要数据库表结构设计前台用户主要数据库表结构设计 用户上传相册表（job）用于存储用户上传某批图片的基础信息 表 5-1 job 表 Name

52、TypeDescription job_idBIGINT(11)编号 ArticleMEDIUMTEXT该相册的内容描述 article_titleTINYTEXT相册标题 article_infoTINYTEXT相册简介 Authorvarchar(40)作者 AuthoredBIGINT(11)作者 ID sort_idBIGINT(11)分类 ID album_idBIGINT(11)相册 ID Hitsmediumint(7)点击次数 Repliesmediumint(7)回复次数 replies_pagemediumint(7)回复分页数 LastpostBIGINT(11)最后回复

53、 Lastpostervarchar(30)最后回复者 LastposteridBIGINT(11)最后回复用户 ID PosttimeBIGINT(11)发表时间 Hiddenint(2)是否隐藏 Isparseurlint(2)是否引用 Ipaddressvarchar(16)发表用户的 IP 用户信息表（member_info）用于图片上传用户的详细情况信息与图片 表是一对多的关系： 表 5-2 member_info 表 NameTypeDescription IdBIGINT(11)用户编号 reg_timeBIGINT(11)注册时间 Namevarchar(32)用户名 phot

54、o_album_namevarchar(32)图片名称 Blog_album_describeBLOB(100)描述 Ganderchar(1)性别 Pwdvarchar(64)用户密码 Gidmediumint(6)用户所在组 ID Emailvarchar(64)用户邮箱 .2管理后台数据库表结构设计管理后台数据库表结构设计 系统设定表（setting）用于存储系统基本设定信息 表 5-3 setting 表 NameTypeDescription Idint(5)编号 Varnamevarchar(255)设定名 Settingvarchar(255)设定描述 Value

55、TEXT设定值 Typevarchar(20)设定类型 管理员操作记录表（adminlog） ，用于存储管理员对后台的操作记录 表 5-4 adminlog 表 NameTypeDescription Adminlogidint(5)记录编号 UidBIGINT(11)管理员编号 user_namevarchar(32)管理员名称 Actionvarchar(50)进行操作的名称 Scriptvarchar(255)该操作所调用的脚本 Dateint(10)执行该操作的时间 Ipaddressvarchar(16) 执行该操作的管理员的 IP 地址 管理员信息表（admin_info） ，用于

56、存储管理员的基本信息（为了降低系统 复杂度，这里将管理员的权限直接和管理员信息写入同一表中，不独立分为两 个表） 表 5-5 admin_info 表 NameTypeDescription AidBIGINT(11)管理员编号 admin_namevarchar(32)管理员名称 Pwdvarchar(64)管理员密码 Gidmediumint(6)管理员组 ID（预留） can_adminint(1)执行系统管理的权限 can_userint(1)执行用户管理的权限 can_categoryint(1)执行分类管理的权限 can_settingint(1)执行设定管理的权限 6 6特殊问题

57、解决办法特殊问题解决办法 本系统在设计和开发过程中，也遇到了不少的问题，就其中较特殊问题分 析及解决方案描述如下： 商业源代码，全套计算机毕业设计免费下载 http:/ 更多全套设计联系 QQ: 最新设计大全 http:/ 6.16.1乱码问题乱码问题 在做设计的时候，遇到了乱码问题。在页面间传递时汉字会乱码，如果直 接从数据库添加数据显示没有乱码，但是从后台管理添加数据就会在添加成功 后的显示页面出现在乱码。对于这个问题，原因是开发平台在 WINDOWS 下， WINDOWS 默认的编码格式是 GB2312，但是运行环境却是 UTF-8 环境，要避免乱 码，必须统一整个开发环境的字符编码：

58、1首先，统一在数据库中的编码： 在创建数据库以及查询数据库时，将编码首先置为 UTF-8 SET CHARACTER_SET_CLIENT = utf8, CHARACTER_SET_CONNECTION = utf8, CHARACTER_SET_DATABASE = utf8, CHARACTER_SET_RESULTS = utf8, CHARACTER_SET_SERVER = utf8, COLLATION_CONNECTION = utf8_general_ci, COLLATION_DATABASE = utf8_general_ci, COLLATION_SERVER = ut

59、f8_general_ci, AUTOCOMMIT=1; 2在 HTML 模版的 HEADER 部分注明编码标准： 3在 PHP 输出前在 HEADER 内容中申明所用的字符流编码： header(Content-Type: text/html; charset=utf-8); 6.26.2动态显示上传进度动态显示上传进度 通过表单上传有一个缺陷，就是不能动态的显示当前文件上传了多少。这 样在用户上传比较大的图片时很不方便用户判断上传所耗时间以及浏览器是否 超时。解决方法：经过查找，发现一个通过 JAVASCRIPT 以及 PHP 的 SOCKET 库 动态生成上传进度的 PHP 库：UGiA

60、 PHP UPLOADER。该库的使用方法很简单，下 面具体说明其调用方法： 调用方法： 1.对于 upu/misc/upu.js, 修改 var basePath = /upload/upu/; 为 upu 相对于网站根目录的路径 2.然后在包含上传表单的页面中加入 , 这里的 upu/misc/upu.js 为 upu.js 的路径，然后在标签中加入 onsubmit=return upuInit(this) 3.在你文件上传后处理的页面中使用$_POST 来获取表单数据 4. upu/temp 为上传临时文件存放目录, upu/files 为文件存放目录,这两 个目录可以在 upu.cl