校园二手市场信息发布系统的设计与实现(前台部分)

河北农业大学本科毕业论文(设计)题目：校园二手市场信息发布系统的设计与实现（前台部分）摘要随着互联网技术的迅猛发展，校园信息一体化过程加快，学生网民的数量越来越多，而安全，快捷，方便的校园局域网为学生之间的交易提供了良好的网络支持。由于教育的阶段性，大量的二手书籍及二手物品并没有丧失或完全丧失其使用价值，每年毕业生的到来为校园二手交易市场提供了丰富的内容。为了使交易信息更全面，交易过程更频繁，交易方式更为便捷，尝试设计校园二手市场信息发布系统前台部分，用意在于为大学生的二手交易提供一个良好的平台，同时唤起并树立节约意识，提倡资源循环利用，共创绿色校园。本文在系统架构上采用当前比较流行的B/S结构，通过HTML,DIV+CSS及JavaScript技术进行开发设计。在整个系统设计中充分利用了模块化的设计思想和开发方法。本系统实用性较强、扩展灵活、操作方便、安全稳定。关键字：HTMLDIV+CSSJavaScriptB/SWEB校园二手市场AbstractWiththerapiddevelopmentofinternettechnology,campusinformationintegrationquickensitssteps.Moreandmorestudentsbegintouseinternet.CampusLANwhichissafetyandconvenientbenefitsthetransactionbetweenstudents.Manysecond-handmaterialshavenotlostitsservicevaluecompletelybecauseofthestageofeducation.Everyyearstudentswhoaregoingtograduateofferalargeamountofmaterialsforsecondarymarketoncampus.Tomakethetransactionsmorefully,theprocessmorefrequentlyandconvenient,Iattempttodevelopthecampussecond-handmarketinformationreleasesystemforthefrontpart,whichmeanstosupplyagoodplatformforstudents’transactionandarosetheawarenessofdiligentandthrifty,whichcancreateabetteruniversity.ThisplatformputsB/Ssystemintouse,whichgetshelpfromHTML、DIV+CSSSandJavaScript.Thewholesystemmakesthemostuseoftheideaofmodulization,whichmakesthissystempragmatically,flexiblyandconveniently.Keywords:HTMLDIV+CSSJavaScriptB/SWEBcampussecond-handmarket目录1绪论 绪论1.1前言随着计算机技术的飞速发展和高等教育体制改革的不断深入，计算机技术已经进入网络时代。使用计算机进行信息控制，不仅提高了工作效率，而且大大提高了安全性。Internet在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作、学习和生活服务。由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页面能实现网上交易平台、客户信息反馈等方面方便了商家与客户之间信息交流。1.2课题研究的背景及意义人类社会经历了从野蛮到文明、从原始社会到社会主义社会、从使用简单石头工具到现在使用智能化工具的过程，生活水平不断提高，逐渐有了从物物交换到以货币为等价物的交换，经历了一个由低级到高级的过程。随着社会的发展，技术的不断发展以及产品的不断更新换代使得人们对物质的要求越来越高，随之而来的问题便是越来越多的二手货物堆积了下来却无法得到更好的利用。特别是在大学校园里面，作为走在世界发展最前端的大学生，首先，他们没有时间也没有精力去经营一个二手货物商店，而且他们也没有足够的二手货来支撑这个商店，一般大学校园里大学生们的二手货都只是零散的，并不能得到很好的二次利用。其次，一个主要的原因就是大学生们并没有稳定的资金来源，所以要如何处理自己身边的二手货物，并且如何能够得到一样自己想要的二手货物而又不需要花太多的钱，成为当今大学生们需要解决的一个难题。Internet经过20多年的发展，已经成为世界上覆盖最广、规模最大、信息资源最丰富的计算机网络，它延伸到了世界的每一个角落，兼容所有的传输媒介，支持成千上万不同的应用。Internet极大地推动了世界经济向知识经济的转变，近两年间，随着国际互联网以惊人的速度席卷全球之际，我国多媒体网络覆盖面也在不断扩大。然而，对于在校学生，一般而言，现在都还没有自食其力，大都需要父母的财力支持。尤其是大学生的花费更多，平时吃好、喝好、用好奉行“三好主义”，而殊不知父母的沉重负担。在更多的时候，他们有很多东西都没用处，一直闲着，或扔掉或舍不得存着。对这种情况，他们一般选择前者——扔掉。这时，如果大家能把不用的物品拿出来交换，就会得到共赢。因此，大学校园里学生们的二手货能够得到更好的利用所欠缺的正是这么一个交易平台。利用Internet这个媒介建立一个功能强大的、界面美观的大学校园二手物品交易平台，为学生们的二手货物能更好的得到二次利用而搭建一个良好的交易平台。本课题在老师的指导下面向大学生校园二手市场的二手物品交易平台，它的出发点必须是实用，操作简单，界面友好，让大学校园内有买卖需求的人群共享同一个信息渠道,实现买卖的双方线上、线下互动。另外也是为了锻炼自己，加强对HTML、JS、DIV+CSS、PHP、MYSQL语言技术能力，了解其内部的运行原理。1.3国内外研究现状目前各国政府已充分认识到电子商务对经济增长的巨大推动作用，从而大力促进电子商务在国民经济各个领域的应用。在电子商务的技术、市场和社会法律等方面，美国均处于领先地位，有著名的购物网站A、eBay等。欧洲虽起步落后于美国，但其发展势头却非常迅猛。国外电子商务系统发展已相对完善，仍存在一定的问题，大多数系统忽略了二手交易市场这个独特的环境，针对性不强。由于二手交易应用的商务模式还在探索中，因此在现阶段，二手交易的电子商务真正成熟发展的还不太多。我国的电子商务起步晚，发展速度快。经过1999～2002年的萌芽，2003～2006年的高速增长阶段，现在已经进入了纵深发展阶段。在我国，目前的网络交易平台包括二手交易在内有很多，门户网站以易趣、阿里巴巴、淘宝网等为主，而电脑配件等就以太平洋二手栏目为主，此外，还有当当、卓越、全球采购等著名的购物网站。目前国内的网上交易市场还存在缺乏诚信、安全、物流不畅、法律政策环境有待改善的问题。比如所有的网上交易都无法做到实名制，具有安全隐患；复杂一点的如二手设备交易，因为网上交易和习惯的传统交易方法不同，也会遇到一些困难。发展二手交易电子商务网站，就要通过打造一个安全的交易环境，创新经营策略来吸引网民，走大众化的路线。另外，在目前我国大部分高校在大学生创业和社团活动中，二手物品交易市场仍通过提供固定的交易市场进行交易，需要通过跳蚤市场或是贴广告作为交易的中介，时间和地点的不稳定性提高了交易的困难度，想要成功进行交易变的非常困难。信息流动滞后，对于买方想要获得二手交易市场的商品信息必须跑去跳蚤市场或是寻找公告板上张贴的广告；而对于卖方想要使自己想卖的物品信息传播出去要么破费去张贴广告，要么就是节假日去跳蚤市场摆摊。信息传播具有较大的滞后性。因此大学生校园二手市场交易平台是十分必要的。就目前校园二手市场交易平台的研究现状来看，国内大部分高校学生在该方面研究还没有形成系统，而相关的研究又是分散的、理论性的研究较多，而系统的、应用性的研究较少。因此提供校园二手市场交易平台是十分重要的。1.4论文主要研究内容本文主要实现校园二手信息发布系统的前台部分。主要包括：前台总体样式、交易类主题页面、浏览类主题页面、信息列表等页面的设计，以及用户注册、交易信息发布、用户管理等功能的实现。2系统关键技术研究2.1HTML相关简介超级文本标记语言（英文缩写：HTML）是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。其主要特点如下：1）简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。2）可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。3）平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上。2.2JavaScript相关简介JavaScript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。JavaScript是由Netscape公司开发的一种脚本语言（scriptinglanguage），或者称为描述语言。在HTML基础上，使用JavaScript可以开发交互式Web网页。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。运行用JavaScript编写的程序需要能支持JavaScript语言的浏览器。Netscape公司Navigator3.0以上版本的浏览器都能支持JavaScript程序，微软公司InternetExplorer3.0以上版本的浏览器基本上支持JavaScript。微软公司还有自己开发的JavaScript，称为JScript。Javascript和Jscript基本上是相同的，只是在一些细节上有出入。Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。JavaScript使网页增加互动性。JavaScript使有规律地重复的HTML文段简化，减少下载时间。JavaScript能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由CGI验证。其主要特点如下：1）是一种脚本编写语言。JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。2）基于对象的语言。JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。3）简单性。JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。4）安全性。JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。5）动态性的。JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(HomePage)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。6）跨平台性。JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。综上所述，JavaScript是一种新的描述语言，它可以被嵌入到HTML的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(Server)处理，再传回来的过程，而直接可以被客户端(Client)的应用程式所处理。2.3DIV+CSS相关简介DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，DIV+CSS是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是TheExtensibleHyperTextMarkupLanguage（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。DIV+CSS的特点：1）符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。2）支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐。您的网站都能很好的兼容。3）搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。4）样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。现很多个人站长新建站点都采用了DIV+CSS来构建自己的网站页面，可见DIV+CSS替代table已经不是遥远梦想。5）通过制作发行同样的页面使用TABLE做的页面与DIV+CSS制作的页面大小对比，DIV+CSS的XHTML页面大小至少小TABLE制作页面1/4。从而使的浏览DIV+CSS的页面更加快捷快速。DIV+CSS的优点：1）使页面载入得更快。由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。2）降低流量费用。页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。3）修改设计时更有效率。由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。4）保持视觉的一致性。DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。5）更好地被搜索引擎收录。由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。6）对浏览者和浏览器更具亲和力。我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。2.4PHP相关简介PHP，是英文超级文本预处理语言（PHP：HypertextPreprocessor）的缩写，是一种HTML内嵌式语言，与微软的APS颇有几分相似，都是一种在服务器端执行的嵌入HTML文档的脚本语言，语言的风格类似于C语言，现在被很多网站编程人员广泛运用。PHP独特的语法混合了C、Java、Perl以及PHP自创的新语法。它可以比CGI或者Perl更快速地执行动态网页。与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；与同样是嵌入HTML文档的脚本语言JavaScript相比，PHP在服务器端执行，充分利用了服务器的性能。PHP执行引擎还会将用户经常访问的PHP程序驻留在内存中，其他用户再一次访问这个程序时就可以直接执行内存中的代码，而不需要重新编译程序了，这也是PHP高效率的体现之一。PHP是一种简单的，面向对象的，解释型的，健壮的，安全的，性能非常之高的，独立于架构的，可移植的，动态的脚本语言，具有和Java类似的Class关键字。PHP正迅速变成一种标准的，多用途的，面向对象的脚本语言，不仅可以用来开发Web应用程序，也可以开普通应用程序。其特点主要如下：1）数据库连接。PHP具有与许多数据库相连接的函数。PHP的开发者们为了更适合Web编程，开发了许多外围的基库，这些库包含了更易用的层，这样就可以方便地利用PHP连接包括Oracle、MS-Acess、MySQL在内的大部分数据库。PHP与MySQL是现在绝佳的组合。户可以自己编写外围的函数间接存取数据库。通过这样的途径，当用户更换使用的数据库时，可以轻松的更改编码以适应这样的变化。PHPLIB就是最常用的可以提供一般事务需要的一系列基库。2）可扩展性。PHP已经进入了一个高速发展的时期，对于一个非程序员来说为PHP扩展附加功能可能会比较难，但是对于一个PHP程序员来说，只要熟悉PHP，完全能非常容易地对它的功能进行扩展。3）面向对象编程。PHP提供了类和对象。基于Web的编程工作非常需要面向对象编程能力。PHP支持构造器、提取类等。在php4、php5中，面向对象方面都有了很大的改进与提高，能出色地完成Web开发工作。4）可伸缩性。传统上网页的交互作用是通过CGI来实现的。CGI程序的伸缩性不很理想，因为它为每一个正在运行的CGI程序开发一个独立进程。解决方法就是将经常用来编写CGI程序的语言的解释器编译进Web服务器（如mod_perl，JSP），PHP就可以用这种方式安装。内嵌的PHP可以具有更高的可伸缩性。2.5MySQL相关简介MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQLAB公司。在2008年1月16日被Sun公司收购。目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小，速度快，总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。SQL全称是“结构化查询语言（StructuredQueryLanguage）”,最早是由IBM的圣约瑟研究实验室为其关系型数据库管理系统SYSTEMR开发的一种查询语言，它的前身是SQUARE语言。SQL语言结构简洁，功能强大，简单易学，所以自从IBM公司1981年推出以来，就得到了广泛的应用。如今无论是像Oracle、Sybase、Informix、SQLServer这些大型数据库管理系统，还是VisualFoxpro，PowerBuilder这些微机上常用的数据库开发系统，都支持SQL语言作为查询语言。SQL已经成为关系型数据库普遍使用的标准，使用这种标准数据库语言对程序设计和数据库维护都带来了极大的方便。SQL语言的常用操作有：建立数据库数据表（CREATETABLE）；从数据库中筛选一个记录集（SELECT），这是最常用的一个语句，功能强大，能有效地对数据库中一个或多个数据表中的数据进行访问，并兼有排序、分组等功能；在数据表中添加一个记录（INSERT）；删除符合条件的记录（DELETE）；更改符合条件的记录（UPDATE）。MySQL具有以下特点：1）使用C和C++编写，并使用了多种编译器进行测试，保证源代码的可移植性。2）支持AIX、FreeBSD、HP-UX、Linux、MacOS、NovellNetware、OpenBSD、OS/2Wrap、Solaris、Windows等多种操作系统。3）为多种编程语言提供了API。这些编程语言包括C、C++、Eiffel、Java、Perl、PHP、Python、Ruby和Tcl等。4）支持多线程，充分利用CPU资源。5）优化的SQL查询算法，有效地提高查询速度。6）既能够作为一个单独的应用程序应用在客户端服务器网络环境中，也能够作为一个库而嵌入到其他的软件中提供多语言支持，常见的编码如中文的GB2312、BIG5、日文的Shift_JIS等都可以用作数据表名和数据列名。7）提供TCP/IP、ODBC和JDBC等多种数据库连接途径。8）提供用于管理、检查、优化数据库操作的管理工具。9）可以处理有用上千万条记录的大型数据库。3系统分析3.1需求分析随着社会的发展，技术的不断发展以及产品的不断更新换代使得人们对物质的要求越来越高，随之而来的问题便是越来越多的二手货物堆积了下来却无法得到更好的利用。特别是在大学校园里面，作为走在世界发展最前端的大学生，首先，他们没有时间也没有精力去经营一个二手货物商店，而且他们也没有足够的二手货来支撑这个商店，一般大学校园里大学生们的二手货都只是零散的，并不能得到很好的二次利用。其次，一个主要的原因就是大学生们并没有稳定的资金来源，所以要如何处理自己身边的二手货物，并且如何能够得到一样自己想要的二手货物而又不需要花太多的钱，成为当今大学生们需要解决的一个难题。另外，在目前我国大部分高校在大学生创业和社团活动中，二手物品交易市场仍通过提供固定的交易市场进行交易，需要通过跳蚤市场或是贴广告作为交易的中介，时间和地点的不稳定性提高了交易的困难度，想要成功进行交易变的非常困难。信息流动滞后，对于买方想要获得二手交易市场的商品信息必须跑去跳蚤市场或是寻找公告板上张贴的广告；而对于卖方想要使自己想卖的物品信息传播出去要么破费去张贴广告，要么就是节假日去跳蚤市场摆摊。信息传播具有较大的滞后性。因此大学生校园二手市场交易平台是十分必要的。3.2可行性分析3.2.1技术可行性在软件方面，现在，市场上流行的Web应用开发产品很多，可以运用JS做菜单和图片展示动画,DIV+CSS是现在最主流的页面布局方式利用,CSS可以灵活地控制页面的各种元素，利用这些技术，我可以顺利的实现校园二手市场的前台部分的功能。在硬件方面，科技飞速发展的今天，计算机的运算速度越来越快，容量越来越大，可靠性越来越高，价格越来越低，硬件平台完全能满足本系统的需求。3.2.2经济可行性本系统采用PC机开发，节省人力物力，以最小的代价提高效率，具有很好的经济前景和效益。本系统不仅开发成本较低，还能为学生进行二手交易提供一个平台。3.2.3社会可行性本系统符合当前学生的生活需求，符合信息化社会发展的要求，能更好的处理学生二手商品，减少浪费现象，也能方便学生生活。3.2.4操作可行性本系统是完全的人机交互式界面，文字表达简单明确，用户界面友好，使用方法简明易懂，用户可以轻松使用。管理人员可以及时准确地收集各种信息资源，修改管理系统中的资料，维护整个系统的稳定运行。4系统设计4.1系统前台功能设计系统要求具备管理员和用户两端对各自业务逻辑的处理。根据功能的关联关系和集中分组的原则，将系统细化如图4-1所示的结构图：图4-1系统结构4.2前台整体风格设计作为校园二手交易市场，前台页面的风格设计要求贴近校园生活。本站的整体色调为淡蓝色，配合白色的底色，给人清新明快的感觉，活泼而不失稳重，长时间浏览页面也不会感觉疲劳。图4-2网站主色调整体页面采用现在流行的SNS网站元素设计，具有时代气息。整站包括汇总了全部信息的门户、买卖家交流信息的论坛、综合搜索页面和用户的个人空间。导航、标题、图标、留言框等元素都紧密围绕站点主色调设计。站点主CSS文件的默认字号为14px，包括导航栏、标题、文章和帖子内容均采用此设置。相较前几年流行的12px字号，显得更加大气，阅读起来也更加舒服。超级链接则采用活动链接有下划线的样式，简单直观。4.3前台板块设计 根据功能设计，参考各大成熟的二手交易网站，前台的板块从类别上分为两大类：浏览类和交易类，浏览类主题只允许管理员发布，用户只具有浏览权限；交易类主题供用户发布交易信息使用，允许编辑和留言。各板块具体作用见表3-1：表4-1各板块说明版块名类型用途清舍甩卖交易类提供毕业季各种物品买卖图书音像交易类提供二手图书音像交易手机通讯交易类提供二手手机和配件交易电脑周边交易类提供二手电脑和配件交易数码产品交易类提供二手数码产品交易其他商品交易类提供其他二手商品交易通知公告浏览类发布网站的各种通知公告新手帮助浏览类新手问答，解决本网站的各种使用问题4.4首页设计首页是一个站点的门户，是网站建站时树状结构的第一页，即打开后的第一个页面，是一个网站的主索引页，它可以令访客了解网站概貌并引导其调阅重点内容。所以它是整个网站形象的重中之重，也是网站所有信息归类的缩影。首页要求在保证整体感的前提下，根据大多数人的阅读习惯，以色彩、线条、图片等要素将LOGO、导航条、各功能区以及内容区进行分隔。采用用户的既定标准色，注重协调各区域的主次关系，以营造高易用性与视觉舒适性相结合的人机交互界面为终极目的。本站首页的总体布局如图4-3：LOGO用户登录区导航栏搜索栏交易类主题分类列表浏览类主题友情链接页脚图4-3网站首页布局4.5交易类页面设计交易类页面是网站的核心信息页面，为用户提供各类二手商品交易，包括商品的出售和收购。一方面，要求页面的布局合理，另一方面，页面所提供的相关信息应该尽可能准备、详尽。信息列表页面的总体布局如图4-4：LOGO用户登录区导航栏搜索栏板块导航栏信息分类列表页脚图4-4交易信息列表页面布局内容页面的总体布局如图4-5：LOGO用户登录区导航栏搜索栏商品详情（出售或收购显示有所不同）留言区页脚图4-5交易信息内容页面布局4.5.1出售类页面此页面供用户出售各类二手商品，为了保证交易的顺利，页面应包含如下商品信息：表4-2出售类页面包含信息版块名必填类型说明商品名称是Varchar出售商品的准确名称新旧程度是Varchar（Radio）出售商品的新旧程度，为选项出手价格是Int（Range）出售商品的价格，可以是一个范围QQ是Varchar卖家的QQ联系电话是Varchar卖家的联系电话交易地点是String双方交易的地点所属学校是Varchar卖家所属的学校，在注册时要求填写商品图片否Image出售商品的图片商品描述否Text对出售商品的详细描述4.5.2收购类页面 此页面供用户求购各类二手商品，为了保证交易的顺利，页面应包含如下商品信息：表4-3收购类页面包含信息版块名必填类型说明商品名称是Varchar收购商品的准确名称收购价格是Int（Range）收购商品的价格，可以是一个范围QQ是Varchar买家的QQ联系电话是Varchar买家的联系电话交易地点是Varchar双方交易的地点所属学校是Varchar买家所属的学校，在注册时要求填写商品描述否Text对收购商品的详细描述4.6.浏览类页面设计浏览类页面是网站站务通知和帮助信息的发布窗口，用户由此可以获取最新的活动通知和用户帮助。本类页面的设计参考常见的门户类网站的布局和包含信息，如下：LOGO用户登录区导航栏搜索栏信息内容分类检索页脚图4-6浏览类页面布局表4-4浏览类主题包含信息版块名必填类型说明标题是Varchar文章的标题发布时间自动Datetime文章的发布时间发布者自动Varchar文章的作者查看数自动Int文章的浏览次数摘要自动Text文章的摘要内容是Text文章的详细内容4.7数据库设计校园二手信息发布系统所有数据均保存在数据库中，采用MySQL作为数据库管理系统。根据系统需要，首先创建一个名为buyer的数据库，用于各种系统信息数据的存储与管理。然后在数据库中创建需要的数据表，系统的核心业务数据表见表4-5。表4-5核心数据表一览表名说明内容备注common_member用户信息表存储管理员和用户的各类信息通过表内各权限字段控制不同权限forum_forum交易板块分类表存储交易类主题的6个分类forum_sort、forum_thread表的父级forum_sort交易信息分类表存储各交易板块中商品的进一步分类通过fid区别父级forum_thread交易类信息表存储已发布的各个交易类主题通过fid区别父级portal_sort浏览板块分类表存储浏览类主题的2个分类portal_article表的父级portal_article浏览类信息表存储已发布的各个浏览类主题通过fid区别父级portal_style首页布局表存储首页编辑的CSS列表控制首页DIY的CSS布局和DIV属性portal_link友情链接表存储页面底部友情链接可在后台选择是否显示4.8安全性设计随着网络黑客的盛行，互联网网站频受攻击，各种恶意窃取网络数据的事件层出不穷，所以现在网络数据库的安全必须给予高度重视。本系统从一开始就考虑到了这个问题，从五个方面提高数据库的安全性：1）用户访问范围的限制从结构上，所有用户的操作都是B/S三层结构，即用户不能直接访问数据层，必须通过应用层才能得到所需的数据。这样等于在传统C/S模式的两层结构上加了一个安全层。从安全和模块化考虑，本系统设置了不同级别的管理员，使管理员只能根据系统赋予的权限行使具有限制性的权限，确保了系统易于维护和管理。一般的用户只能访问前台发布交易信息或浏览资源。2）系统数据维护不同级别的管理员都相应地对自己管理的内容进行数据备份，当网络出现故障或者发生某些意外时，不至于使信息丢失。3）系统日常维护定期对系统进行必要的维护，及时排除一些简单的错误故障，同样会增强系统的安全性。定期或不定期对系统密码进行修改，防止造成数据泄露和丢失。4）添加验证代码，防止越权操作现在有很多网络黑客可以从网上直接调用密码验证后的文件，从而绕过口令验证和安全检查，而本系统为解决这个问题，在每一个文件里都加入了一个安全参数的认证，如果有一个页面被用户直接调用而没有经过身份验证，该页面会自动重定向到登入页面，还有对于已经通过系统身份验证的不同类型的用户，用SESSION[‘login’]、SESSION[‘id’]等变量参数进行跟踪来加强系统安全性。这样，任何人都不能超越权限访问管理员相应的管理页面或根本不为其提供相应页面的链接。以管理员入口为例，其验证代码如下：<?phpif(!$_SESSION['login']||$_SESSION['login']>3){ echo"<metahttp-equiv=\"Content-Type\"content=\"text/html;charset=utf-8\"/><scriptlanguage=\"JavaScript\">alert('您没有这个权限');</script>"; exit;}?>这样，非管理员类型的用户都被拒之门外了，即使知道页面所在的具体路径，也不可能越权访问。5）数据库加密为了保护核心数据库，采用了数据库加密的方法，这样即使数据库文件被人发现，也会因为缺少正确的口令而无法打开。5系统实现5.1环境配置软件方面，采用Photshop进行各UI元素的设计，采用Dreamweaver进行HTML页面、JS脚本和CSS表的编码，之后以Discuz！X3开源论坛为后台进行页面整合，通过WampServer搭建服务器端运行环境。WampServer集成了Apache、PHP和MySQL，安装方便，配置简单，性能稳定。操作系统：WindowsServer2003Web服务器：Apache2.2.8数据库：MySQL5.0.51b语言：PHP5.2.6图5-1WampServerv2.0硬件方面，租用2GB的虚拟主机，由专业主机运营团队进行维护管理，保证了系统安全稳定地运行。图5-2网朝网政商信息A型虚拟主机配置5.2目录结构图5-3目录结构表5-1主要文件夹及文件用途文件夹或文件名用途Config存放站点的配置文件Data存放系统的上传附件、下载文件等数据Sourece存放后台系统的PHP源程序部分Static存放前台的图片、JS脚本等内容Template存放前台的HTML静态页面和CSS样式表admin.php系统后台入口furum.php论坛模式页面index.php首页，可在后台设置portal.php门户模式页面，系统默认首页search.php搜索页面5.3首页实现5.3.1页头部分图5-4页头效果页头部分存储在template/default/common/header.htm中供各页面公共调用，左侧为网站LOGO。LOGO的设计结合网站“碰碰头”的名称和网站的整体色调，采用Q版圆角卡通造型，与整站融合为一，营造出本站“轻轻一碰，连动你我”的轻松自由的买卖风格。右侧为用户登录模块，提供注册和登录功能。导航条通过JS控制，在<a>标签中加入函数，当鼠标触发onMouseOver事件时调用swapInage函数，相应的按钮会改变样式，鼠标移开时，调用swapImgRestrore函数恢复原先样式。5.3.2内容部分图5-5内容效果各板块框架采用统一淡蓝色样式，标题栏做了渐变处理。各标题的字体颜色和大小根据其主从程度做了细节的调节,不同框架内的样式亦通过CSS进行布局。在最新二手信息板块左侧，利用JS脚本编写了制作了一个动态图片展示区，让页面更富动感。主要调用的样式如下：数据列表部分，通过PHP语言访问MySQL数据库，动态读取库中对应表的内容，利用CSS布局和Discuz！的数据模板进行显示。例如，最新二手信息板块的显示样式为：[出售or收购][板块名称]主题名称发布日期；其对应代码如下：清舍甩卖板块简介的样式代码如下：5.3.3页脚部分图5-6页脚效果页脚部分存储在template/default/common/footer.htm中供各页面公共调用。上方是友情链接，可在后台选择是否显示在论坛版式中。最底部是版权信息和数据统计功能，可在后台中扩展加入第三方统计代码。5.3.4总体效果按照设计布局，对各个元素进行整合，得到了首页portal.php。此外，在首页预留了部分广告位，增加了站点的商业价值。首页的总体实现如图5-7、5-8：图5-7首页效果（顶部）图5-8首页效果（底部）5.4论坛风格页面考虑到部分用户不喜欢门户页面风格的主页，本站设计了另一个集合了6个交易板块的论坛风格页面furum.php。配合流行的圆形卡通UI图标元素和标题列表介绍，使得用户能更清晰、直观地获得想要的信息资源。图5-9论坛风格页面效果5.5交易类页面通过点击首页右上的注册按钮，填写注册信息，用户可进行注册，以会员身份加入到二手市场中进行交易。图5-10用户注册页面5.5.1交易信息发布页面根据前文设计的需要填写的商品信息，选择对应的HTML标签，利用<form>表单进行POST，实现交易信息发布页面。表5-2商品信息对应的HTML标签版块名HTML标签说明主题分类Select商品的分类标题Input（text）商品的标题商品名称Input（text）商品的准确名称新旧程度Radio出售商品的新旧程度，仅我要卖页面有收购/出手价格Input（text）商品的价格，可以是一个范围QQInput（text）卖/买家的QQ联系电话Input（text）卖/买家的联系电话交易地点Input（text）双方交易的地点所属学校Input（text）卖/买家所属的学校，在注册时要求填写商品图片Input（file）出售商品的图片，仅我要卖页面有商品描述Textarea对要收购商品的详细描述图5-11交易信息发布页面效果[出售页面]5.5.2交易信息列表页面图5-12交易信息列表页面效果信息列表页面左侧为各板块的导航条，右侧为列表。在列表顶端加入了该板块的信息分类检索功能，可以通过点击相应的分类，查看属于该分类的主题。分类检索的样式代码如下：5.5.3交易信息浏览页面用户可通过首页和论坛的各数据列表的超链接浏览已发布的各个交易信息。利用数据库中的数据和对商品页布局的规划，采用<div>编写页面整体框架，通过<table>标签对商品信息展示部分进行实现。这里之所以没有摈弃<table>，是因为其在单元格对齐方面有着不错的性能。在页面底部整合了论坛留言模块，用户可进行留言。出售信息发布的效果及商品信息展示部分代码见图，收购页面与之类似。图5-13交易信息浏览页面效果交易信息显示的样式代码如下：5.6浏览类页面利用前文设计的布局，实现浏览类页面。图5-14浏览类页面效果文章信息显示的样式代码如下：总结经过三个月的设计和开发，校园二手市场信息发布系统前台部分基本开发完毕，其功能基本符合用户需求，系统能够完成二手信息分类、二手交易信息发布、用户管理等基本功能，完成了首页、交易类页面、浏览类页面等页面的设计及实现。由于时间较短和本人水平有限，本系统必然会存在一些缺陷和不足，这些问题会在各位老师的指导建议及本人的不断学习中得到解决。通过本次毕业设计，我的系统设计水平有了很大提高。首先，在设计的过程中始终贯穿着管理信息系统和软件工程的设计思路与方法，使自己能够从实例中更好地掌握设计系统的整体出发点与设计方法。其次，通过毕业设计让我发现了自己还存在太多的不足。虽然是一名计算机专业的学生，但自己欠缺的专业知识还很多，需要不断地学习提高。在设计过程中，我对编程语言、数据库及一些常用的软件都有了更多的了解与掌握，增长了知识，开拓了眼界，增强了实践能力，这都使我受益匪浅。回顾这三个月来，很是辛苦，但是成长了许多。我深深明白了理论与实际相结合的重要性，只有理论知识是远远不够的，只有学以致用，将理论落实到实践中去，才能提高自己的实践能力及思维能力，才能真正为社会服务。即将作别四载美好的大学时光，我会时刻谨记母校“崇德、务实、求是”的校训，做一个有用的人。致谢首先诚挚地感谢我的指导老师赵洋老师，赵老师的悉心教导使我得以顺利完成设计任务，从理论上升到实践，真正学以致用。在设计过程中，赵老师多次帮助我分析思路，开拓视角，在我遇到困难时给予我最大的支持和鼓励。赵老师严谨求实的治学态度，踏实坚韧的工作精神，将使我终生受益。在此，谨向赵老师致以诚挚的谢意和崇高的敬意。感谢信息科学与技术学院的所有领导和老师。他们严谨的学风、渊博的知识、诲人不倦的品格一直感染和激励着我不断上进。感谢我的家人、朋友和同学们对我的大力支持，他们的关爱和鼓励是我为人生理想不懈奋斗的永恒动力。谢谢你们。参考文献[1]巴德精通CSS：高级Web标准解决方案（第2版）.北京:人民邮电出版社.2010.5.[2]吴亮JavaScript王者归来.北京:清华大学出版社.2008.7.[3]PHPChina.PHP5项目开发实战详解[M].北京:电子工业出版社,2008.1.[4]刘龙飞.动态网站开发从基础到实践[M].北京:电子工业出版社,2008.8.[5]（美）贝伊利,（美）莫里森.HeadFirstPHP&MYSQL(影印版)[M].南京:东南大学出版社,2010.10.[6]刘竹林.软件工程与项目管理[M].北京:北京师范大学出版社,2008.7.[7]黄梯云.管理信息系统导论[M].北京:机械工业出版社,2008.7.[8]崔仂.几种经典设计模式组合的参考架构[J]．电脑知识与技术,2004,(14).目录TOC\o"1-2"\h\z\u第一章总论 1第二章项目提出的背景和必要性 4第一节项目建设背景 4第二节项目建设的必要性 4第三节项目建设的先进性 8第三章市场分析与建设规模 10第一节市场分析 10第二节建设规模 11第四章工艺技术方案及设备选型