鹿木乡中学网站设计与开发毕业论文1

1、一 浙江工贸职业技术学院信息传媒学院 毕 业 设 计 （论 文）课题名称： 鹿木乡中学网站设计与开发 鹿木乡中学网站设计与开发摘 要：学校网站是学生了解其信息的重要来源，网络的快捷，无距离随时随地的特性对于教学网站的建设很重要。在互联网络高速发展的今天，网站正成为学校、公司、企业、政府及团体进行形象展示、信息发布、业务拓展、客户服务、内部沟通的重要阵地，它不但具有快捷、无距离及随时随地均可更新的特性，更能提供一些互动性的功能，如留言板、会员制、讨论区等等，使得网站充满生气，让人倍感亲切。学校网站建设是学校教育信息化建设的重要方面，是适应现代教育技术和信息技术的发展，加大学校对外交流与宣传力度，

2、提高教学、科研、管理效率的重要途径；学校网站是学校对外宣传的窗口，也是展示全校师生才能，加强对校外联系，互相学习，共同发展的阵地，学校网站建设的目的是促进师生与学校共同发展，因此，需要全校师生共同参与，同心合力把学校网站建设好.网站开发采用了div+css开发技术，有网站首页、登录页、出售消息、求购消息、用户中心、后台管理等页面，界面设计以蓝色为主，极强的表现了网络化生活。网站版块多以书的形状作为基础设计，紧贴网站主题。布局清爽大方，符合交互要求。网站结合Sql server数据库的使用完成了注册登录、搜索、个人书架、留言板、后台管理等功能。关键词：div+css 二手书网站 SQL数据库 目

3、 录1 引言11.1 温州市高校二手书交易站的开发背景11.2 温州市高校二手书交易站的意义与设计目的12 开发工具及环境介绍22.1 温州市高校二手书交易网的开发环境22.2 本项目应用的主要开发工具22.2.1 Microsoft SQL Server 200822.2.2 Adobe Photoshop CS432.2.3 Dreamweaver 832.2.4 Microsoft Visual Studio 201042.2.5 动软42.2.6 IE Tester42.3 本项目应用的主要开发技术52.3.1 C# 语言52.3.2 DIV+CSS53 项目概述63.1 项目概述63

4、.2 项目风险63.3 项目进度计划74 项目需求分析84.1 业务分析84.1.1 业务组织结构84.1.2 业务工作角色分析84.2 概要设计104.2.1 网站结构图104.2.2 网站概要设计说明114.3 现行研究存在的问题及解决办法135 数据库设计145.1 数据库结构145.2 数据库表145.3 数据库表关系图165.4 数据库设计命名规范166 网站实现176.1 网站后台界面设计与布局176.1.1 后台登入界面176.1.2 信息管理界面186.2 网站前台界面设计与布局196.2.1 首页196.2.2 前台登录界面226.2.3 内容页256.3 说明316.3.1

5、 项目文件命名规范316.3.2 项目文件结构说明316.4 动软生成解决方案326.5 Web.Config 文件配置327 测试337.1 测试337.2 测试例子及其结果347.2.1 页面效果测试347.2.2 后台添加测试348 总结与展望36致谢37参考文献38请认真看目录说明：浙江工贸职业技术学院毕业论文1 引言1.1 温州市高校二手书交易站的开发背景目前中国进入经济高速发展阶段，人口远远超出土地承载力、资源极度缺乏、环境容量极度狭小，循环使用教科书或各种书籍是利国、利民、利社会的善事。而随着市场经济的发展和人们生活水平的提高，二手书的市场是一个环保和低成本看书的选择。在学校里，

6、二手书商店就带给同学们一个供需平台。但是，对于二手书籍的管理和销售，普通的旧书市场不能有效的进行。而且不是每个学校都有提供学生们这样一个二手书循环利用的平台。而随着Internet的普及，网上购买商品或获取信息已成为现代人的一种生活习惯。而上网更是大学生活不可或缺的一部分，所以一个独立的能够满足用户需求的校园二手图书交易网站的设计与开发是十分有必要也是可行的。我所做的高校二手书交易网站平台，可以让我们温州市内所有的高校生更加容易的便捷的参与到书籍循环利用，让更多的书发挥更高的价值，也保护了我们所赖以生存的环境。1.2 温州市高校二手书交易站的意义与设计目的近几年来，我们对“役期满”的成捆教材送

