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

河北农业大学 本科毕业论文(设计)题 目： 校园二手市场信息发布系统的设计与实现（前台部分） 摘 要随着互联网技术的迅猛发展，校园信息一体化过程加快，学生网民的数量越来越多，而安全，快捷，方便的校园局域网为学生之间的交易提供了良好的网络支持。由于教育的阶段性，大量的二手书籍及二手物品并没有丧失或完全丧失其使用价值，每年毕业生的到来为校园二手交易市场提供了丰富的内容。为了使交易信息更全面，交易过程更频繁，交易方式更为便捷，尝试设计校园二手市场信息发布系统前台部分，用意在于为大学生的二手交易提供一个良好的平台，同时唤起并树立节约意识，提倡资源循环利用，共创绿色校园。本文在系统架构上采用当前比较流行的B/S结构，通过HTML,DIV+CSS及JavaScript技术进行开发设计。在整个系统设计中充分利用了模块化的设计思想和开发方法。本系统实用性较强、扩展灵活、操作方便、安全稳定。关键字： HTML DIV+CSS JavaScript B/S WEB 校园二手市场Abstract With the rapid development of internet technology, campus information integration quickens its steps. More and more students begin to use internet. Campus LAN which is safety and convenient benefits the transaction between students. Many second-hand materials have not lost its service value completely because of the stage of education. Every year students who are going to graduate offer a large amount of materials for secondary market on campus.To make the transactions more fully, the process more frequently and convenient, I attempt to develop the campus second-hand market information release system for the front part , which means to supply a good platform for students transaction and arose the awareness of diligent and thrifty, which can create a better university. This platform puts B/S system into use, which gets help from HTML、DIV+CSSS and JavaScript.The whole system makes the most use of the idea of modulization, which makes this system pragmatically, flexibly and conveniently.Keywords: HTML DIV+CSS JavaScript B/S WEB campus second-hand market目 录1 绪论11.1 前言11.2 课题研究的背景及意义11.3 国内外研究现状11.4 论文主要研究内容22 系统关键技术研究32.1 HTML相关简介32.2 JavaScript相关简介32.3 DIV+CSS相关简介42.4 PHP相关简介52.5 MySQL相关简介63 系统分析73.1 需求分析73.2 可行性分析73.2.1 技术可行性73.2.2 经济可行性73.2.3 社会可行性73.2.4 操作可行性74 系统设计84.1 系统前台功能设计84.2 前台整体风格设计84.3 前台板块设计84.4 首页设计94.5 交易类页面设计104.5.1 出售类页面114.5.2 收购类页面114.6.浏览类页面设计114.7 数据库设计124.8 安全性设计135 系统实现145.1 环境配置145.2 目录结构155.3 首页实现165.3.1 页头部分165.3.2 内容部分165.3.3 页脚部分175.3.4 总体效果185.4 论坛风格页面195.5 交易类页面195.5.1 交易信息发布页面205.5.2 交易信息列表页面215.5.3 交易信息浏览页面215.6 浏览类页面23总 结24致 谢25参考文献261 绪论1.1 前言随着计算机技术的飞速发展和高等教育体制改革的不断深入，计算机技术已经进入网络时代。使用计算机进行信息控制，不仅提高了工作效率，而且大大提高了安全性。Internet在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作、学习和生活服务。由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页面能实现网上交易平台、客户信息反馈等方面方便了商家与客户之间信息交流。1.2 课题研究的背景及意义人类社会经历了从野蛮到文明、从原始社会到社会主义社会、从使用简单石头工具到现在使用智能化工具的过程，生活水平不断提高，逐渐有了从物物交换到以货币为等价物的交换，经历了一个由低级到高级的过程。随着社会的发展，技术的不断发展以及产品的不断更新换代使得人们对物质的要求越来越高，随之而来的问题便是越来越多的二手货物堆积了下来却无法得到更好的利用。特别是在大学校园里面，作为走在世界发展最前端的大学生，首先，他们没有时间也没有精力去经营一个二手货物商店，而且他们也没有足够的二手货来支撑这个商店，一般大学校园里大学生们的二手货都只是零散的，并不能得到很好的二次利用。其次，一个主要的原因就是大学生们并没有稳定的资金来源，所以要如何处理自己身边的二手货物，并且如何能够得到一样自己想要的二手货物而又不需要花太多的钱，成为当今大学生们需要解决的一个难题。Internet经过20多年的发展，已经成为世界上覆盖最广、规模最大、信息资源最丰富的计算机网络，它延伸到了世界的每一个角落，兼容所有的传输媒介，支持成千上万不同的应用。Internet极大地推动了世界经济向知识经济的转变，近两年间，随着国际互联网以惊人的速度席卷全球之际，我国多媒体网络覆盖面也在不断扩大。然而，对于在校学生，一般而言，现在都还没有自食其力，大都需要父母的财力支持。尤其是大学生的花费更多，平时吃好、喝好、用好奉行“三好主义”，而殊不知父母的沉重负担。在更多的时候，他们有很多东西都没用处，一直闲着，或扔掉或舍不得存着。对这种情况，他们一般选择前者扔掉。这时，如果大家能把不用的物品拿出来交换，就会得到共赢。因此，大学校园里学生们的二手货能够得到更好的利用所欠缺的正是这么一个交易平台。利用Internet这个媒介建立一个功能强大的、界面美观的大学校园二手物品交易平台，为学生们的二手货物能更好的得到二次利用而搭建一个良好的交易平台。本课题在老师的指导下面向大学生校园二手市场的二手物品交易平台，它的出发点必须是实用，操作简单，界面友好，让大学校园内有买卖需求的人群共享同一个信息渠道,实现买卖的双方线上、线下互动。另外也是为了锻炼自己，加强对HTML、JS 、DIV+CSS、 PHP 、MYSQL语言技术能力，了解其内部的运行原理。1.3 国内外研究现状目前各国政府已充分认识到电子商务对经济增长的巨大推动作用，从而大力促进电子商务在国民经济各个领域的应用。 在电子商务的技术、市场和社会法律等方面，美国均处于领先地位，有著名的购物网站 A、eBay 等。 欧洲虽起步落后于美国，但其发展势头却非常迅猛。 国外电子商务系统发展已相对完善，仍存在一定的问题，大多数系统忽略了二手交易市场这个独特的环境，针对性不强。 由于二手交易应用的商务模式还在探索中，因此在现阶段，二手交易的电子商务真正成熟发展的还不太多。我国的电子商务起步晚，发展速度快。 经过 19992002 年的萌芽，20032006 年的高速增长阶段，现在已经进入了纵深发展阶段。 在我国，目前的网络交易平台包括二手交易在内有很多，门户网站以易趣、阿里巴巴、淘宝网等为主，而电脑配件等就以太平洋二手栏目为主，此外，还有当当、卓越、全球采购等著名的购物网站。 目前国内的网上交易市场还存在缺乏诚信、安全、物流不畅、法律政策环境有待改善的问题。 比如所有的网上交易都无法做到实名制，具有安全隐患；复杂一点的如二手设备交易，因为网上交易和习惯的传统交易方法不同，也会遇到一些困难。 发展二手交易电子商务网站，就要通过打造一个安全的交易环境，创新经营策略来吸引网民，走大众化的路线。另外，在目前我国大部分高校在大学生创业和社团活动中，二手物品交易市场仍通过提供固定的交易市场进行交易，需要通过跳蚤市场或是贴广告作为交易的中介，时间和地点的不稳定性提高了交易的困难度，想要成功进行交易变的非常困难。信息流动滞后，对于买方想要获得二手交易市场的商品信息必须跑去跳蚤市场或是寻找公告板上张贴的广告；而对于卖方想要使自己想卖的物品信息传播出去要么破费去张贴广告，要么就是节假日去跳蚤市场摆摊。信息传播具有较大的滞后性。因此大学生校园二手市场交易平台是十分必要的。就目前校园二手市场交易平台的研究现状来看，国内大部分高校学生在该方面研究还没有形成系统，而相关的研究又是分散的、理论性的研究较多，而系统的、应用性的研究较少。因此提供校园二手市场交易平台是十分重要的。1.4 论文主要研究内容本文主要实现校园二手信息发布系统的前台部分。主要包括：前台总体样式、交易类主题页面、浏览类主题页面、信息列表等页面的设计，以及用户注册、交易信息发布、用户管理等功能的实现。2 系统关键技术研究2.1 HTML相关简介超级文本标记语言（英文缩写：HTML）是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。其主要特点如下：1）简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。2）可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。3）平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上。2.2 JavaScript相关简介JavaScript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。JavaScript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用JavaScript可以开发交互式Web网页。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。运行用JavaScript编写的程序需要能支持JavaScript语言的浏览器。Netscape公司 Navigator 3.0以上版本的浏览器都能支持 JavaScript程序，微软公司 Internet Explorer 3.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服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。6）跨平台性。JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。综上所述，JavaScript是一种新的描述语言，它可以被嵌入到HTML的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(Server)处理，再传回来的过程，而直接可以被客户端 (Client) 的应用程式所处理。2.3 DIV+CSS相关简介DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，DIV+CSS 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。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.4 PHP相关简介PHP，是英文超级文本预处理语言（PHP：Hypertext Preprocessor）的缩写，是一种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.5 MySQL相关简介MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQL AB公司。在2008年1月16日被Sun公司收购。目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小，速度快，总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。SQL全称是“结构化查询语言（Structured Query Language）”,最早是由IBM的圣约瑟研究实验室为其关系型数据库管理系统SYSTEM R开发的一种查询语言，它的前身是SQUARE语言。SQL语言结构简洁，功能强大，简单易学，所以自从IBM公司1981年推出以来，就得到了广泛的应用。如今无论是像Oracle、Sybase、Informix、SQL Server这些大型数据库管理系统，还是Visual Foxpro，PowerBuilder这些微机上常用的数据库开发系统，都支持SQL语言作为查询语言。SQL已经成为关系型数据库普遍使用的标准，使用这种标准数据库语言对程序设计和数据库维护都带来了极大的方便。SQL语言的常用操作有：建立数据库数据表（CREATE TABLE）；从数据库中筛选一个记录集（SELECT），这是最常用的一个语句，功能强大，能有效地对数据库中一个或多个数据表中的数据进行访问，并兼有排序、分组等功能；在数据表中添加一个记录（INSERT）；删除符合条件的记录（DELETE）；更改符合条件的记录（UPDATE）。MySQL具有以下特点：1）使用C和C+编写，并使用了多种编译器进行测试，保证源代码的可移植性。2）支持AIX、FreeBSD、HP-UX、Linux、Mac OS、Novell Netware、OpenBSD、OS/2 Wrap、Solaris、Windows等多种操作系统。3）为多种编程语言提供了API。这些编程语言包括C、C+、Eiffel、Java、Perl、PHP、Python、Ruby和Tcl等。4）支持多线程，充分利用CPU资源。5）优化的SQL查询算法，有效地提高查询速度。6）既能够作为一个单独的应用程序应用在客户端服务器网络环境中，也能够作为一个库而嵌入到其他的软件中提供多语言支持，常见的编码如中文的GB 2312、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）添加验证代码，防止越权操作现在有很多网络黑客可以从网上直接调用密码验证后的文件，从而绕过口令验证和安全检查，而本系统为解决这个问题，在每一个文件里都加入了一个安全参数的认证，如果有一个页面被用户直接调用而没有经过身份验证，该页面会自动重定向到登入页面，还有对于已经通过系统身份验证的不同类型的用户，用SESSIONlogin、SESSIONid等变量参数进行跟踪来加强系统安全性。这样，任何人都不能超越权限访问管理员相应的管理页面或根本不为其提供相应页面的链接。以管理员入口为例，其验证代码如下：3)