【图片存储系统网站设计与实现14000字】

前言1.1研究背景最早的网站设计于上世纪九十年代，当时的网页完全由文本编写而成，网页内容只包含了一些小图片和没有任何布局的标题与段落，内容以及结构非常简单。在Web1.0时代，网速和终端能力的限制下，绝大部分网站只能展现出简单的图片以及文本信息，对于页面布局和网页结构没有任何要求，用户想要展现的内容也不能完整的展现出来，而且没有任何的美观可言。在互联网发展到Web2.0时代以来，网页不再只是由单一的文字和图片组合而成，市面上开始涌现出比较生动的网页内容，网页上的交互设计也更好地满足了用户的需求。随着互联网的快速发展，前端技术的发展也越来越成熟，开发方式多样化，网页布局更加合理化，网页更加美观REF_Ref16337\r\h[1]。网站作为宣传、对内管理、了解信息的工具，其应用领域也越来越广泛。习近平总书记提出“生态文明这个旗帜必须高扬”。而图片作为一种直观表达内容的载体，极大的丰富了人们的文化生活。为了传播生态文明，让更多的人关注生态文明，领略大自然的美。在这一背景下，将信息化技术与文化相结合，设计建立一个符合生态文明特色的图片资源存储网站不仅宣传了生态文明，而且也符合当代发展的潮流。1.2研究目的及意义1.2.1研究目的在目前计算机网站市场的大环境下，以传播生态文明为初衷，借鉴计算机网站和数据库设计的相关理论知识，通过对生态图片存储网站的建立，让用户在欣赏生态图片的同时提升他们的使用感。吸引更多的用户关注生态文明，达到传播生态文明的目的。1.2.2研究意义目前市面上出现的图片越来越多，图片所表达出的内容也越来越多样化，目前市面上出现的图片大致可以分为这几个类型，社会生活类、社会纪实类、民风民俗类、老照片类、自然景色、人造景观类、民间文化、文化娱乐类。多种类型图片的出现，用户想要浏览某一类图片，并在其中查找出所需求的图片就造成了一定的困难。虽然市面上已经出现只存储某一类图片的专题图片库，但大多是以营销为目的，用户在浏览下载时将会产生一笔开销。生态文明一直是近年来的热门话题，弘扬生态文明，建立一个以“生态文明”为专题的网站，让更多的人在欣赏生态图片的同时提升他们的体验感便成为了研究本课题的初衷。1.3国内外发展现状1.3.1国外发展现状自1826年暗箱拍摄出世界上的第一张照片后，随着数码的发展，网络的出现，使得图片的发展越来迅速，市面上涌现出大量的图片，而图片的存储问题就成为了人们关注与研究的重点。随着数据库的出现，图片的存储问题得到了解决，出现了各种类型的图片库。以Youtube代表的视频内容库成为主流发展模式。目前国外图片库主要可以分为4种类型：商业图片库，微利图片库，新闻编辑类图片库以及行业图片库REF_Ref18496\r\h[2]。YouTube公司，是一家提供视频服务的公司，是全球最大的视频分享网站之一。2018年11月29日，有报道称YouTube从2020年起将为所有用户提供免费浏览的服务。视频网站的快速发展极大的推动了图片网站的发展。GettyImages在全球设有65个分支机构服务各国的用户。该公司开展大中华地区业务是从2005年开始的，GettyImagesChina华盖创意图片集大批中国元素于一身，以达到满足客户的多样化需求为目标，它是世界上所含有图片最大的商业图片库。Shutterstock是全世界最大的微利图片库。它开设了一个规模最大、最具有生机的双向市场，用来为创意专业人士提供授权内容，这些内容涵盖图片、视频、音乐和推动创作过程的创新工具这些方面。欧洲新闻图片社，它是一家国际新闻摄影服务公司。1966年建立，总社设在马德里。它在1985年由七家欧洲新闻社创办。该社欧洲、美国、拉丁美洲一些国家派有记者，消息来源广泛、及时，在国内新闻媒介中颇有影响。在全球有超过400名专业\o"攝影師"摄影师提供来源，所涉及的领域有\o"政治"政治、\o"体育"体育、\o"金融"金融、\o"艺术"艺术、\o"文化"文化以及\o"娛樂"娱乐等领域。行业图片库，这类图片库只存储某一类图片，只针对某一种市场。像现在市面上出现的旅游照片图片库、动物图片库、植物图片库等。这类图库市面上出现的比较少。1.3.2国内发展现状国内图片库市场，像新华社、中新社、美联社、路透社、法新社、ICphoto等机构运营的就是编辑类图片。新华社是中国最大、最负盛名的图片收藏出版机构。新华社图片库主要是一个为广大用户提供新闻图片的网站，它从内容上表现为新闻编辑类图片库，而从经营模式上体现为网络图片库，在盈利模式上又体现为微利图片库，这两种形相互影响，同时也促成了新华社成为一个丰富的资源库。ICphoto过去被称为“东方IC”，它在2000年成立，是一家多元化的视觉资源提供商和影像技术服务商，它所拥有的图片总量超过1亿张。1.4研究内容随着各式各样图片的出现，以及图片数量日益增多，图片的分类存储就可以很好的解决这个问题。根据目前网络中数据存储的特点，本文将网站和数据库结合起来，建立一个生态图片存储系统，可以有效的将生态图片整合在一起，并将它们与其他类型的图片分离出来，建设一个专题图片网站，并实现检索、收藏功能。生态图片存储系统网站设计与实现的具体研究内容如下。1.4.1网站主页设计设计网站我们采用HTML编写网页框架，利用DIV+CSS做网页的样式页面布局，用PHP语言进行动态网页设计以及连接数据库。借用VisualStudioCode平台来完成设计。在本设计的网站中，含有注册页面、登录页面、生态图片展示的主页面以及用户页面。注册页面，需要用户填写基本信息并提交。注册完成后，将跳转到登录页面。登录成功后，进入本网站的主页面，主页上方将显示用户信息，用户可在该页面浏览查询图片。用户登录后将具有收藏图片的权限，收藏成功后，可点击“我的收藏”查看收藏的图片。1.4.2数据库表设计本设计使用MySQL数据库充当主数据库，规划数据库包含以下几个方面的工作内容：需求分析，收集整理数据，明确数据库所要实现的功能。使用MySQL来存储数据,根据数据库设计的要求，设计合理的表格及字段，使用Navicat软件来管理MySQL数据库。数据库调试。1.4.3功能的实现如何实现图片检索功能，在web环境中含有海量图片，采用人工方式对图片进行广泛的关键信息标注是不可能实现的，所以只能借助web中相关的文本信息，采用算法实现图片主题的提取，完成图片的自动标注。对图片自动标注的准确性依赖于web中图片关键信息的提取算法。而图片的关键信息主要是以下几个部分：图片的文件名、图片的超链接、图片所在网页彼此之间的链接、图片所在页面的标题、图片的网址等。本文主要采用的就是利用图片的名称实现对图片的查询功能。1.4.4网站设计的流程制作页面的前期准备工作，包含绘制页面结构底图、收集所需图片以及文本信息。用HTML制作网页架构，布局填充文本、链接、图像等信息内容。利用JavaScript脚本语言以及PHP语言实现静态页面向动态交互页面的转变REF_Ref18610\r\h[3]。用CSS样式为各元素进行美工优化设计，包括页面背景、元素属性、链接属性、各元素的定位以及浮动等，使页面中的所有元素、色彩搭配能够协调统一，给用户以赏心悦目的观感。使用PHP代码来实现图片查询、收藏功能，前端直接调用后端接口即可实现相应功能。使用JDBC来连接数据库，获取数据，并处理数据REF_Ref18672\r\h[4]。使用Navicat软件来管理MySQL数据库，查看、管理数据。网页试运行。1.5研究方法根据研究内容，本课题拟采用理论与实践相结合的研究方法，主要研究网站设计、数据库搭建、图片查询功能的实现这三个方面。文献研究法。根据本项目研究目的或内容，通过查找文献获得资料，从而全面地了解掌握本项目的研究问题。采用文献研究法帮助了解本课题的历史和现状，帮助确定研究课题。得到现实资料的比较资料，了解本课题研究的全貌。实验法。通过搭建生态图片存储系统网站，对图片存储系统网站进行测试。主动操纵实验条件，结合研究内容的需要，借助各种方法技术，提升用户的使用感，减少影响用户使用感的无关因素，以达到优化网站的效果。

