基于ASP的TDK电子有限公司的网站设计与实现 毕业论文.doc

1 引言随着经济的飞速发展，人们生活的不断提高，各式各样的企业也林林总总地建立起来，企业之多、规模之大都是前所未有的。如何让消费者从众多的企业产品中找到适合自己需要的东西，如何使求职者在这些企业中寻求到自己满意的职位成了当今社会比较热门的话题。而现在这个信息化的时代很多事物是离不开网络的，同样以上需求最方便快捷的实现方法还是要通过internet来实现的。本系统就是一个企业网站的实例，通过对青岛tdk电子有限公司的相关介绍，能够让电子产品的消费者找到自己需要的某些产品，能够让电子企业工作爱好者找到自己喜爱的某些职位。设计之初，我们可以构想有这么4个虚拟的角色：张三 男，某某电视机制造公司总经理，30岁李四 女，某某冰箱制造公司采购员，28岁王五 男，某某职业中专毕业学生，19岁赵六 女，某某大学在校生，21岁我们可以想象一下这4个虚拟角色最需要什么？通过浏览这个网站他们能不能得到收获？根据这些需求来设计往往就不会令浏览者不感兴趣。首先看张三，他生产电视机，而生产的电视不可能不依赖其他厂家制造的电子元件，那么该角色一方面会关心电视机的销售问题，而另一方面，就要考虑元件的采购问题，而tdk正是一个电子元件的制造厂家，其产品正是张三所需要的，只要详尽地介绍自己的产品，应该可以吸引他的注意，所以该网站应该具有介绍产品部分。李四的需求就更直接了，她是采购员，当然是需要元件厂家的产品介绍信息了，而且比张三的需求更加强烈。至于王五，他是技术中专毕业生，需要谋求一份工作的，应该需要了解各个企业基本信息、工作性质、工厂的生活环境等信息，这些也当然就是该系统必须的部分了。赵六则需求找一份适合自己的兼职，当然和王五的需求没有大的差别。这样把虚拟角色的需求一一简略分析之后就可以着手设计了。在设计上，一定要贯穿始终的便是这四个虚拟角色的需要，把他们的需要作为自己设计这个网站系统的主要目的，才能设计出来合乎要求且受欢迎的系统，才能达到预期的要求，才不至于控油设计，无人喜欢的作品出来，才能是一个成功的作品。本着这个进行设计才可以吸引更多用户的浏览禣1。2 系统需求分析2.1可行性分析2.1.1 技术可行性由于该系统应用asp技术，只需要在电脑上安装有iis即可，数据可以引用的是access2003，所以对电脑配置要求较低。网页的设计过程可以用frontpage、visure studio等软件或直接用文本编辑器即可进行，只要将编好的文档存为（*.htm）形式或者（*.asp）形式即可。至于脚本的调试过程可以用vs2005的脚本调试器进行或者直接用浏览器自身的调试功能即可。至于其他有关asp的开发软件的应用都是比较方便的，是不难使用的。从技术上来讲，本系统的设计是可行的。2.1.2 经济可行性由于我们计算机专业都配备个人电脑，学校机房为我们免费开放，图书馆里也有丰富的参考资料，网络世界里也有很多相关资源，各种有关asp网页设计的资料琳琅满目，应有尽有且经济实惠，唾手可得，并不昂贵，所以从经济上来讲，该系统的设计也是可行的。2.1.3 操作可行性本系统引用了许多比较流行的网页元素，比如导航条、幻灯片、纵向菜单等，并且引用了像幻灯片、flash播放、悬浮框架等网页元素，这些都使得系统简单明了、易于操作，更增加了网站的可读性和容易理解性。所以，系统从操作上来讲是可行的。2.1.4 社会可行性 由于本人在这个企业有半年的实习经历，通过亲身经历对这个企业有了一个比较全面的了解，对其管理过程、产品销售、人员招收等各个方面也有一定的了解。如果有一个好的网站系统为其智能服务的话，这个企业的各方面运营应该可以上一个更高的台阶的。并且作为企业网站，作者也参阅了许多相关的资料，查看了许多的企业网站，在社会实用性上绝对是有一定的价值的。所以从社会效益上来讲，本系统是可行的。2.2 需求分析2.2.1 功能需求本系统主要来宣传企业，介绍企业产品、企业文化等相关信息，主要面向电子元件的需求者和电子行业爱好者。进入网站，主页部分应该具有真实性和一定的吸引力。通过对主页的浏览能够吸引浏览者去查看详细的工厂信息和产品详细信息。这又需要有详细的工厂信息部分和产品详细信息部分。后台还要有工厂信息的添加、删除、查询和修改功能以及产品信息的添加、删除、查询和修改功能。站在开发者的角度，本系统应该具有良好的浏览功能，对数据的插入、删除、修改，查询的功能。界面上应该友好简洁，使用上应该符合tdk管理人员的技术水平，并且在数据的安全上应该具有一定的可靠的安全性。2.2.2 性能需求查询数据的时候要能查询得到，并且查询内容不存在的时候要有相关提示；添加新数据的时候如果该数据已经存在应该有处理方案；删除的数据应该有唯一性，而不是一点删除就会把与其相关的数据全部删除；修改的数据前后没有改变应该有处理方案。而且系统应该具有稳定性，不能在一次成功运行后，再次运行便会出现乱码或者页面出现一堆代码或者错误提示，要保证系统反复的调试之下能够成功运行的几率占到90%以上。2.2.3 运行需求本系统是基于asp的企业系统，采用的是b/s方式，web页面运行。可以支持各种pc机，在windowsxp或者更高版本上运行，只要在其上配置或者安装有iis（internet information server）即可。本人在开发本系统的时候使用的是windowsxp profesional系统，安装有iis，且装有frontpage2003，visure studio2005还有access2003，所以在运行上说，本系统也是可行的。3 关键技术介绍3.1 asp技术介绍asp（active server page）,即动态服务器页面的缩写，是一种基于b/s的服务器端脚本编写环境，可以用来创建和运行动态网页或者web应用程序。asp网页可以包含html标记、普通文本、脚本命令等。利用asp可以向网页添加交互内容（如表单），也可以创建使用html网页作为用户界面的web应用程序。asp还可以与数据库和其他程序进行交互，是一种简单、方便的编程工具。asp中的html标记多样，方便控制；普通文本可以容纳任何符号，只要文本中能够正常显示；脚本可以使用vb脚本、java脚本或者c#脚本，脚本功能强大，可以让编程人员随心所欲地控制网页的各种功能。asp还能和activex组件兼容，可以引用许多组件来扩展其功能，还可以根据需要自行编写组件。还可以引用许多多媒体元素，如声音、视频、幻灯片等。还可以运用ado引用word、exel等文件。asp中有几个重要的对象，熟练地掌握并运用这些对象就能够轻松地把本系统编写完整。这些对象包括request、response、session、application、server和command对象。各个对象各有各的作用，其中request和response分别应用与客户端的请求和服务器的应答，session用于保存用户的一些个人数据，application用于保存所有用户共同的数据，server主要用于服务器的相关操作等等。熟悉这些对象的基本功能并熟练掌握其属性和方法对设计本系统是很有帮助的2。3.2 开发环境介绍asp程序运行前，先要安装配置web服务器，也就是需要安装相应的web服务器软件。基于windows平台的服务器端asp环境有：windows98/me+pws(personal web server)和windows2000/xp/nt+iis(internet information server),这里用的是windowsxp+iis环境。iis是microsoft所提供的internet信息服务系统，允许在公共internet或internet的web服务器上发布信息。iis通过使用超文本传输协议（http）传输信息。还可以配置iis提供ftp（文件传输）服务和smtp（简单邮件传输协议）服务2。在安装了iis的系统中，编写网页就相当简单了，只要把编写的网页保存到虚拟目录之下，就可以运用web浏览器对其进行浏览。而编写网页的过程只要一个文本编辑器即可。当然如果想要编写出能够运行的网页来还是要借助一些调试工具的，这就需要像frontpage、vs等网页编写工具及其附带的调试工具了。安装有iis的系统只需选择“开始”|“控制面板”|“管理工具”|“internet信息服务”。在出现的“internet信息服务”对话框中，展开“网站”，出现“默认网站”，右击，选择“新建”|“虚拟目录”，按照提示建立一个虚拟目录。在虚拟目录下即可编写自己的网站了。编写完成后，在浏览器地址栏中输入http:/localhost/虚拟地址名就可以运行所编写的网站了。本系统就是建立了一个名为t的虚拟目录，其物理路径为e：/tdk，这样在浏览器的地址栏内输入http:/localhost/t即可出现所编写网站的首页了。3.3 ado数据库操作介绍数据库系统往往是一个大型web应用程序的核心。同其他web应用程序的编写方法相比，强大的数据库访问能力、简单一致的数据库访问方式正是asp突出特点之一。在asp中，可以轻松地利用microsoft提供的强大ado（activex data objects）技术来对各种各样的数据库进行访问：可以访问sql server这样基于客户端/服务器的数据库系统，也可以访问面向access这样的文件型数据库，还可以轻松地访问存储在其他表格式数据结构（比如电子表格）中的信息。ado还支持odbc（open database connectivity）数据库，这意味着只要遵循odbc标准的数据库都能被ado访问。ado的主要优点是易于使用、高速度、低内存支出和占用磁盘空间少。可以说，ado是目前数据库访问的先进方式之一。而asp又提供对ado的全面支持，可以通过ado数据模型访问各种数据库。它主要是通过其中所包括的connection（链接）、command（命令）、parameter（参数）、recordset（记录集）、field（字段）和error（错误）元素发挥作用的2。利用ado操作数据库有以下几种连接方式：dsn连接数据库、ole db连接数据库、odbc连接数据库，本系统是利用odbc连接数据库的。使用ado存取数据源的过程如图3-1所示：连接到数据库设置sql语句传递参数执行sql语句操作数据关闭链接图3-1 ado存取数据源过程3.4 access数据库介绍access数据库是目前比较流行的数据库管理系统，它是一个运行在windows系统环境下的桌面关系型数据库，也是office xp的组件之一。access数据库属于比较简单的小型数据库系统，一般用于小型公司的数据管理。其基本数据库观念与其他大型数据库系统（如oracle和sql server等）并没有太大的差别。当用户新建一个数据库后即可在这个数据库下建立许多表，表格形式也挺简单，设计时就像exel表格一样的三列多行的形式，三列分别为“字段名称”、“数据类型”和“说明”，设计完成，表格即可使用，其过程相当简单。本系统就是在data文件夹中设计了一个名为db.mdb的access数据库，再其下设计了几个相关的表，来实现数据库的设计的6。3.5 css级联样式表介绍css（cascading style sheets）级联样式表是一种能够控制网页的样式，它可以控制很多网页元素，包括字体颜色和大小、线的宽度和颜色、网页中各项之间的空白量。通过对css级联样式表的使用可以使很多相同的网页元素用一种样式来规定，也可以使用很多流行的网页元素，如导航条，菜单等。css的书写格式如图3-2所示：td width：36px1234图3-2 css样式书写格式其中1部分为选择器，4部分为声明，2,3为属性和值。css的书写就是由1,4的选择器和声明两部分构成，在4的声明中有包括属性和值两个部分。选择器和声明要用空格分开，声明部分要用大括号括起来，属性和值之间要有一个冒号。只要书写规范，便可以运用css样式控制各宗网页元素了。css是大有用处的除了能够控制一个网站的许多相同元素，使得代码简练之外，还可以利用css制作导航条、各种形式的菜单，还能导入幻灯片、flash文件、声音等各种多媒体元素，除此之外还可以利用css进行网页布局，使得网页美观大方，而且生动活泼，是现在比较流行的网页设计技术，是设计这个系统必不可少的关键技术。本系统中主要应用css设计了一个导航条，两个菜单，还有一些相同元素的link.css样式表，以及主页部分的幻灯片的引进都是用css层叠样式表来实现的。这些元素的引进都是我增进了对css样式表的理解和使用方法，对我来说是受益匪浅的1。4 系统总体设计4.1 系统模块结构设计4.1.1 系统方案设计通过系统分析和调研，可以得出本系统应具有以下功能：访客对主页信息的浏览，用户注册和登陆，用户应有浏览企业新闻、产品介绍、发表留言、查看留言、提交求助和订单信息、享受在线客服的权限、管理员后台应该可以添加和编辑新闻和产品信息、管理和回复用户留言、进行在线客服服务、处理求知和订单信息等权限。这些权限应该怎样衔接，怎样配合都要有一个最初的方案。管理员和用户的各个功能之间的对应关系也要有最初的设计方案。4.1.2 系统结构设计当浏览者输入网址首次登陆时进入index主页，可以查看企业的一些基本信息，了解详细，可以注册用户并登陆。登陆后进入企业新闻、点击标题查看新闻，左边有用户菜单，分别有发表留言、查看留言、查看新闻、查看产品信息、在线客服、修改密码、设置信息、退出登陆各功能，点击进入相关项目；登陆如在用户类别选择“管理员”选项，登陆进入后台管理中心，同样左侧有一个菜单，分别有添加新闻、编辑新闻、添加产品信息、编辑产品信息、管理留言、在线客服、查看订单、查看求职信息、修改密码、退出登陆各选项，。如下面3个图所示：主页用户登陆用户注册浏览信息用户界面管理员界面图4-1 系统总体功能图 这个是系统总体框架结构，在这个结构下又可以有如下两个分支：用户界面发表留言求职申请浏览企业新闻查看产品信息客户服务区设置个人信息重设我的密码退出登陆查看所有留言图4-2 用户功能图管理员界面添加新闻信息编辑新闻信息添加产品信息编辑产品信息查看用户订单查看用户求职管理留言在线客服添加管理员更改登陆密码退出登陆图4-3 管理员功能图其中图1是系统总体架构，图2是用户界面架构，而图3则是管理员界面架构。由这种结构关系可以明确系统有三大模块构成：主页模块，它主要是静态页面，比较简单；用户模块，由一些子模块构成，其中大部分为含有脚本的动态页面；管理员模块，这是系统的后台部分，也是以动态页面为主，这是对用户模块能够浏览的信息进行添加和编辑的部分。在用户模块和管理员模块中存在着一系列的数据库操作，包括数据的添加、查询、删除和修改操作。这些操作的过程都是利用网页进行数据库的操作，其操作都有一个相应的流程，只要按照这些流程进行设计，就可以完成网页对数据库的操作过程，系统也就进一步完善了。添加数据时编号字段由系统自动生成，且不能修改，其他信息由用户输入，之后对数据进行合法判断，合法则写入保存至数据库，不合法则重新输入数据。其过程如下面的流程图：yn开始自主生成编号输入数据合法？写入数据库结束图4-4 数据添加流程图查询数据的时候，首先输入一个要查询的条件，根据条件进行查询，如果存在满足条件的数据，即可读出，否则返回输入条件界面再次输入条件，其查询的过程如图4-5所示，这里的查询条件是丰富多样的，有时候会把条件里嵌套有另外一个子查询，而子查询的过程不外乎又是一个查询罢了，即可把他划分开开，先处理子查询，化简为最简单的条件，这样就可以把多层次的查询化繁为简成为一个单纯的查询了，普通的查询流程是这样的，多层次的查询无非是多进行几次这个流程而已。yn开始输入条件是否存在读出数据结束图4-5 数据查询流程图修改数据的时候，先选中一条待修改的记录，然后再直接输入数据，判断这个输入的数据是否合法，合法则保存至数据库，不合法就要重新输入。数据修改流程图如图4-6所示：yn开始选择要修改的数据输入数据是否合法写入数据库结束图4-6 数据修改流程图当用户选定一条记录时，单击删除超链接，会提示用户是否确定删除，如果是然后删除数据库相关内容。否就是放弃删除，就会回到编辑数据页面继续进行编辑，数据删除流程图如图4-7所示：yn开始选择需要删除的数据是否删除更新数据库结束图4-7 数据删除流程图 完成这些数据库的脚本操作设计之后，便可以根据系统功能进行数据库的各个设计了。在运用asp对该系统的设计过程中数据库的操作不外乎就是这些基本的操作过程，熟练掌握这些基本操作并运用这些数据库的基本操作就可以编写动态的网页了。4.2 数据库设计本系统采用access2003建立数据库，这样的数据库是文件类型的数据库，access是目前流行的关系数据管理系统，它集成在microsoft office套件中，与office一起安装，操作比较简便，且支持机构化查询语言，能够进行sql语言的使用。打开access2003，在data文件夹下建立名为db.mdb的数据库，打开db.mdb，建立以下9个表格：l 用户表guest，结构如4-1所示，其中gid（用户编号）为主键。l 管理员表manager，结构表4-2，mid（管理员编号）为主键。l 新闻表gongchang，结构如表4-3，gcid（编号）为主键。l 产品表chanpin，结构如表4-4，cpno（产品号）为主键。l 求职表qiuzhi，结构如表4-5，gname（求职者账号）为主键。l 订单表dingdan，结构如表4-6，id（编号）为主键。l 留言表liuyan，结构如表4-7，id（编号）为主键。l 回复表huifu，结构如表4-8，id（编号）为主键。l 评论表pinglun，表4-9为其结构图，id（编号）为主键。表4-1 guest表结构字段名称数据类型备注gid自动编号用户编号gname文本（最大50）用户账号realname文本（最大50）用户真名gpass文本（最大50）密码gsex文本（最大50）性别email文本（最大120）电子邮箱memo文本（最大50）备注信息inserttime文本（最大50）注册时间fp文本（最大50）头像路径addr文本（最大120）主页地址qq文本（最大50）qq号msn文本（最大100）msn号phone文本（最大50）电话号码depart文本（最大50）工作单位mail文本（最大50）邮政编码dizhi文本（最大180）通讯地址geyan文本（最大200）人生格言上述表格中gname，gpass和memo三项内容是由用户在注册中得到的，而后可以通过设置信息，得到qq、msn、phone、email、mail、dizhi、addr、depart、fp、gsex、geyan等信息，再通过真名验证可以得到realname字段。其中，gid是主键，且自动进行编号，注册过程中不会出现重复的gid。game中设置了无重复的索引，也不会有相同的用户账号。如果用户账号在注册的时候有所重复，网页之中要有所提示。表4-2 manager表结构字段名称数据类型备注mid自动编号管理员编号mname文本（最大50）管理员账号mpass文本（最大50）密码上述表格的所有信息都可以从管理员中的“添加管理员”选项中得到。其中mid为主键，自动编号。mname中设置了无重复的索引，不会有重复。如果重复会有相关提示。表4-3 gongchang表结构字段名称数据类型备注gcid自动编号新闻编号gctitle文本（最大50）新闻标题gcmess文本（最大225）新闻内容gctime文本（最大50）添加时间gjz文本（最大50）关键字上述表格的所有字段都在管理员的“添加新闻信息”中得到。gcid为主键，且自动编号，gctitle设置无重复索引，不可以重复。表4-4 chanpin表结构字段名称数据类型备注cpno文本（最大50）产品号cpname文本（最大50）品名depart文本（最大50）出自车间weight文本（最大50）重量cpr文本（最大50）截面半径height文本（最大50）柱体高度used文本（最大50）主要用途val文本（最大50）单价上述表格的所有字段都可以从管理员中的“添加产品信息”中得到。cpno为主键，不可以重复。这里就不必再在其他字段里设置没有重复的索引了，因为cpno已经是主键了，主键是不能重复的。表4-5 qiuzhi表结构字段名称数据类型备注gname文本（最大50）求职者账号realname文本（最大50）求职者真名qtype文本（最大50）求职类型age文本（最大50）求职者年龄上述表格的所有字段都可以从用户的“求职申请”中得到。gname为主键，无重复。表4-6 dingdan表结构字段名称数据类型备注id自动编号订单编号gname文本（最大50）订购者账号realname文本（最大50）订购者真名cpno文本（最大50）订购产品号cpname文本（最大50）订购产品名mass文本（最大50）订购量dtype文本（最大50）订单类型上述表格的所有字段都可以从用户的“预定产品”中得到。id为主键，自动编号。表4-7 liuyan表结构字段名称数据类型备注lyid自动编号编号gname文本（最大50）发言者账号lmess文本（最大225）发言内容ltime文本（最大80）发言时间lcolor文本（最大50）字体颜色lface文本（最大50）字体上述表格的所有信息都从“发表留言”中得到。gname为主键，无重复。表4-8 huifu表结构字段名称数据类型备注id自动编号编号gname文本（最大50）回复针对者hmess文本（最大225）回复内容htime文本（最大80）回复时间mname文本（最大50）回复发出者上述表格的所有字段都从管理员的“留言回复”中得到。id为主键，自动编号，回复内容从mname的管理员发出，发向gname的用户，只能单向发出的回复内容。图4-16 pinglun表结构字段名称数据类型备注id自动编号编号pinglun文本（最大50）评论内容gname文本（最大50，有索引，无重复）评论者账号上述表格的所有字段都从用户的“客户服务区”的评论表单得到。id为主键，自动编号。这里对数据库的控制过程完全靠ado对象的链接还有sql语句对各个表格的查询、添加、删除和修改操作。查询操作可以应用select语句进行，有条件的时候可以用到where语句；添加操作可以运用insert语句还有addnew函数；删除操作可以运用到delate语句；而修改操作要用到update语句。例如，当要从guest表中注册一条新的记录时，可以设置sql语句如下：sql=”insert into guest (gname,gpass,memo) values (”&gname&”,”&gpass&”,”&memo&”)或者可以运用addnew函数：rs.addnew()rs(“gname”)=gnamers(“gpass”)=gpassrs(“memo”)=memors.update()两种方法均可实现，其他的各种操作均可运用相应语句即可实现。其中当要查询一个表中的全部信息时可以运用通配符“*”，部分信息时可以运用like语句与“%”等通配符的搭配使用，例如；当要查询guest表中的所有信息时便可以设置sql语句为：sql=”select * from guest”而当要查询guest表中真名中有张姓的人的时候，可以将sql进行如下设置： sql=”select * from guest where realname like ”&张%” 65 系统详细设计5.1 总体文件本网站采用frontpage2003进行网页的设计，总体文件分布如下图所示：图5-1 文件分布结构其中data文件夹用于存放数据库文件db.mdb，images文件夹用于存放产品相关的图片，img和img2用于存放网页上要显示的系统图片。主页部分的网页文档包括：index.htm、1.htm、2.htm、3.htm、4.htm、4tp.htm、tiaokuan.htm，zhuce.asp。用户部分的网页文档包括：gueme.htm、left1.htm、news.asp、news1.asp、cpjs.asp、yuding.asp、yuding1.asp、yuding2.asp、qiuzhi.asp、qiuzhi1.asp、fayan.asp、fayan1.asp、kefu1.asp、kefu2.asp、kefu3.asp、updateguestpass.asp、updateguestpass1.asp。管理员部分网页文档包括：mamame.htm、left2.htm、addnews.asp、addnews1.asp、edtnews.asp、edtnews1.asp、edtnews2.asp、addcp.asp、addcp1.asp、addcp2.asp、edtcp1.asp、edtcp2.asp、kefu.asp、kefu4.asp、huifu.asp、huifu1.asp、addmanager.asp、addmanager1.asp、updatemanagerpass.asp、updatemanagerpass1.asp。还有log.htm、login.asp、logout.asp属于登陆有关的网页文档，1.swf是flash播放样式文件。5.2 通用功能设计通用功能网页即const.asp，这个页面包括了自行定义的一些过程和函数，以方便编程需要，比如alert过程，goback过程都可以省去很多代码，方便省事，这个asp页面的设计是很有必要的，其代码见附录部分。5.3 主页设计5.3.1 导航条当输入网站地址时，进入index.htm，这部分通过一个导航条，将主页分为7个部分，导航条样式如下图所示：图5-2 导航条这个导航条的css样式由sty1.css控制，其样式代码在附录部分。其中的注释清楚，无需赘述。在主页，主页的副本1.htm、2.htm、3.htm、4.htm中均用以下代码显示导航条：企业概况企业主要产品部分产品信息走进车间工人生活用户注册用户登陆 这个导航条把主页部分分成了7个网页，其中前5个对企业进行了全面的介绍，分别从“企业概况”、“企业主要产品”、“部分产品信息”、“走进车间”和“工人生活”各个方面进行介绍。这里的“企业概况”和“部分产品信息”两页里主要是文本和图片的相应组合设计；在“企业主要产品”页面里上面部分完全是纯文本信息介绍，下面用一个幻灯片将企业主要生产的产品图片显示出来，新颖别致；而“走进车间”更加把这个幻灯片升级化了，在相应的幻灯片的每一张画面底部还加上了文字说明，更加有趣生动；最后的“工人生活”用一个悬浮框架显示图片，超链接传递参数，这样可以完成点击一个超链接换一副图片的效果，也是十分有效的表现方式。5.3.2 用户注册其中企业概况、企业主要产品、部分产品信息、走进车间、工人生活都是一些介绍信息，以供浏览者浏览。如果用户需要注册，点击导航的“用户注册”，会进入以下界面，上面是两个图片，中间部分则列出了网站的服务条款，包括一些网络的法令法规，最下面则是两个单选项和一个提交按钮。选择是否同意这项条款来决定系统是否让其继续跳转到下一页的注册网页，显示效果图下图的5-3所示：图5-3 注册条款这是注册条款，这种条款在企业门户网站上是比较流行的，单选按钮如“否”，会出现下图的提示，且网页不会跳转。下面便是点击了“否”以后的情况，点击提示信息的“确定”按钮不会跳转，而继续保持在这个条款页面。相反，如果点击了“是”则会立即跳转到注册页面。图5-4 不同意条款的提示信息这只要在tiaokuan.htm中添加以下脚本即可实现测功能，该功能的实现过程如图5-5所示：开始选择是否同意跳转到注册网页结束ny图5-5 是否同意注册条款流程脚本的代码就不再列举了，只是一个if语句和提交表单的综合控制。可以看出，如果点单选按钮的“是“的话，将会进入zhuce.asp页面，这个页面的摸样如下图所示：图5-6 用户注册页面其中有一个表单项，包括3个文本框和一个文本域，前面3个文本框的文字前面都标有“*”附号，为必填内容，如果不填会有提示的，备注的文本域是可填可不填的，这个不影响注册。这其中有一个表单项action项指向do1.asp，该页面用于处理注册页面提交的信息，代码见附录部分。注册成功后出现如下提示的信息：图5-7 注册成功提示点击“确定”还会回到注册页面。成功注册后，会有提示框“你已成功注册，请登陆！”，便可以登陆了。5.3.3 用户登陆登陆页面如下图。最上面是一个表格的一个单元格，背景颜色设置为红色，再在其上放置一个只有文字的图片，文字内容为“welcome！”。中间部分是登陆的主要部分，先放置一个表格标题，方正舒体显示的红色“用户登陆”，然后是一个4行2列的表格，前一列显示标题，分别为“用户姓名：”“密码：”“验证码：”“登陆类型：”；后一列为输入部分，前面3个都是一个文本框，最后一个是个下拉列表项。其中在第三个文本框后边还跟随一个浮动框架，用于显示随机出现的4为验证码。最下面是一个动态图片，配合登陆页面，是这个页面和谐匀称。整个这个登陆页面的显示效果如下图5-8的显示：图5-8 登陆页面其中登陆类型有、两种，分别表示用户登陆和管理员登陆。输入用户姓名、密码、验证码，选择用户类型，点击登陆，只要账号、密码和验证码正确，就会跳转到相应的界面。输入错误会有如下所示的一些信息：“密码不能为空！”“用户名不能为空！”“验证码输入错误，请重新登陆！”“对不起，您输入的用户名或密码错误，请查实！” 这里的验证码显示设计方法如下，用一个悬浮框架，其中的scr属性指向checkcode.asp页面，这个页面用随机数随机出四个数字，然后利用4个数字作为图片的名称将4个图片显示出来。这里的从0到9的10个图片都是用数字作为名称的，例如“1.gif”就是一个显示数字1的一张图片，这样更利于验证码的显示。5.4 用户模块5.4.1 菜单项用户界面为gueme.htm，界面如下图所示：图5-9 用户界面界面运用框架结构将此网页分成两个部分，左边的部分是一个菜单项，的src属性指向left1.htm，其在用户界面中始终存在，方便用户去操作，css样式代码在附录中可以找到，不在赘述。而其菜单样式就是图5-9中左边部分的菜单样式，最上边是问候语“欢迎光临tdk用户社区”，中间部分是菜单按钮，点击可以分别进入各个页面，最下面是技术支持，即编写网页的团体部门或者个人所属单位，这里选取后者。这里运用了分页显示效果，有“第一页”、“上一页”、“下一页”、“最后一页”各个超链接可以将页面进行移动。这里主要是运用了recordset中的page有关的pagesize、absolutepage、pagecount、movenext等属性和方法的设计来完成记录的分页显示的。5.4.2 浏览企业新闻图5-9就是用户登陆用户界面后的状态，右边框架指向的第一个页面是“浏览企业新闻页面，用一个表格列出了新闻的编号、类型、标题和发表时间，且记录分页显示，点击标题即可查看相应的新闻内容，如图5-10所示，这里运用sql语句的查询语句select在gongchang表格中查询新闻内容gmess，并将其显示到表格的正文部分，gctitle的标题部分也相应显示到标题部分中去，字体做出相应的设置，使得其中的显示错落有致，赏心悦目。显示效果可以从图中看出：图5-10 新闻内容在内容页中设置了一个超链接“返回列表“，用于返回以上新闻列表。5.4.3 查看产品信息点击菜单项的“查看产品信息“，即可进入产品介绍页面，如图5-11所示：图5-11 产品介绍该页面显示一条产品信息，可以点击下面的“第一个”、“上一个”、“下一个”、“最后一个”实现记录的位置移动。这里的图片是可以随着记录的位置变化而做出相应变化的，主要是运用图片名称的设置和记录的cpname之间的关联实现这种功能的，具体的实现过程可以参见管理员的“添加产品信息”部分的设计。这里的记录的位置移动设计是利用recordset中有关position的absoluteposition、movenext、moveprevious、movelast、movefirst等属性和方法实现的。点击“预定产品”超链接进入产品预定页面，如图5-12所示：图5-12 产品预定这个页面分成两个部分，用一道线分割，上面部分是真名验证，因为预定产品需要用到真实信息了，而不能仅仅靠用户账号就可以办到的，点击“验证是否合法”会用脚本去判断其是否符合名字规范。如果合法，点击提交会将用户的真实姓名保存到guest表的realname中，以备后用。没有验证真名就去提交订单就会出现如下提示信息：图5-13 没有验证真名的提示信息点击这里的“确定”按钮，还会显示图5-12的订购页面，让用户区验证真名。而验证过真名以后就可以提交订单表了，如果有不填数量会有提示信息“请输入订购数量”，输入的产品号有误会提示“没有该产品，请检查产品输入是否正确！”该判定的流程如下：开始修改数量输入产品号是否订购过订单生成结束yn图5-14 判定是否订购过某产品的流程订单填写无误，便可以提交，但如果该产品已经订购，如果想继续订购，就可以添加数量，会提示“你已经预定该产品了，修改数量即可！”并跳转到如下页面，这个页面通过网页的trim.querystring方法得到上一页用get方法传递过来的cpno参数并显示出来。并用数据库查询语句查询到该cpno的产品在订单中的原来数量并显示出来，接下来用一个表单项控制要修改的数量，利用表单的文本框将修改数量传递给yuding2.asp进行处理，yuding2.asp用update语句将dingdan表的mass字段进行修改，这样就完成了对已订购产品的再次订购数量的修改过程了。图5-15 续订页面首次订购填写无误或者续订成功后会有提示信息“订单已提交，请等候管理员联系！”出现此提示表明该产品的订购数量修改成功了。5.4.4 发表留言点击菜单项的“发表留言”，进入留言区，如下图5-16所示：图5-16 留言页面在留言区里首先有一条欢迎语，即“欢迎xxx来社区交流，你在这里可以畅所欲言！”其中xxx为用户账号名，可以动态显示登陆者的名字，实际上就是读取session中的“uname”并显示出来。同样可以将这个信息扩展开来，查询到名为这个“uname”的guest表中的记录的性别、头像显示在下面的表格中去，这个类似于qq中的头像和账号显示。接下来可以输入留言信息，输入时可以控制字体和字号大小，用于显示。点击提交，便可以把留言内容保存到数据库中的liuyan表中。没有输入字体而提交会有错误提示“留言不能为空！”当用户输入一些信息并提交后便是留言成功了，并提示“发言成功！”该功能中对字体和字大小的控制只会在显示页面中体现出来，而不会在该页面中立即显示，只是在liuyan表中设置了lcolor和lface两个量进行控制，所以会有这样的局限性。5.4.5求职申请看过企业一些新闻的一些人肯定被企业的工作所吸引了，想要求职点击菜单项的“求职申请即可进入求职页面：图5-17 求职页面有点像预定产品的页面吧？是的，不过有不同之处，预定产品页面是在新窗口中加载的，它是为了让用户在预定产品时既能预定，又能浏览对产品的介绍信息，方便用户预定。而这里不需要浏览什么信息，只要想求职即可填写求职信息。与订单的填写过程一样，如果没有验证过真名的会有图5-13的错误提示。验证过真名的，便可以填写求职申请并提交了。没有验证真名的会有提示信息“请验证真名！”如果用户已经发出过申请， 会提示“你已经申请了，无需再次！”这个判断主要是通过qiuzhi表中的gname字段项的索引设置成了“无重复”，并且脚本代码中也对这种情况作出了相应的处理，所以当用户再次点击求职部分的会有这样的提示信息。填写无误并提交即求职成功，会出现以下提示：图5-18 求职成功点击提示信息的“确定”按钮，便会通过脚本部分的goback()函数回到图5-17的求职页面。5.4.6 查看留言点击菜单项的“查看所有留言”便会呈现所有用户发表的留言，方便用户之间交流，是一个比较好的交互平台。如下图所示：图5-19 查看留言 这里就是使用了普通的查询功能，查询留言表中的内容，并合理地显示出来，并能够分页显示，每页设置显示10条记录。这里的显示信息五颜六色，字体也各不相同，主要是把用户留言的时候进行的字体和字体颜色的设置信息一并显示的出来，这主要是运用了liuyan表中的lface和了color两个字段的存储功能和html语言中字体的face和color两个属性来实现的。这里也用到了记录的分页显示，效果如图5-19中显示所示。5.4.7 客户服务区点击菜单项的“客户服务区”，便进入客服页面了，图5-20 客服页面最顶端显示的内容为用户头像（可以在设置个人信息中设置头像信息）、账号、问候内容、管理对其留言的回复数量、一个长连接。这个超链接用于连接到查看回复内容的页面。图中回复数量为零，如果点击查看会有提示“暂无回复！”并返回到客服页面，如果有回复信息，如另一个账号的客户服务区的顶部有这样的显示，点击查看就可以成功地跳转到查看回复页面了，回复页面如下所示：图5-21 回复页面这里用到了记录的分页显示，当回复内容过多时，便于显示。点击“返回上页”可以返回到客服页面。 客服页面的中间部分是tdk的各种人工服务联系方式，包括电话、电子邮箱、通讯地址、qq群和一些欢迎语等。最下边是一个评论区：图5-22 回复页面这个评论区用于接受用户的评论，以对系统做出改变，来满足用户的需求。该评论区中每个用户只能做出一次评论，如果再次评论会提示“您已经发表过评论了！”评论也不能为空，否则会提示“评论不能为空！”图5-23 提示信息评论无误并且是首次评论，便会提交成功，提示信息如图5-23。点击“确定”回到用户的客服页面。5.4.8 用户系统功能用户系统功能包括设置个人信息、修改我的密码和退出系统3个部分，这3项功能都在菜单项中，分别点击进入相关页面，如下列图示：其中图5-24是设置信息的页面，这个页面是根据qq中设置头像等信息的思路来设计的，。后面的几个选项都是文本框的输入，上面多次进行介绍，不在赘述。而第二行的头像信息的设置时比较有趣的，这里主要运用了一个下拉列表框和一个图片显示项就完成了头像的选择，显示和储存过程。设计思路如下，下拉列表框的个选项的id设置设置为图片的路径名称，列表框的名称为数据库中的名称fp，例如头像1的id名称为“img2/image1.gif”，这样便把选择的fp值储存到数据库了。只需将的id设置为fp即可，如下图：图5-24 设置个人信息下图：5-25则是修改我的密码的页面，表单信息是一个3行2列的表格构成的，3个文本框作为输入信息进行提交。图5-25 设置我的密码进入设置信息页面后可进行各项设置，有不填的必要信息便提示“为方便联系，请填写必填内容！”而当进入修改我的密码页面后原密码不对，会提示“对不起，你输入的用户名