7、往废品站的现象已经见惯不怪，对装帧越来越豪华，印刷越来越精美的教材已几近麻木；在大学生就读期间，一年中也有很多精装的教材是一个学期都没有碰过几次的，有些甚至于没有开封过。隐匿其后的巨大资源浪费和节俭美德的剥蚀却很少有人认真思考过。如果我们将大家不用的教科书和课外书给需要的人，我们每年将节约多少造纸用的木材，将少砍伐多少亩森林、将节约多少林地、又将减少多少造纸和印刷（包括油墨生产）过程中的污染！真是不算不知道，一算吓一跳，一本看似不起眼的教材，都与国计民生紧紧相连。教材循环使用远不止于经济意义，高年级同学将自己用过的教材传给新生，蕴藉了“薪火相传”的人文精神，不仅是学业的延续，更是一种风范的树立

8、；而新生们从学兄学姐手里接过的，不仅仅是他们的成长历程和做学问的记录，更重要的是“润物细无声”的节约意识，这对于正在成长中的青少年们尤为珍贵。所以建立一个高校间二手书买卖或无偿捐送的管理网站刻不容缓。2 开发工具及环境介绍2.1 温州市高校二手书交易网的开发环境，如表2.1表2.1 开发环境约束名称约束要求cpu最低要求：600 兆赫 (MHz) Pentium 处理器或同类AMD处理器推荐：建议采用 1 千兆赫 (GHz) Pentium 处理器或同类AMD处理器内存512MB以上硬盘80G以上开发环境Microsoft SQL SERVER 2008 (数据库)Microsoft Visu

9、al Studio 2008（项目开发工具）Microsoft Office Word 2003操作系统Windows XP 、Windows 2000等Windows系列辅助工具Rational Rose Enterprise Edition(建模工具) Microsoft Office Visio 2003 (画图工具)动软.Net代码生成器Adobe Photoshop CS4Adobe Flash CS5各主流浏览器（IE浏览器、火狐、Opera、Google Chrome、Safari） 2.2 本项目应用的主要开发工具2.2.1 Microsoft SQL Server 2008S

10、QL Server 是一个关系数据库管理系统。它最初是由Microsoft、Sybase 和Ashton-Tate三家公司共同开发的，于1988 年推出了第一个OS/2版本。在Windows NT 推出后，Microsoft与Sybase 在SQL Server 的开发上就分道扬镳了，Microsoft 将SQL Server移植到Windows NT系统上，专注于开发推广SQL Server 的Windows NT 版本。Sybase 则较专注于SQL Server在UN操作系统上的应用。SQL Server 2000 是Microsoft 公司推出的SQL Server数据库管理系统，该版

11、本继承了SQL Server 7.0 版本的优点，同时又比它增加了许多更先进的功能。具有使用方便可伸缩性好与相关软件集成程度高等优点，可跨越从运行Microsoft Windows 98 的膝上型电脑到运行Microsoft Windows 2000 的大型多处理器的服务器等多种平台使用。这个平台有以下特点：1） 可信任的使得公司可以以很高的安全性、可靠性和可扩展性来运行他们最关键任务的应用程序。2） 高效的使得公司可以降低开发和管理他们的数据基础设施的时间和成本。3） 智能的提供了一个全面的平台，可以在你的用户需要的时候给他发送观察和信息。2.2.2 Adobe Photoshop CS4P

12、hotoshop是Adobe公司旗下最为出名的图像处理软件之一。多数人的对于Photoshop的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面，实际上Photoshop的应用领域很广泛，在图像、图形、文字、视频、出版各方面都有涉及。Adobe Photoshop CS4软件通过更直观的用户体验、更大的编辑自由度来大幅提高的工作效率，使您能更轻松地使用其无与伦比的强大功能。 使用全新、顺畅的缩放和遥摄可以定位到图像的任何区域。借助全新的像素网格保持实现缩放到个别像素时的清晰度， 并以最高的放大率实现轻松编辑。通过创新的旋转视图工具随意转动画布， 按任意角度实现无扭曲查看。 Ado