2相关理论介绍2.1网页概述2.1.1网页的定义网页是什么呢？网页是一个适用于万维网和网页浏览器的文件，网址（URL）可以识别与访问网页，文字与图片这两个基本元素组成了网页。文字，可以理解为是所设计网页的内容。而图片可以理解为对网页进行美化。网页实际上只是一个纯文本文件。它通过各种标记对程序员设计页面上的各种元素进行描述，而浏览器则对这些标记进行解释并生成页面，于是就得到了用户浏览网页时所看到的画面REF_Ref18744\r\h[5]。2.1.2网页标记语言介绍HTML超文本标记语言，是网页制作所必备的工具。设计一个网页一般由多个HTML文件构成，超文本标记语言文件以.htm为扩展名或.html为扩展名REF_Ref18835\r\h[6]。可以使用TXT文本编辑器来编写超文本标记语言文件，我们只需要将文件的后缀名修改即可。2.1.3网页编程语言介绍网页编程语言指的是网页开发设计的编程语言，包含有多种开发语言。而本文主要采用的是PHP语言和JavaScript语言。PHPPHP是一种嵌入式HTML语言，PHP是在服务器上实现的“嵌入HTML文档的脚本语言”，语言的特点与C语言有相似之处，现今有很多的网站编程人员都在利用该语言来编写程序。PHP可以实现所有的CGI或者JavaScript的功能，并且可以支持大部分的数据库以及操作系统。JavaScriptJavaScript是一种基于对象和事件驱动的安全脚本语言REF_Ref18982\r\h[7]。JavaScript主要用于HTML的页面，脚本可以用HTML源代码编写，JavaScript编写的程序在运行前不需要进行编译操作，它们可以直接写入Web页面中，调用它们的浏览器来解释执行JavaScript编写的程序。由此而来，一些基本交互作用就不用在服务器端实现，可以达到节省时间的作用。HTML页面与JS脚本以及PHP文件之间的关系如图2-1所示。图2-1HTML页面与JS脚本以及PHP文件间的关系图2.2数据库概述2.2.1数据库的定义数据库，也称为数据管理系统，以某种方式将处理后的数据存储在一起，它是一个可以由多个用户共享的数据集，并且尽可能减少冗余，一个数据库可以由多个数据表空间组成，用户能够对文件中的数据新增、截取、更新、删除等。2.2.2数据库的分类第一种分类方式是根据其内容进行分类，例如：参考名录，文件内容，多媒体对象等。第二种分类方式是根据其应用领域分类，例如：会计，音乐创作，银行业，制造业或者保险业。第三种分类方式是根据技术层面分类，例如：数据库的结构或者交互界面类型。2.2.3数据库语言数据库语言是一种具有特殊目的性的语言，有时还区分出子语言，包括以下几种：数据控制语言（DCL）、数据描述语言（DDL）、数据操作语言（DML）、数据查询语言（DQL）。2.2.4主数据库介绍数据库管理系统主要包括SYBASE、DB2、ORACLE、MySQL、ACCESS、VisualFoxPro、MSSQLServer、Informix、PostgreSQL等。而本文主要采用MySQL数据库充当主数据库。MySQL是一个关系型数据库管理系统，它所使用的SQL语言是用于访问数据库最常用的一种标准化语言，它具有体积小、速度快、开放源码等方面的特点。MySQL有社区版、企业版、标准版三个版本。MySQL支持多线程，充分地利用了CPU资源，它具有优化的SQL查询算法，有效地提高了查询速度REF_Ref19054\r\h[8]。2.3设计平台介绍2.3.1网页设计软件介绍VisualStudioCode本文主要采用VisualStudioCode平台来设计开发生态图片存储系统网站。VisualStudioCode是一个运行在OSX，Windows和Linux之上的一款Web设计平台，它是一个跨平台的网页和云应用程序编辑器。XamppXampp（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包。它可以在Windows、Linux等多种操作系统下安装使用，支持多个国家的语言。2.3.2数据库管理软件介绍本文主要采用Navicat这个平台来管理数据库。Navicat是一套快速、可靠而且价钱相当来说比较廉价的数据库管理工具REF_Ref19139\r\h[9]，以简化数据库的管理和减少系统管理成本为设计目的。Navicat允许用户连接到任何本机或远程服务器，提供一些实用的数据库工具。