13、be Photoshop CS4软件除了包含Adobe Photoshop CS3的所有功能外，还增加了一些特殊的功能，如支持3D和视频流、动画、深度图像分析等。 此外，Photoshop CS4将支持GPU加速。有了 GPU 加速支持，用 Photoshop 打开一个 2GB、4.42 亿像素的图像文件将非常简单，就像在 Intel Skulltrail 八核心系统上打开一个 500 万像素文件一样迅速，而对图片进行缩放、旋转也不会存在任何延迟；另外还有一个 3D 加速 Photoshop 全景图演示，这项当今最耗时的工作再也不会让人头疼了。 Photoshop CS4 的另一个让人印象深刻

14、的新功能是不但可以导入3D模型，还能在其表面添加文字和图画，并且就像直接渲染在模型表面一样自然。2.2.3 Dreamweaver 8Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身。具有可视化、支持多平台和跨浏览器的特性是目前网站设计、开发、制作的首选工具。它有以下几点优点：1、灵活的编写方式2、可视化编辑界面3、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证5、强大的WEB站点管理功能6、内建的图形编辑引擎7

15、、Dreamweaver的集成特性8、丰富的媒体支持能力9、超强的扩展能力2.2.4 Microsoft Visual Studio 2010Visual Studio是微软公司推出的开发环境。是目前最流行的Windows平台应用程序开发环境。Visual Studio 2010版本于2010年4月12日上市，其集成开发环境（IDE）的界面被重新设计和组织，变得更加简单明了。Visual Studio 2010同时带来了NET Framework4.0、Microsoft Visual Studio 2010 CTP( Community Technology Preview-CTP)，并且支

16、持开发面向Windows 7的应用程序。除了Microsoft SQL Server，它还支持IBMDB2和Oracle数据库 。2.2.5 动软动软代码生成器 是一款完全自主知识产权研发的为软件项目开发设计的自动代码生成器，也是一个软件项目智能开发平台，它可以生成基于面向对象的思想和三层架构设计的代码，结合了软件开发中经典的思想和设计模式，融入了工厂模式，反射机制等等一些思想。主要实现在对应数据库中表的基类代码的自动生成，包括生成属性、添加、修改、删除、查询、存在性、Model类构造等基础代码片断,支持不同3种架构代码生成，使程序员可以节省大量机械录入的时间和重复劳动，而将精力集中于核心业务

17、逻辑的开发。 动软代码生成器 同时提供便捷的开发管理功能和多项开发工作中常用到的辅助工具功能，您可以很方便轻松地进行项目开发，让软件开发变得轻松而快乐！帮您快速开发项目，缩短开发周期，减少开发成本，大大提高了企业的研发效率，使得软件企业在同样的时间创造出更大的价值。2.2.6 IE TesterIETester是一个免费的WebBrowser控件，让您有渲染和IE8的JavaScript引擎，IE7和IE 6在Windows 7，Vista和XP的IE5.5中，在同一进程中安装的IE浏览器。可以帮我们模拟网页在IE5.5、IE6、IE7与IE8 beta1等浏览器的相容性，让我们看下辛苦作好的

18、CSS样式或网站版面是否可以在各个主要浏览器正常显示。IETester是以“分页标签”的方式，分别在不同的页签中显示你所指定的IE浏览器版本的网页浏览画面，此外类似Office 2007的软体介面呈现方式也相当新潮好用，大部分常用的按钮都直接列在上面。2.3 本项目应用的主要开发技术2.3.1 C# 语言C#综合了VB简单的可视化操作和C+的高运行效率，以其强大的操作能力、优雅的语法风格、创新的语言特性和便捷的面向组件编程的支持成为.NET开发的首选语言。并且C#成为ECMA与ISO标准规范。C#看似基于C+写成，但又融入其它语言如Pascal、Java、VB等。微软c#语言定义主要是从C和C