3需求分析3.1设计目标实现个人用户注册信息的收集及登录信息的验证。实现生态图片的分类上传、搜索收藏。实现后台管理系统界面的设计。3.2网站的需求分析对于该网站的需求分析主要从以下几个方面来概述：网站的界面设计，该网站的页面设计紧贴生态文明的主题，界面设计合理，色彩搭配柔和，整体带给用户舒适的观感。用户服务功能，该模块包括用户信息的注册与登录、用户信息的审核、用户对图片的浏览与检索、用户对收藏内容的查看等。管理员功能，该模块实现了管理员对上传图片的添加、删除、更改信息以及对图片分类的编辑等操作。数据服务功能，该部分主要包括对用户信息的收集、对图片的分类存储、以及管理员信息的保存等。3.2.1网站的界面设计由于该网站是以“生态”为主题，因此，该网站的界面设计背景均采用了生态图片，字体颜色选用了最可以代表该主题的绿色。首页内容主要包括logo的展示、用户信息的显示、搜索框的设计、图片信息的展示、后台管理系统以及其他页面的链接等。该网站界面整体设计风格以简约大方、清新为主，以带给用户舒适、平静的观感为初衷。3.2.2用户服务功能用户服务功能需要用户首先提供注册信息，包含用户名、性别、密码以及验证码几个方面的内容。系统会自动将用户的注册信息以及注册时间记录在数据库中。用户在输入注册信息时，系统都会在数据库中逐个比较用户名字段，防止有相同的用户信息出现。当用户输入登录信息时，根据数据库中收集的各字段的value值核对用户输入的信息，若用户输入正确，则登录成功。用户登录后可对喜欢的图片进行浏览收藏，可在用户界面进行查看。用户在浏览图片时既可以根据图片类别进行浏览也可以重新输入内容进行查询，系统会根据用户输入的关键字和数据库中的type字段进行比较，输出用户所查询的内容。用户服务的实现功能如图3-1所示。图3-1用户服务功能图3.2.3管理员功能网站后台管理员具有对用户信息和图片信息具有查看和修改权限，管理员可在数据库中查看用户信息、管理员信息以及图片信息。管理员可登陆后台管理系统对图片信息进行修改，具有图片管理和分类管理的权限，可在该界面查看数据库中的所有图片及信息，可随时对图片信息和图片类别进行填改上传、删除、修改。系统会根据管理员执行的操作对数据库的内容进行实时更新。管理员后台的实现功能如图3-2所示。图3-2管理员功能图3.2.4数据服务功能数据服务功能部分所针对的主要是数据库中所收集的信息，该部分创建了管理员表、用户表、事务表、图片信息表、图片类型表五个表格。管理员和用户表中存放的是管理员和用户的信息，图片信息和类型表中存放了图片的类别、ID号、图片来源、以及上传时间等信息。用户登录时，系统会查看用户表来审核信息，而用户查询图片时，系统会将关键字和图片类型表中的类别type字段进行比较，显示出所查询的图片。用户收藏图片时，系统会根据图片信息表中的ID号字段将该图片记录在该用户下。

4网站设计4.1网站结构设计该网站的结构主要是由前端界面和后台信息管理两部分组成，前端界面包含注册界面、登录界面、首页以及用户界面，这些界面的实现主要是为用户服务。管理员的操作主要是作用于后台信息管理，可在数据库中对数据进行查看、增添、删除、修改操作，也为管理员编写后台管理系统界面，在该界面可对图片进行管理。该网站的结构如图4-1所示。图4-1网站结构图4.2系统模块设计根据需求分析，可以将系统模块划分为用户服务模块、管理员功能模块和数据服务模块。4.2.1用户服务模块用户服务模块主要包括的功能有注册、登录、浏览查询功能、收藏功能、查看收藏等。用户注册时需要输入用户名、性别、密码、确认密码以及验证码的信息，用户在提交注册信息后，系统会查看数据库中是否有相同的用户名，若有相同用户名则显示“该用户名已注册”，用户需重新注册。用户名输入的字符需在1~20位之间，密码至少需要输入6位，两次输入的密码必须一致，验证码在点击之后会更新，以上信息全部输入正确才会注册成功。用户注册流程图如图4-2所示。图4-2用户注册流程图

用户登录时只需输入用户名和密码即可，用户提交信息后，系统会核对数据库中收集的信息，判断用户是否输入正确，若输入正确则显示“欢迎登陆，登陆成功！”，若输入错误，则会显示“密码输入错误”。用户登录功能流程图如图4-3所示。图4-3用户登录流程图用户在查询时需在查询框中输入关键字，系统接收关键字后会将其与数据库中photolist表的type字段进行比较，若查找到相同内容，则输出查询结果，若无相似内容，则输出“没有搜到想关图片，请重新搜索”。用户查询功能流程图如图4-4所示。图4-4查询功能流程图用户登录后就会拥有收藏的权限，用户可以根据爱好选择是否收藏该图片，在点击收藏后，系统首先会根据图片的ID号判断该图片是否已被该用户收藏，若已收藏则会显示“该图片已收藏”，若未收藏系统将会接收该图片的ID号、用户名、以及收藏时间等信息，收藏成功。用户收藏功能流程图如图4-5所示。图4-5收藏功能流程图4.2.2管理员功能模块管理员功能模块主要包含对数据库的管理和对后台管理系统的管理。管理员可在数据库中查看用户信息和图片信息，也可登录后台管理系统，对数据库中的图片进行管理。后台管理系统流程图如图4-6所示。图4-6后台管理系统流程图4.2.3数据服务模块数据服务模块是针对于用户信息和图片信息的管理，数据服务功能主要包括对数据的增、删、改、查。数据服务功能的流程图如图4-7所示。图4-7数据服务功能流程图4.3系统数据库设计4.3.1数据库介绍该网站建立了一个名为ecologydb的数据库，其中包含了五张表格：管理员用户adminuser表、记录用户收藏图片的事务collect表、标注图片信息photolist表、图片类型type表和用户user表。4.3.2管理员用户表该表中只保存了一条信息，即后台管理员用户admin、id号、加密后的密码password以及该用户所建立的时间time。表4-1管理员用户表IdUsernamePasswordTime1Admine10adc3949ba59abbe56e057f20f883e2021-02-0519:43:264.3.3事务表该表记录的是所有用户登录后收藏的图片，包含用户名username、用户所登录的时间time，用户的id号以及图片的id号。表4-2事务表IdImgidUsernameTime8121234562021-02-0721:40:187111234562021-02-0721:40:189131234562021-02-0721:40:181014Qwe2021-02-0721:40:181113Pr2021-04-2412:43:504.3.4图片信息表该表记录的是图片的一些信息，包含图片的id号，名称title，类型type以及图片pic以及上传到数据库的时间time等信息。表4-3图片信息表idTitleTipstypePicTime12山水山水森林210207072904.jpg2021-02-0715:29:0411老虎老虎动物210207071751.jpg2021-02-0715:17:5122青海青海青海210424070302.jpg2021-04-2413:03:0240海洋海洋海洋210501040523.jpg2021-05-0110:05:2398海南海南城市210501105834.jpg2021-05-0116:58:3413风景风景森林210207080138.jpg2021-02-0716:01:3868植物植物植物210501042853.jpg2021-05-0110:28:534.3.5图片类型表该表包含了图片的id号、名称title、描述tips以及上传到数据库的时间time四个字段，主要是将图片的各种类型分类出来，以达到分类存储的目的。表4-4图片类型表IdTitleTipsTime6森林森林2021-02-0715:13:1812海洋海洋2021-04-2617:50:3913植物植物2021-05-0110:27:5114城市城市2021-05-0113:34:2610绿色绿色2021-04-1518:36:2211青海青海2021-04-2412:55:467动物动物2021-02-0715:15:188山水山水12021-02-0715:28:284.3.6用户表用户表主要存储所有注册用户的信息，包含用户id号、用户名username、密码password、性别sex以及注册时间time，以达到核对用户信息的目的，确保用户可以随时根据该信息登录。表4-5用户表IdUsernamePasswordsexTime2123456123456女2021-02-0720:15:283qwe000000女2021-03-0215:36:164asd147258女2021-03-0716:51:415zxc369258女2021-03-0716:52:476pr159263女2021-03-1316:36:28