19、+继承而来的,而且语言中的许多元素也反映了这一点.C#在设计者从C+继承的可选选项方面比Java要广泛一些(比如说struts),它还增加了自己新的特点(比方说源代码版本定义).但它还太不成熟,不可能挤垮Java.C#还需要进化成一种开发者能够接受和采用的语言.而微软当前为它的这种新语言大造声势也是值得注意的.目前大家的反应是:这是对Java的反击. C#更像Java一些,虽然微软在这个问题上保持沉默.这也是意料中的事情,我觉得,因为Java近来很成功而使用Java的公司都报告说它们在生产效率上比C+获得了提高. Java所带来的巨大影响和大家对它的广泛接受已经由工作于这种语言和平台之上的程序

20、员数量明显的说明了。由这种语言写成的应用程序的数量是令人惊讶的并已经渗透了每一个级别的计算,包括无线计算和移动电话。C#能够在用户领域获得这样的礼遇吗?我们必须等待并观望,就像已经由SSI公司的CEO和主席Kalpathi S. Suresh指出来的那样,我发现所有这些都是渐进的.如果C#不存在,我们总能回到Java或C和C+。它们在更大的意义上来说只是大公司制造的市场噱头.我们必须给他们时间安顿下来看看这些是不是真的对IT工业有什么影响。2.3.2 DIV+CSSDIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，DIV+CSS 是一种网页的布局方法，这一种网页布局方法有别于传统的

21、HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。3 项目概述3.1 项目概述设计一个基于Web的高校二手书交易网站。主要有网站首页、列表页、会员注册、登录页等，其设计的目的是为了买卖二手书或者

22、捐送二手书的高校生有一个直接的交流平台。基于Web的高校二手书管理系统分为二手书管理和会员管理两种形式。一、 二手书管理:1) 信息发布管理：会员可以免费发布买卖书籍的消息，消息包括发布时间、交易的书名、类型、新旧程度和发布消息人的联系方式等信息。可供有意向买卖书籍的人了解信息。2) 二手书分类管理：站内所有二手书籍以教科书、工具书、课外书三大类进行分类，用户可按照他们所需书籍类型进行消息查看。3) 书名检索：按书名对自己所需的书籍进行站内检索，查询到有关此书籍现有的全部信息发布，可进一步了解所需信息详情。二、 会员管理1) 会员资料管理：包括账号、密码、会员名称、联系方式。2) 信息发布记录

23、：包括会员自己发布的购书或售书信息的记录。3) 个人书架：包括会员收藏对自己所关注书籍的记录，所收藏的记录可链接到相关书籍的详细信息页面。查询到有关此书籍现有的全部信息发布，可进一步了解所需信息详情。3.2 项目风险1) 项目进度由于对于做项目的实践次数比较少、经验不够丰富以致无法应付项目开发过程中层出不穷的问题，而且对于项目时间的安排和分析不够准确，因此对项目能否按时交付造成了很大的影响。2) 项目需求不明确项目的开发前期业务需求不明确，参考资料极少，需求分析做的不够刀舞，对于网站的该实现什么效果也在不断的改变，再加上前期需求安排的时间太少。开发过程主要参考其它作品的形式，没有一个明确的目标

24、。3) 技术水平不够技术水平问题大概是每个从事开发人员都会碰到的问题。在该项目中也碰到了各种各样的技术上的问题，尤其是在做网站后台的时候，学到的知识根本不够用，也因为这些各种各种各样的新技术的出现，也使项目的进度受到影响。3.3 项目进度计划温州市高校二手书交易网的设计包括制定计划、需求分析、总体设计、详细设计、实现编码几个阶段，其项目进度安排如图3.1所示：图 3.1 项目进度图（甘特图）第 8 页 共 46 页浙江工贸职业技术学院毕业论文4 项目需求分析4.1 业务分析4.1.1 业务组织结构*4.1.2 业务工作角色分析系统共分为3个角色，分别为游客、注册用户和管理员。游客即为未在该网站

25、注册的访问用户，可以使用的网站功能有：查询图书，浏览图书信息，注册账号。1、 查询图书信息：输入想要查询图书的名称关键字，可以查找出该图书的基本信息。2、 浏览图书信息：进入网站浏览模块后，游客可以看到大量的图书信息，当游客找到想要查询的图书后，可以点击查看更加详细的图书信息。3、 注册账号：通过填写基本资料，成为网站的注册用户，获取更多的功能。游客 查询图书信息注册账号浏览图书信息注册用户即为已经在该网站注册过的用户，可以使用的网站功能有：查询图书，浏览图书信息。查看用户信息，发布图书，留言板。1、 查询图书信息：输入想要查询图书的名称关键字，可以查找出该图书的基本信息。2、 浏览图书信息：

26、进入网站浏览模块后，游客可以看到大量的图书信息，当游客找到想要查询的图书后，可以点击查看更加详细的图书信息。3、 查看用户信息：可以进入个人中心，查看自己的书架，确认要购买的图书。4、 发布图书：可以通过填写图书名，规定价格，上传图书照片，对图书进行简介来发布卖出的图书，发布过的图书别的用户可以浏览并且查询到。5、 留言板：填写留言，以对网站或者网站内容进行评价。发布图书查询图书信息注册用户查看个人书架留言板浏览图书信息管理员拥有特定账户密码的网站管理人员，可以对网站的信息进行审核，删除等。1、审核删除信息：可以查看网站注册用户发布的各类信息，对不恰当的信息进行删除。管理员删除违规账号删除违规

27、留言删除违规图书4.2 概要设计4.2.1 网站结构图结构图包括系统的所有功能，如图4.1所示：图 4.1 网站结构图网站页面结构图如图4.2所示图 4.2 网站页面结构图4.2.2 网站概要设计说明本系统一共分为两大部分（前台、后台），它们之间虽然在表面上是相互独立的，但是在对数据库的访问上是紧密相连的，各个模块访问的是同一个数据库，只是所访问的表不同而已。1) 后台登录如图4.2所示图 4.2 后台登陆活动图2) 后台删除信息如图4.3所示图 4.3 后台删除信息活动图3) 后台修改信息如图4.4所示图 4.4 后台修改活动图4) 发布消息如图4.5所示图 4.5 后台修改活动图5) 信息

28、搜索如图4.6所示图 4.6 信息搜索活动图4.3 现行研究存在的问题及解决办法温州市高校二手书交易网站主要以前台界面为主，后台功能很少，还不够完善。目前我发现的主要需解决的问题有：1) 页面有部分控件样式不会定义。2) 网页不是对所有浏览器都兼容的。3) 在网页中使用网页特效（JQuery特效、Flash+Xml）4) 系统的界面还需改成适合1024*768分辨率。解决方法：根据每个需求先理好业务逻辑，然后运用编码实现相应的功能和百度找相应的功能进行修改、研究。5 数据库设计5.1 数据库结构数据只有用数据库来管理才能有自动化管理的可能。数据的结构将影响整个管理机制的应用，而且建立以后要修改

29、常会出现麻烦。所以一开始就要仔细慎重地搭建一个完整而合理的结构。Microsoft SQL Server数据库相对其它的数据库来说要简单容易操作些。数据库如5.1表所示。表 5.1 数据库结构表编号表名称数据库表名说明1用户信息表tbUserInfor用于存储用户帐号、密码等信息2二手书信息tbBooksInfor用于存储二手书的详细信息3个人书架表tbPersonalBookshelf用于存储用户收藏的二手书信息4网站公告tbSiteNotice用于存储网站公告的详细信息5留言信息表tbMessage用于存储用户留言的内容5.2 数据库表用户信息表如5.2表所示表5.2用户信息表字段名数据类

30、型宽度说明UserIDint主键，用户编号UserNamenvarchar50用户名Passwordnvarchar50密码Gendernvarchar50性别E-mailnvarchar50电子邮件CreadTimedatetime创建时间二手书信息表如5.3表所示表5.3用户信息表字段名数据类型宽度说明BooksIDint主键，书籍编号UserIDint外键，用户编号Statenvarchar50状态(求购|出售)BooksTitlenvarchar50书籍名称BooksImagenvarchar50书籍图片BooksTypenvarchar50书籍类型Authornvarchar50作者

31、BookConcernnvarchar50出版社PublishDatenvarchar50出版日期Conditionnvarchar50新旧程度CostPricenvarchar50原价Pricenvarchar50价格Amountnvarchar50数量Areanvarchar50所在地区Telephonenvarchar50联系电话ContentBriefnvarcharMax内容简介CreateTimedatetime创建时间个人书架表如5.4表所示表5.4用户信息表字段名数据类型宽度说明RecordIDint主键，记录编号UserIDInt外键，用户编号BooksIDInt书籍编号Bo