5网站的详细设计5.1前端页面设计5.1.1网页的设计步骤确定网站的主题并收集资料。首先分析该网站将为用户提供什么样的服务，即查询所需的生态图片，并可以收藏。以网站设计所要达到的目标为中心，进一步确定网站所要展示的内容和所要实现的功能。根据这些内容收集并整理设计网站过程中所要用到的资料，做好前期准备。建立站点。制作网站的第一个步骤就是建立站点，用来保存网站中的各类资源，可以将不同的资源分类保存。例如：images文件中保存的都是背景图和图标等图片，css文件中保存的都是各个页面的样式文件，而html文件中保存的就是各个页面的html文件。这样可以使整个网站的脉络清晰的展现出来，避免为今后的网站维护和扩充带来困难。建立网页的链接关系。设计好各个页面之间的链接关系，将所有页面通过某种关系链接起来，确保网页的链接结构层次分明，访问方便快捷。页面设计。页面主要分为4个页面，包含注册页面、登录页面、首页、以及用户页面。确定网站的主色调和设计风格，并画出各个页面的框架图，设计出导航栏，明确每个部分需要实现的功能，做好页面规划。页面制作。首先用HTML写好网页框架，使用css编写样式文件，进行渲染。再使用JavaScript和PHP实现网页间的交互功能，使其成为动态网页。利用MySQL数据库存储数据，并利用PHP代码连接数据库。最后使用PHP语言实现网站的功能。调试运行。完成网站的制作后进行调试运行，及时进行修改维护。5.1.2首页介绍首页主要是由头部header、背景banner、类别sort、主要部分main、页数page、页脚footer这六个部分构成。首先建立index.php文件来编写首页，再建立index.css文件用于编写首页的样式。接下来利用include("conn.php");引入conn.php文件调用数据库，另外使用JavaScript语句导入js/jquery-1.8.0.min.js文件，实现该页面图片收藏的功能时将会用到该文件。(1)header部分介绍Header部分主要由logo图片和链接查询search、导航nav、注册register、登录login这四个部分构成。Logo部分。将设计好的logo以图片的形式插入header部分的左上角部分，logo图片采用透明背景，以便更好地融入页面背景中。Nav部分。Nav部分包含首页、图片这两个链接，这两个链接使用了锚点链接的方法，点击之后将其定位到相应的地方。该网站中的链接均放置于无序列表<ul></ul>标签中，以改善HTML代码的可读性。Search部分。Search部分有一个输入框<input>和一个<button>按钮组成。可以通过输入框输入用户所要查询的内容，点击<button>按钮后将执行查询事件。在设置这一部分时需用到浮动float的原理，将两个块级盒子置于同一水平面。同样分别设置这两个子部分的样式，在<button>部分插入一个搜索的小图片，美化这一部分。用户信息部分。用户登录后会在该部分显示“欢迎该用户登录”的字样，并添加了“我的收藏”和“退出”的链接，点击后将会跳转到相应的界面。这一部分的实现首先需要用if(isset($_SESSION['user']))代码判断该用户是否登录，若已登录则用<?phpecho$_SESSION['user'];?>代码输出用户登录名称，在首页显示该用户登录名称。(2)banner部分介绍Banner部分主要是由一个背景图，以及背景图上方的文字内容和搜索框组成。文字部分采用定位position的方式将其定在banner中央，并设置相应的样式。搜索框部分用HTML代码<formaction="search.php"method="post">将表单值传递给search.php页面，search.php界面将获取相应的值，借助search字段值实现查询功能。(3)sort部分介绍Sort部分展示了生态图片的各个类别，将生态图片进一步划分为动物、植物、山水、森林、绿色等几个部分。在全部类别的链接部分添加sql语句，$result=mysqli_query($conn,"SELECT*FROM`type`orderbyiddesclimit0,8");执行sql语句，查询type字段根据id号分组降序显示全部信息，连接数据库显示图片，以实现图片分类显示的功能。并连接到list.php页面，根据数据库中list表的title字段查询相应的图片，并以数组$row["title"]的形式输出图片的名称title字段值。(4)main部分介绍Main部分是整个首页所展示的核心内容，主要是由一个子导航栏和下方展示的图片info部分组成。子导航栏包含了一个热门图片的文字以及一个查看全部的链接，热门图片的文字采用标题标签<h3></h3>来编写，并设置其id号为“one”，为header部分“图片”锚点链接的定位处。Info部分所展示的图片是数据库中的部分图片。这一部分的实现同样借用了浮动的原理，将五个盒子放置于同一行，且规定相应的高、宽及左右间距。由于这一部分没有指定高，它是由<li>标签的大小自动挤开的，而添加了浮动的盒子并不占用实际的位置，为了避免浮动的元素影响下方的元素，因此需要利用清除浮动的原理给浮动的盒子一个限制的范围。本文采用了伪元素的方法，作用于浮动元素的父亲，它使用:after和:before来在元素内部插入两个元素块，以达到清除浮动的效果。该部分图片更新的实现是由<imgsrc="up/<?phpecho$row["pic"];?>"alt="">，<spanonclick="changing(<?phpecho$row["id"];?>);">收藏</span>实现的。用JavaScript中的onclick事件执行changing函数的相关事件，当一个<img>的src改变时，页面会自动刷新这个<img>，实现图片更新的功能REF_Ref19276\r\h[10]。(5)page部分介绍Page部分主要是利用php代码来实现其功能，include("admin/function.php");调用function.php文件，实现控制页数翻页的功能。利用这两句代码$result=mysqli_query($conn,"SELECT*FROM`photolist`");$total=mysqli_num_rows($result)REF_Ref19361\r\h[11];获取到结果集$result中字段的数目，明确该部分显示的图片的数量，_PAGEFT($total,20);调用_pageft()函数，每页显示10条信息，该部分的图片数量超过20个时，将显示控制页数功能的图标。(6)footer部分介绍Footer部分象征着首页的结束。页脚的左上部分插入了本网站的logo图片，下方展现了该网站的简要介绍，右上部分插入了链接，包含“新手指南”和“图片”。5.1.3注册页面介绍注册页面register.html背景图选用了一张生态图片，给用户清新的感觉，这个页面包含两个部分，分别是header部分和box部分，这个页面需要用户填写部分信息，完成注册后进入登录页面。(1)header部分介绍Header部分位于页面的最上方，带有一个和背景图片相同色系的淡紫色#9d91b9下边框，与下方的内容分离开。最左侧同样放置了本网站的logo图片，接着放置了首页和登录的两个链接，样式设置为白色，鼠标经过后显示绿色且带有下边框的样式，这两个链接点击之后可以跳转到相对应的页面。(2)box部分介绍Box部分展示的是用户注册需要填写的信息，这部分选用了半透明白色rgba(255,255,255,.2)的背景色，采用绿色作为字体色。具体信息包含用户名、性别、密码、确认密码、以及验证码，这些内容均采用了表单来实现，在用户填写完成后点击立即注册按钮将其提交，后台数据库即可接收到相应的信息。首先从客户端以post方式传递过来的各项表单变量的value值，包含用户名、密码、性别和验证码字段REF_Ref19577\r\h[12]。然后$str="select*fromuserwhereusername='".$username."'";在数据库中查询是否已有用户注册过该用户名，若出现查询结果，则显示用户已被注册，若无，使用INSERT语句插入各字段的值，接收注册用户所输入的各个字段内容，注册成功。最后编写一个验证表单数据有效性的函数formjiance()，使用javascript脚本验证表单数据。5.1.4登录页面介绍登录页面同样包含header部分和box部分，header部分与注册页面的header部分相同。Box部分的实现需要用到PHP代码，if(isset($_POST['submit']))判断用户是否提交数据，提交后接收从客户端以post方式传递过来的各项表单变量的value值，例如：username、password。$sql="select*fromuserwhereusername='$username'andpassword='$password'";查询数据库，判断用户注册的账户是否正确。若用户输入正确，则利用javascript脚本语言弹出一个显示着“欢迎登陆，登陆成功！”的对话框，并跳转到首页。若用户输入为空或者输入信息有误，则弹出“账户或密码输入错误，请重新输入！”的对话框，并跳转到登录页面。5.1.5展示页面list.php介绍展示页面依然使用了首页的各项元素，和首页不同的是在图片展示部分添加了其他的功能。根据$result=mysqli_query($conn,"SELECT*FROM`photolist`wheretypelike'%$search%'");SQL查询语句，将用户输入的search字段查询和数据库中photolist表的type字段进行比较，查询出用户想要搜索的图片。<?phpif($total==0){echo"<divclass='searchre'>没有搜到想关图片，请重新搜索</div>";}?>在未查询到相关图片时，将显示“没有搜到想关图片，请重新搜索”的字样。5.1.6用户界面ues.php介绍用户界面是每个用户登录后显示其信息的界面，该界面与展示页面不同的是增加了collect.username='$_SESSION[user]REF_Ref19750\r\h[13]字段，并且根据收藏图片的ID号进行排序显示用户所收藏的图片。5.2功能页面设计5.2.1连接数据库conn.php文件介绍该文件中存储的是数据库连接代码，其他页面如需使用数据库都要调用本文件。该文件中编写了启动session会话、客户端发送原始的HTTP报头、设置错误提示错误控制、连接ecologydb数据库以及设置字符集为utf8基本信息。5.2.2退出登录loginout.php介绍session_destroy();删除会话空间，即删除会话的id号session_id，<scripttype='text/javascript'>alert('退出成功');window.location.href='index.php';</script>弹出一个“退出成功”的会话框，并且链接到未登录时的首页。5.2.3验证码介绍实现验证码部分编写了两个文件verify_a.php和verify_b.php。verify_a.php用来显示用户界面，对其进行验证，而verify_b.php页面用于产生验证码图片中的字符。verify_a.php页面verify_a.php页面中strcasecmp($str,$checkstr)==0将$str和$checkstr进行比较，若返回值为true则弹出“验证码输入正确”的对话框。verify_b.php页面verify_b.php页面用下面这段代码显示出验证码的四个值：for($i=0;$i<4;$i++){//验证码四位 $new_number[$i]=$result[rand(0,$len-1)];//任选一个值 $string=$string.$new_number[$i];//依次显示四个值}再用部分创建图形的函数来设置显示验证码的图形，并将图形以png格式输出到浏览器或文件中。5.2.4收藏功能shoucang.php介绍根据$str="select*fromcollectwhereimgid='$id'andusername='$user'";审核收藏图片，如果查询到记录就显示“图片已收藏”。若无，则使用INSERT语句插入各个字段值，接收用户收藏图片的id号，用户名以及收藏时间，将该图片收藏到该用户的数据库中。5.3后台管理系统设计后台管理系统是为管理员设计的一个界面，管理员登录后可在此页面中执行插入图片、删除图片、添加分类和查看图片等操作。该部分是由主页以及几个实现其功能的页面组成。5.3.1首页index.php介绍首页是一个管理员登录界面，整体采用蓝色作为主色调，内容部分采用一个方框定位在中央，并显示“网站信息后台管理系统”的标题。管理员需要输入用户号、密码以及验证码三个部分的信息。其中密码$pwd=md5($_POST["txt_pwd"]);部分采用md5加密的方式保存。用户输入正确后，将会弹出“管理员的登陆成功！”的对话框，验证码部分和数据提交验证部分和之前相同。5.3.2主页addblog.php介绍主页采用外部样式链接的方法应用css.css文件中的样式，该页面的header部分展示了该页面的主题“后台管理系统”。Mian部分分为left和right两部分，left部分是由图片管理和分类管理两部分进行划分的，图片管理下包含“我的图片”和“添加图片”两个链接，会相应的跳转到adminphoto.php界面和addphoto.php界面，而分类管理部分包含“分类管理”和“添加分类”的链接以及一个“退出”的链接，将分别跳转到adminlist.php界面、addblog.php界面和loginout.php界面。Right部分<formaction="<?phpecho$_SERVER['PHP_SELF'];?>"将显示分别点击left部分的链接后显示的内容，$_SERVER['PHP_SELF']是当前正在执行脚本的文件名。5.3.3添加图片addphoto.php页面介绍该页面主要实现的功能为添加图片。$_FILES["upfile"]["type"]=="image/gif"是文件的MIME类型。用该语句来确定允许选择的图片类型。使用if($_FILES["upfile"]["error"]>0)语句判断上传的文件是否出错,若出现错误，返回相关的错误代码。若无错才会上传图片。首先使用explode函数将上传前的文件以“.”分隔符分开获取文件的类型。$newname=$date.".".$uptype[1];对上传的文件进行重命名，以便进行更好的管理，而该网站采用提时间格式进行了重命名。然后采用move_uploaded_file()函数把上传的文件移动到新位置。移动临时文件到目标路径../up/下。接下来使用INSERT语句将图片的信息插入到photolist表中。最后判断图片插入是否成功，并弹出相应的对话框。5.3.4我的图片adminphoto.php页面介绍该界面采用表格的形式显示出图片的各项信息，包括图片名称、图片描述、图片、图片分类以及编辑和删除的链接。使用SQL语句将图片信息查询出来并显示，而编辑和删除的链接同样将分别跳转到editphoto.php页面和photodel.php页面。photodel.php页面采用$sql="deletefromphotolistwhereid=$name";语句对其进行删除，不管删除是否成功均跳转到adminphoto.php界面。editphoto.php页面包含图片名称、图片描述、图片分类、图片文件以及提交等表单元素，管理员选择相关信息后，使用UPDATE语句对photolist表中的各字段值进行更新。5.3.5分类管理adminlist.php页面介绍该界面同样采用表格的形式显示出图片分类的各项信息，包括分类标题、分类简介以及编辑和删除的链接。使用SQL语句查询type表显示图片分类信息，展示图片分类的内容。5.3.6添加分类addblog.php页面介绍该页面只包含了分类标题以及分类简介的表单元素，$sql="INSERTINTOtype(`title`,`tips`)VALUES('$title','$tips')";将这两个字段插入到数据库中。

6系统运行与测试6.1系统测试环境服务器端：XAMPPControlPanelV3.2.4客户端：Windows10SP1、MicrosoftEdge6.2系统功能测试6.2.1用户服务功能测试注册功能测试用户在注册时若未按要求填写信息，则会出现错误信息提示框，如图所示。图6-1注册场景1图6-2注册场景2用户注册成功后将显示“注册成功”的提示框，并跳转到登录页面，如图所示。图6-3注册场景3登录功能测试用户若填写信息错误，将会出现错误信息提示框，如图所示。

图6-4登录场景1用户登录成功后，会出现登录成功的提示框并跳转到首页，且显示该用户的信息，如图所示。图6-5登录场景2收藏测试用户若已收藏该图片，则会出现“该图片已收藏”的提示框，如图所示。图6-6收藏场景1用户收藏成功后，在我的收藏中即可查看收藏图片，如图所示。图6-7收藏场景2查询测试若用户输入的关键字在数据库中未查询到结果，将会显示“未查询到结果”，如图所示。图6-8查询场景1若用户输入的关键字在数据库中查询到结果，将会输出结果，如图所示。图6-9查询场景26.2.2管理员功能测