32、oksTitlenvarchar50书名CreateTimedatetime创建时间网站公告如5.5表所示表5.5用户信息表字段名数据类型宽度说明NoticeIDint主键，公告编号Titlenvarchar50标题NContentnvarcharMax内容CreadTimedatetime创建时间留言信息表如5.6表所示表5.6用户信息表字段名数据类型宽度说明MessageIDint主键，留言编号BooksIDint外键，书籍编号UserIDint用户编号UserNamenvarchar50用户名MContentnvarcharMax留言内容CreadTimedatetime创建时间5.3

33、数据库表关系图数据库的关系如图5.1所示图 5.1 信息搜索活动图5.4 数据库设计命名规范数据库的设计的命名规则如表5.7所示：表 5.7 数据库命名规范规范名称规范形式数据库涉及字符规范采用26个英文字母（区分大小写）和09这十个自然数，加上下划线_组成，共63个字符。不能出现其他字符（注释除外）。表名称描述名称单词以大写的主题开头表字段名称用英文单词描述字段存储过程名称以表明加“_”加具体操作名数据库设计文档规范所有数据库设计要写成文档，文档以模块化形式表达。SQL语句规范所有SQL关键词基本上都是大写的，比如“SELECT”等第 42 页 共 46 页6 网站实现6.1 网站后台界面设

34、计与布局6.1.1 后台登入界面1) 后台登入界面设计说明：后台登入界面我主要是根据网站的主题和网站前台风格设计的，前台界面主要是以蓝色系列的色调为主，所以后台登录背景为蓝色，网站为二手书交易网所以以一本书为背景框。在网页制作中，先进行页面设计，效果满意后，再进行图片的切片，最后进行页面的布局，布局好后查看页面效果。2) 后台登入界面，如图6.1所示：图 6.1 后台界面3) 后台界面部分DIV+CSS布局 用户名：密码：6.1.2 信息管理界面1) 信息管理界面，使用了与后台登陆相同的背景图，小背景用了半透明的形似两张记事本的灰色模块，使整个页面更加具有科技感，也更紧贴了网站的主题2) 信息

35、管理界面如图6.2所示：图 6.2 发布新闻界面6.2 网站前台界面设计与布局6.2.1 首页1) 温州市高校二手书交易网首页界面设想温州市高校二手书交易网首页主要采用蓝色系，在这里我大胆了运用了多种与蓝色相近的颜色对应页面进行设计，用了类似被翻阅书的页脚做了一个以蓝色为主的logo,头部还放置了一个大号搜索框，以便用户能够快速搜索自己想要的书籍。头部做了jquery图片切换展示，可时时更新本图片，向用户提供了本网站最新最热门的掌柜推荐书籍。网站左侧做了图书分类，精心划分了网站所有的书籍类型，以便用户更加快速的找到自己想要的书籍。网站右侧展示了部分图书类型图片，有了书籍的图片让用户更加确定自己

36、想要买的书，也增加了网站的美观度。在设计期中对于网站首页的构思有多种设想，经过多次的效果图对比，才做到现在大家看到的效果。2) 首页界面设计如图6.3所示：图 6.3 首页3) 首页部分DIV+CSS布局样式bodymargin:0 auto;ul,li,p margin:0; padding:0;li list-style-type:none;.hybackground:#41a0fe;height:29px;width:100%;border-bottom:1px solid #218ffd;line-height:29px;text-align:inherit;.font14font:n

37、ormal 宋体 14px;font-size:14px;.font12font:normal 宋体;font-size:12px;.dkwidth:960px;margin:0 auto;.logowidth:405px;height:96px; .sousumargin-top:22px;width:507px;height:59px;float:left;background:url(./Images/sousu_03.gif) no-repeat;6.2.2 前台登录界面1) 用户注册界面、用户登录界面、忘记密码界面，三个界面大致相同，大背景以灰色渐变为主，中间有蓝色较立体图案，增加了

38、界面的立体效果让整个界面更具信息时代效果。2) 界面效果如图6.4、6.5、6.6所示图 6.4 用户注册和登录界面3) 部分DIV+CSS布局样式.bgssbackground-image:url(./Images/ssbg.jpg);.logobackground:url(./Images/LOG-2.png ) no-repeat;height:77px;width:1100px;margin:65px auto 0px auto;.reg_tit width:980px;height:36px;padding: 0px;margin-top:0px;overflow:hidden;.r

39、eg_tit_ul1 width:460px;height:36px;padding: 0 0 0 30px;margin: 0;overflow:hidden;float:left;font-size:14px;font-weight: bold;text-align:center;.reg_tit_ul1 li display: inline;.reg_tit_ul1 li a float: left; color: #575757; padding: 13px 0 0 0; margin-right: 3px; height:23px; width:144px; text-decorat

40、ion: none; background: no-repeat left bottom;.reg_tit_ul1 li a:hover, .reg_tit_ul1 li .current color: #000; background: url(./Images/reg.png) no-repeat left bottom;6.2.3 内容页温州市高校二手书交易网内容与首页风格、色彩的使用大致一样。1) 出售消息界面大致与首页相同，右侧则变成了卖家要出售的书籍的消息列表，采用了图文并茂的方式，让用户们更加明了的了解要出售书籍的资料，出售消息界面效果如图6.7所示：图 6.7出售消息2) 求购

41、消息界面以类似新闻列表的方式展示给用户看，界面效果如图6.8所示：图6.8求购消息3) 用户中心页面头部大致与首页相似，内容部分使用了两个不同大小的框，形似一本贴了小纸条的笔记本，与网站主题紧紧相扣，界面效果如图6.9所示：图6.9用户中心4) 网站公告和网站公告列表使用了两个不同大小的灰色半透明框，让整个网页变得有层次感。网页效果如图6.10所示图6.10网站公告5) 发布消息包括消息类别选择、填写详情页面，风格大致与其他页面相同，类别选择页面笑脸，可以使用户心情变好，也增加了网页的活跃性，不至于看上去那么死板。页面效果大致页如图6.11、6.12所示图6.11消息类别选择图6.12填写详情

42、6) 搜索结果列表页和书籍详情页大致与出售消息页面一致，书籍详情页增加了书籍内容介绍和留言板模块，让有意愿的用户可以与卖家有一个方便沟通的平台，界面效果如图6.13和6.14所示图6.13搜索结果列表页图6.14详情页6.3 说明6.3.1 项目文件命名规范项目中的文件全部采用英文单词取名，遵从见名知意原则编写。6.3.2 项目文件结构说明温州市高校二手书交易网开发ASP.NET程序时，首先要创建很多Web页(主要分为前台展示界面和后台管理界面)、用户控件以及类，来完成基本的功能操作。不过，在编写代码之前，可以先把网站中可能用到的文件夹创建出来，这样可以方便以后的开发工作，也可以规范网站的整体

43、架构。因此在开发该网站之前，首先设计了文件夹架构图，在开发时只需将相应文件保存到对应文件夹下即可。项目文件结构说明如图6.15所示：图 6.15 项目文件结构说明图6.4 动软生成解决方案使用动软.Net代码生成器连接数据库，选择数据库SecondhandBook，然后生成简单的三层架构解决方案。动软.Net代码生成器生成的代码基于面向对象的思想和三层架构设计，结合了Petshop中经典的思想和设计模式，融入了工厂模式，反射机制等等一些思想。主要实现在对应数据库中表的基类代码的自动生成，包括生成属性、添加、修改、删除、查询、存在性、Model 类构造等基础代码片断。支持不同3种架构代码生成，使

44、程序员可以节省大量机械录入的时间和重复劳动，而将精力集中于核心业务逻辑的开发。6.5 Web.Config 文件配置 7 测试7.1 测试随着网络技术不断成熟，网站功能日益增加，越来越多的业务系统演化为基于 Weh的应用，测试是为这些服务降低风险的主要手段。对网站的测试应从用户界面、功能和兼容性几方面综合考虑。网站测试采用灰盒测试方法。灰盒测试结合了白盒测试和黑盒测试的要素，既关注软件的外部属性和行为，又在原代码级了解软件内部数据结构、实际的逻辑流程和体系结构的基础上测试软件，是从开发者的角度看待测试，综合考虑用户端、特定的系统知识和操作环境。Web应用由大量的组件（包括软件和硬件）组成，这些

45、组件必须在设计系统的环境中测试，以便评价它们的功能和兼容性。而灰盒测试在系统组件的协同性环境中评价软件的设计，对基于Web的应用来说是最为有效完整的测试。灰盒测试涉及到高层设计、环境和互操作性条件等，能发现容易被黑盒和白盒测试忽略的问题，特别是端对端的信息流问题、分布式硬/软件配置问题以及兼容性问题。在灰盒测试过程中通常能发现与Web系统密切相关的具体环境错误。1) 用户界面：用户交互：是否有中心工作空间，并在各页面之间保持一致。是否每个页面都有导航工具，并保持直观一致。Ul控件的命名方式是否简明一致，每个控件的默认状态是否恰当；Web应用系统的主要部分是否可通过主页访问；操作和响应方式是否与

46、 Web应 用程序及行业标准一致，响应结果是否正确，是否发生了数据一致性错误和输出错误；如果说明文字指向右侧的图片，该图是否出现在右侧；表格中的证件号码与姓名放在左边，其他细节放在右边，是否更有效；根据所提供的帮助文档进行操作，是否能够出现预期结果；是否提供正确的反馈和错误提示信息。页面元素：整个 Web 应用系统的页面结构、Ul控件、字体、链接是否风格一致。背景颜色是否与字体颜色和前景颜色搭配。文字回绕是否正确。图片是否使段落没有对齐或出现孤行。表格每一栏的宽度是否足够，是否因某一单元格内容太多，而将整行拉长。2) 功能测试：链接：所有链接是否按指示的那样确实链接到了该链接的页面，所链接的页

47、面是否存在。应保证Web应用系统上没有孤立的页面（即没有链接指向该页面，只有知道正确的URL地址才能访问）。链接测试必须在集成测试阶段完成，也就是说，在整个Web应用系统的所有页面开发完成之后进行链接测试3) 客户端兼容性：操作系统：是否能在 MAC 和 IBM 兼容机上浏览网站。是否使用了只在某个系统上可用的字体或插件。浏览器：是否能用Internet Explor7、Internet Explor8、火狐、Opera、Google Chrome、Safari浏览网站。不同厂商的浏览器对 Java Applet、DHTML、ActiveX、HTML、插件、安全协议及HTTP的支持不同。用户也

48、会对浏览器进行不同的设置，如禁用图片或采用较高的安全级别。框架和层在不同的浏览器中显示效果不同，甚至根本不显示。IE3.0及以上版本才能使用SSL安全特性，但是对于老版本的用户应该有相关的消息提示。测试浏览器兼容性的一个方法是创建一个兼容性矩阵，在这个矩阵中测试不同厂商、不同版本的浏览器对某些插件和设置的适应性。屏幕设置：当改变屏幕分辨率（800x600、1024x768、1280xl024）、字体大小、和显示器颜色深度（16色、24 位真彩色、32位真彩色）时，页面是否正常显示。7.2 测试例子及其结果7.2.1 页面效果测试测试流程：1) 打开需要测试的页面2) 在自己做的网站浏览效果时，

49、将该地址复制到各个主流浏览器中3) 查看页面的效果是否与自己设计的效果图或预想的一样4) 逐个点击页面上的按钮和连接，查看页面是否与预想的一样测试方法：在各个主流浏览器中查看页面效果测试结果：页面效果是否正常处理方法：进行修改后再进行回归测试。7.2.2 后台添加测试测试流程：1) 选择管理员帐号进入主界面。2) 选择添加二手书。3) 输入错误的数据查看能否进行添加。4) 输入正确的数据能否进行添加。测试方法：根据测试用例要求编写相关测试用例进行测试。测试结果：数据能否正常添加。处理方法：进行修改后再进行回归测试测试经过如图7.1、7.2所示图 7.1输入二手书信息图 7.2二手书信息添加成功浙江工贸职业学院毕业论文8 总结与展望经过1个多月来的努力，本人综合运用以前所学的网站开发及数据库方面的基础知识，终于完成了校园二手书交易系统的基本功能。