基于web开发的图书销售系统的设计与实现毕业设计论文.doc

CHANGSHA UNIVERSITY OF SCIENCE & TECHNOLOGY

毕业设计（论文）

题目：基于web开发的图书销售系统的设计与实现

学生姓名：
学 号：
班 级:
专 业：
指导教师：

2015 年 6 月

基于web开发的图书销售系统的设计与实现

学生姓名：
学 号：
班 级：
所在院(系): 计算机与通信工程学院
指导教师：
完成日期: 2015年6月

基于web开发的图书销售系统的设计与实现

摘要

社会在不断的发展壮大，特别是互联网技术不断地深入到社会的各个层面，网上图书销售系统等各个网上销售系统也不断的应运而生【1】。
鉴于目前的图书销售系统的功能不全，操作繁杂，系统要求硬件等级高等问题，要想设计一个有个性化的图书销售系统。从而在书店对新书的进货，对书籍出售的管理能力，对会员信息和图书信息的管理能力，对书店管理人员软件操作的适应时间和操作感觉这些方面都将大大的提高。本系统正是基于这一现状而开发出来。

关键词：web开发 图书销售 数据库 系统分析 软件工程

DESIGN AND IMPLEMENTATION OF WEB DEVELOPMENT SYSTEM BASED ON BOOK SALES

ABSTRACT
Society in constant development and expansion, particularly Internet technology continues deep into all levels of society, and various other online book sales system of online sales system also continuously emerged【1】.
Currently the general book sales system failure, complex operation, system requirements and high level of hardware problems, but imagine having a personalized book sales management system. Thus the purchase of new books in the bookstore; the ability to manage the sale of books; books for members and staff management; time to adapt to the bookstore manager software operation and operating feel will greatly improve these aspects. The system is based on the status quo and developed.

Key words: web development；book sales database design；system analysis；software engineering
目 录

1 绪论 1
1.1 课题的研究背景和意义 1
1.2 国内外发展现状及发展趋势 1
1.3 本论文的主要内容与结构 2
2 相关技术简介与开发环境 3
2.1 MyEclipse开发平台 3
2.2 Oracle数据库 3
2.3 搜索引擎技术 3
2.4 通过JDBC对数据库进行访问 4
2.5 Java多线程技术 4
2.6 Java语言 4
3 需求分析 5
3.1 设计目标 5
3.2 可行性分析 5
3.2.1 经济可行性 6
3.2.2 技术可行性 6
3.2.3 操作可行性 6
3.2.4 其他可行性 6
3.3 性能需求 6
3.4 功能需求 7
3.4.1 用户注册 7
3.4.2 用户登陆 7
3.4.3 购物车 7
3.4.4 用户订单 7
3.4.5 图书商品列表 7
3.5 需求分析总结 7
4 总体设计 9
4.1 概要设计 9
4.1.1 系统功能模块图 9
4.1.2 系统流程图 10
4.2 数据库设计与实现 12
4.2.1 系统的E-R图设计 12
4.2.2 数据库表格结构 14
5 图书销售系统的具体实现 16
5.1 公共模块的实现 17
5.1.1 数据库连接方法概述 18
5.1.2 JDBCClass类的具体实现 19
5.1.3 模糊查询的语句实现 20
6详细设计与系统实现 21
6.1 界面设计 22
6.1.1 用户界面 23
6.1.2 登陆界面 24
6.1.3 购物车界面 25
6.1.4 订单界面 26
6.2 系统实现 27
6.2.1 DAO层的实现 28
6.2.2 Service层的实现 30
6.2.3 Servlet层的实现 32
参考文献 35
结束语 36
附录：（部分源代码） 50

1 绪论

1.1 课题的研究背景和意义
传统的购物方式局限于实体店等购物方式，而本系统将传统方式向网上销售的转变将大大提高人们的购买水准，也为了能够促进网上图书销售行业的发展，它不仅实现人们足不出户就能够方便快捷地买到自己喜欢的各种书籍，而且想能够向消费者展示一种新颖的购书方式。网上购书的方式必将被人们所接受。【2】
近年来，随着人类社会进入信息化时代步伐的加快，Internet从过去主要用于科研和简单信息的发布向商业化大踏步迈进，电子商务这种新的运营模式也随着这一时代的趋势应运而生。因此，开发功能强大，性能完善的网上图书销售系统具有十分重要的意义和价值。本系统正是基于这一现状而开发。
鉴于电子商务的特点，各类市场上销售的大部分商品都可以在互联网上销售，图书销售也因此受到广泛的关注，人们可以通过登录网站浏览书籍目录等选购自己中意的书籍。因此本系统设计具有广泛的应用价值使用价值。
1.2 国内外发展现状及发展趋势
就目前国内情况来说，网上图书系统主要有京东，当当，亚马逊等网上图书销售网上搞图书在线销售，但总体上的发展比较缓慢而且功能方面也不够完善。其中基于数据库的存储技术还有待加强改善。在现在这种大数据时代。信息量已经不是以前所能想象的。而国内的数据库技术还远不及国外一些发达国家的水平。因此在设计诸如在线销售的系统的时候考虑数据库方面的设计就是目前急需解决的问题。
而国外一些发达国家不仅在数据库方面处于领先水平，在整体系统布局方面也比国内相关网站先进得多。因此总的来说国外的发展技术比国内的还是要先进些。但是我相信通过我国这几年经济的迅猛发展，此类技术一定会得到较大的改善。
类似网站今后的发展趋势我认为应该会向云端存储数据发展，毕竟在这个信息大爆炸的社会无时无刻不充斥这信息的交互和分享。因此光靠诸如sql，oracle等技术的支持肯定是得不到较大的改善的。在今后的发展中，这类网站会向集成信息，大数据存储方面发展。也会使数据存储得到更大的提高。
1.3 本论文的主要内容与结构
本文是基于web开发的图书销售系统的设计与实现，通过系统的功能模块的实现来更好地使消费者实现网上图书购物。开发环境为MyEclipse，数据库运用Oracle Database 11g，在Windows7系统下调试运行。
本文主要组织结构如下：第一章介绍开发背景、研究意义与国内外发展现状；第二章主要介绍本系统所要运用到的相关技术和开发环境；第三章为本系统的需求分析；第四章为本系统的总体设计与数据库设计的实现；第五章本系统的具体实现；第六章为系统的详细设计与实现、系统的各个模块的调试与实现；最后一章是总结与致谢结束语等。

2 相关技术简介与开发环境

2.1 MyEclipse开发平台
（1）MyEclipse是在eclipse基础上加上一些插件而开发的集成开发环境。其主要用于web，移动设备的开发。Eclipse是一个开放源码，基于Java的开发平台，自带一个插件集：JDK。虽然许多用户都喜欢将Eclipse用作Java的集成开发环境，但Eclipse不仅仅是一个开发环境而已，因为其本身自带的许多插件集，它允许程序员构建与Eclipse无缝集成的工具。而且Eclipse也不是只支持JAVA语言的平台，事实上C/C++和PHP等语言的插件已经开发使用了。【3】
（2）基于此系统是基于web开发的图书销售系统，因此主要用到的是MyEclipse的web开发工具，tomcat服务器和web开发插件。还用到JDBC数据库链接工具等多项技术。
2.2 Oracle数据库
（1）Oracle是orcale公司的关系数据库管理系统，系统可移植性好，方便，功能强，适用于各类开发环境。高效率，可靠性好的适应高吞吐量的数据库为用户提供解决方案。【4】
（2）本系统的数据统一插入到Oracle Database 11g中，以关键字为查询字段，创建多个表存放图书信息和用户信息。创建触发器响应事件的点击。
2.3 搜索引擎技术
（1）该系统最为核心的技术是搜索引擎技术的使用，搜索引擎是根据用户的查询请求，按照一定算法从索引数据中查找信息返回给用户。为了保证用户查找信息的精确度，搜索引擎需要建立索引表并维护一个庞大的索引数据库。
（2）该系统首页的数据查询采用模糊查询，查询可分为按图书名称查询，按图书作者查询以及按图书信息查询等查询。查询后再匹配数据库的数据给予查询结果返回给用户。并显示信息查询结果是否查询出来。查询出来显示在界面上，未查询出来会提示用户查询未果。
2.4 通过JDBC对数据库进行访问
JDBC 从物理结构上说就是Java 语言访问数据库的一套接口集合。从本质上来说就是调用者（程序员）和实行者（数据库厂商）之间的协议。JDBC 的实现由数据库厂商以驱动程序的形式提供。JDBC API 为Java 开发者使用数据库提供了统一的编程接口，它由一组Java类和接口组成，使得开发人员可以使用纯Java 的方式来连接数据库，并进行操作。【6】
2.5 Java多线程技术
线程是通过程序的一条执行路线。多线程是一个程序同时运行多个任务的能力。它是在一个程序的内部进行分工合作。
优化程序的通常方法是确定瓶颈并改进它。瓶颈是一个程序中最慢的部分，他限制了其他任务的运行。据个例子说明：一个Spider程序需要下载十个页面，要完成这一任务，程序必须向服务器发出请求然后接受这些网页。当程序等待响应的时候其他任务不能执行，这就影响了程序的效率。如果用多线程技术可以让这些网页的等待时间合在一起，不用互相影响，这就可以极大的改进程序性能。【7】
2.6 Java语言
Java是James Gosling在Sun公司领导的小组开发的，Java最初被称为Oak，是1991年为消费电子产品的嵌入式芯片而设计的。1995年改名为Java,并重新设计用于开发Internet应用程序。
Java拥有的高效性、多平台移植性、通用性与高安全性，使之成为拥有显著优势以及广阔应用前景的一种语言。如今在移动互联网和云计算的大行其道之下，JAVA体现出了极强的优越性。
因此本系统也鉴于其优点使用其作为开发语言。

3 需求分析

3.1 设计目标
随着大数据时代的到来，特别是时至今日，信息化社会日益在我们的生活中凸现出来，因此有必要对各种信息进行分类整理然后反馈给消费者自己所需的信息。而本系统正是基于消费者对图书购买的背景需求下开发而来。图书销售已由传统的书店图书销售到现今的书店和网上销售并存。并且网上销售在今后的社会上将会越来越多的影响到人们的购物方式，即由传统的书店购书到网上购书，前景不可估量。而本系统就是要基于这一现状开发出来。目的就是能够方便消费者能够借助搜索引擎来查询自己钟意的图书并进行购买。
设计目标：本次研究选择的开发语言为Java，该系统基于B/S架构，用户可以通过浏览器对服务器使用访问。首先需要实现网上购书的基本功能，显示图书列表、添加图书到购物车、确认订单，我所研究的重点是对网上购物车的设计与实现模块。
系统可实现功能如下：
1.能够进行游客或已注册用户对网上图书列表的浏览，以及对各图书的详细信息的查看；
2.能够完成已登陆客户对图书的选购并统一添加图书到个人购物车，并且对已添加到购物车的图书进行数量的增加、减少、修改和删除等操作；
3.能够通过查看购物车对所选图书进行确定、挑选，确认或修改购物者的联系方式。

3.2 可行性分析
可行性分析主要讲述系统在经济，技术和社会等方面是否具有可行性从而确立整个系统是否具有可行性。
3.2.1 经济可行性
本系统意在让消费者方便在网上进行图书购买等便利购物。因此发展潜力巨大。用户量稳定。经济上可以视为一款可行性极高的开发系统。
3.2.2 技术可行性
本系统基于MyEclipse环境开发，数据统一存放在Oracle Database 11g中，在Windows7下运行，利用JDBC技术进行数据访问，因此在技术上，本系统是可行的。
3.2.3 操作可行性
本系统的面向对象为各类用户群体，操作简单，在人性化方面也较好。采用模糊搜索使用户能够快速的查询自己想要购买的图书。在操作上简单快捷。
3.2.4 其他可行性
本系统是属于毕业设计范围的开发系统，在法律和各方面并未侵犯其他专利。内容是日常的图书用品信息。并无其他国家禁止的不良信息。所以在其他方面均有可行性。
3.3 性能需求
本课题所研究的图书销售系统有如下的性能要求
（1） 查询响应快。本系统将数据一律插入到Oracle Database 11g中，在采用模糊查询的条件下能够快速的搜索出用户所查询的图书信息，在时间上小于用户的等待时间，因此能够进行快速的查询并返回用户所需的信息。
（2） 安全性较强。本系统的用户信息与订单信息均需用户登陆后方可修改查看，采用MD5加密技术进行加密，能够大大提升用户信息的安全性。因此在信息保护方面可以算是比较完善的。
（3） 可扩展与可维护性。在本系统的设计过程中。每个模块的功能都单独存放，这能够方便将来在添加一些额外功能时能够在不破坏原有系统的功能前提下增加额外的功能模块，这就使系统的扩展性大大提升。从而也大大的减少了系统维护的工作量，某一模块出问题时只需在相应的模块内进行修改即可。从而使整个系统维护性也大大提升。

3.4 功能需求
本课题研究的图书销售系统具有以下几个功能：用户注册，用户登录，购物车，用户订单，图书商品列表等。
3.4.1 用户注册
用户注册的功能主要是进行非会员用户在进行图书购书时要先进行用户注册以保存用户的图书信息和用户信息，也是为了保证用户的个人信息的安全性。此模块是添加新的用户，填写用户个人基本信息，包括姓名，密码，确认密码，E-mail，个人爱好，联系方式等。
3.4.2 用户登陆
如果游客要使用注册用户提供的功能，那么在使用之前必须登陆或注册后登陆。否则将无法进行图书选购。用户只要输入注册用户名和密码进行登录。若用户输入的以上两项与数据库中保存的数据相符，则用户登录成功，可以向用户开放全部前台子系统；如果不符，则登录失败。
3.4.3 购物车
用户可以将浏览到的钟意的图书加到购物车中，如果觉得有买的必要，就可以下订单购买图书了，如果觉得不需要可以再调整图书购物车，购物车主要存放的是图书的相关信息。
3.4.4 用户订单
订单管理的功能是对选择好用户的订单进行处理，包括图书简介，图书数量，图书的增加，删除等操作。
3.4.5 图书商品列表
图书商品列表主要是显示了用户检索出来的图书的基本信息，包括图书的名称，图书的作者，图书的简介，图书的类型等等。方便用户了解选购图书。

3.5 需求分析总结
根据用户对图书购买的需求分析得出，用户的基本需求如表3-1所示：

表3-1 需求列表
需求
用户根据自己喜好进行图书查询与搜索，系统根据用户查询反馈相关图书信息给用户
用户
图书消费者
用户所做的工作
图书消费者
用户注册
用户登陆
检索查询图书
填写、修改、删除图书订单
用户需求
图书信息
图书订单信息
用户信息
最优解决方案
用Oracle数据库实现，开发语言运用Java
最优方案原因
Oracle数据库的数据保存可靠，成本小；Java语言灵活性强、适应性强、

基于web开发的图书销售系统主要任务是根据图书消费者的喜好和查询来反馈图书信息给消费者。消费者根据检索出的图书信息进行购买和参考。如果满足消费者需求则进一步进行图书购买，填写用户相关信息，填写购买图书数量等信息进行图书购买。并且可以在购物车上进行图书信息的存储，以便日后在购买时能够快速的进行图书交易。

4 总体设计
在本章中，我们将描述图书销售系统具体的功能模块设计以及数据库的设计。系统概要分析在第一部分叙述，数据库设计实现在第二部部分详细给出。总体设计的目的是为系统的详细设计与实现做准备。
4.1 概要设计
4.1.1 系统功能模块图
根据上一章功能需求分析，我们已经明确了企业采购系统的总体模块：用户注册，用户登录，购物车，用户订单，图书商品列表模块。整个系统的总体设计模块图如图4.1.1所示：
图书销售系统

管理端
客户端

图书的增删改查
管理员个人信息
订单的删除
购物车
图书搜索购买
用户订单
用户登录
用户注册

图4.1.1 系统功能结构图
从图中我们可以看出，用户管理模块和购物车模块是整个系统的重点所在。两个模块占据了系统中的主要功能，而系统的重难点也在于这两个模块的实现。在下一个部分，我们来介绍各个模块的主要功能以及流程。

4.1.2 系统流程图

用户注册流程图
此模块是添加新的用户，填写用户个人基本信息，包括用户名、密码、确认密码、联系地址，个人爱好，E-mail等。这一部分功能的流程图如图4.1.2所示：
录入用户信息

录入用户信息

Yes
信息为空?
No

提示信息不能为空

Yes

用户已存在?
提示用户已存在

注册成功

图4.1.2 用户注册流程图

用户登陆流程图
如果游客要使用注册用户提供的功能，那么在使用之前必须用户登录方可进行相关功能的查询。用户只要输入用户名、密码就可以登陆进行图书购物了。若用户输入的以上两项与数据库中保存的用户数据相符，则表明用户登录成功，可以开放全部前台子系统；如果不符，则登录失败。
用户登陆的流程图如图4.1.3所示：

登录信息录入

接受登录信息
用户名,密码为空?
Yes

提示用户名或密码不能为空

No

按照用户名查询

No

用户已存在?
已登录
No
No
提示用户不存在
提示密码错误

Yes

口令正确吗?

Yes

图4.1.3 用户登录流程图
购物车流程图
用户可以将浏览到的满意的图书加到图书购物车中，如果觉得有买的必要，就可以下订单购买图书了，如果觉得不需要可以再调整图书购物车流程设计如图4.1.4所示；
购物车
查看商品
下订单
调整尚品
No

是否已购买

Yes

图4.1.4 购物车流程图

订单流程
主要包括订单的添加与删除，执行。如图4.1.5所示；
订单删除
订单发货
订单处理
用户订单

图4.1.5 订单流程图

4.2 数据库设计与实现
4.2.1 系统的E-R图设计
根据本系统的系统设计需求，得出如下的系统E-R图。
1.实体名：用户
属性：用户名 密码 Email 性别 生日
用户E-R图如图4.2.1.1所示：

图4.2.1.1用户E-R图

2.实体名：图书
属性：图书名 价格 图书分类 详细信息 图书大小
用户E-R图如图4.2.1.2所示：

图4.2.1.2图书E-R图
3.实体名：购物车
属性：图书图片 价格 折扣 数量
购物车E-R图如图4.2.1.3所示：

图4.2.1.3购物车E-R图
4.实体名：订单
属性：收货地址 收货人 电话号码
订单E-R图如图4.2.1.4所示：

图4.2.1.4订单E-R图
4.2.2 数据库表格结构
根据上述的数据ER图的设计，将E-R图转换为关系模型。则图书销售系统数据库包含以下几个表：用户表consumer，图书表books，订单表orders，如表4.2.2，4.2.3，4.2.4所示
1. 用户信息表
表4.2.2用户信息表
列名
数据类型
长度
备注
用户名
varchar
20
主键
密码
varchar
20

Email
varchar
20

性别
varchar
6

生日
date

爱好
varchar
90

地址
varchar
60

备注
varchar
1200

2. 图书信息表
表4.2.3图书信息表
列名
数据类型
长度
备注
图书号
number
10
主键
图书名称
varchar
150

图书作者
varchar
50

图书厚度
varchar
30

图书价格
number

图书折扣
varchar
20

图书类型
varchar
10

图书图片
varchar
50

3. 订单信息表
表4.2.4订单信息表
列名
数据类型
长度
备注
订单号
number
20
主键
订单名
varchar
20

联系电话
varchar
11

联系地址
varchar
100

收件人
varchar
20

5 图书销售系统的具体实现
5.1 公共模块的实现
5.1.1 数据库连接方法概述
鉴于本系统采用Oracle Database 11g存储数据，MyEclipse开发平台，因此采用JDBC数据库连接技术进行数据连接访问。jdbc由各种类和接口组成，也可以构建更高级的工具和接口。
鉴于本系统的数据连接。JDBC连接分为以下几个步骤：
1． 加载jdbc的驱动程序
2． 提供jdbc连接的URL
3． 数据库的链接
4． 创建PreparedStatementStatement
5． 执行sql语句
6． 进行结果处理
7． 关闭jdbc的对象
5.1.2 JDBCClass类的具体实现
1．加载驱动程序
driver = pro.getProperty("className");
name = pro.getProperty("name");
password = pro.getProperty("password");
url = pro.getProperty("url");
driver = new String(driver.getBytes("iso8859-1"),"gbk");
name = new String(name.getBytes("iso8859-1"),"gbk");
url = new String(url.getBytes("iso8859-1"),"gbk");
password = new String(password.getBytes("iso8859-1"),"gbk");
Class.forName(driver);
2．提供jdbc连接的URL
url jdbc\:oracle\:thin\:@localhost\:1521\:XE
3．数据库的连接
conn = DriverManager.getConnection(url,name,password);
4．创建PreparedStatementStatement
public Object[] query(String sql, Object[] args, Class clazz) {//sql是查询语句，args是存放参数，根据clazz可用反射自动封装成vo
Object[] obj = null;
Connection conn = dbManager.getConnection();//得到一个Connection
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
pstmt = conn.prepareStatement(sql);//获得preparedStatement
if(args != null) {
setParameters(pstmt, args);//设置参数
}
rs = pstmt.executeQuery();//执行命令，返回结果集
obj = mapRow(rs, clazz);//封装结果集
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBManager.free(conn,pstmt,rs);//释放资源
}
return obj;
}
5．执行sql语句
rs = pstmt.executeQuery();//执行命令，返回结果集
6．进行结果处理
public interface RowMapper {
public Object[] mapRow(ResultSet rs);
}
7．关闭jdbc的对象
DBManager.free(conn,pstmt,rs);//释放资源
5.1.3 模糊查询的语句实现
用户在查询自己想要的书籍时，会用模糊查询来查询书籍，于是本系统中我们用sql语句来实现此功能。
public GoodsVO[] selectGoodsbyName(String name) {
Object []obj = null;
GoodsVO []gvo = null;
String sql = "select * from goods where gdname like ? or gdauthor like ?";
//obj = jdbc.query(sql, new Object[]{name}, GoodsVO.class);
obj = jdbc.query(sql, new Object[]{name,name}, new SetParameters(){
@Override
public void setParameters(PreparedStatement pstmt, Object[] obj) {
try {
for (int i = 0; i < obj.length; i++) {
if (obj[i].getClass().getName().equals("java.lang.String")) {
System.out.println("'%"+obj[i].toString()+"%'");
pstmt.setString(i + 1, "%"+obj[i].toString()+"%");
} else if (obj[i].getClass().getName().equals("java.lang.Integer")) {
pstmt.setInt(i + 1, Integer.valueOf(obj[i].toString()));
} else if (obj[i].getClass().getName().equals("java.lang.Float")){
pstmt.setFloat(i+1, Float.valueOf(obj[i].toString()));
} else if (obj[i].getClass().getName().equals("java.util.Date")) {
pstmt.setDate(i+1,new Date(((java.util.Date)obj[i]).getTime()));
}
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}, GoodsVO.class);
if(obj!=null) {
gvo = new GoodsVO[obj.length];
for(int i=0;i<obj.length;i++) {
gvo[i] = (GoodsVO)obj[i];
System.out.println(((GoodsVO)obj[i]).toString());
}
}
return gvo;
}

6 详细设计与系统实现
6.1 界面设计
图书销售系统的界面分为用户注册界面、用户登录界面、购物车界面以及订单界面。
6.1.1 用户界面
用户注册界面是将非会员用户进行身份注册，以便今后在进行图书购买时能够存储用户信息。也作为用户在登陆本系统时的凭证，也可以保护用户的信息安全。当用户注册完毕时，将用户输入的信息存储到数据库中以便日后登录时匹配数据库的相关信息作为登陆凭证。界面设计如图6.1.1所示

图6.1.1 用户注册界面

用户注册界面代码如下：
<title>用户注册</title>
</head>
<body class='l_application c_users a_new gatekeeper' >
<header>
<a href="index.jsp"> <img alt="Shoplocket-logo"
src="image/zhucetushulogo.png" /></a></header>
<div class='container'>
<section class='signup'>
<div class='intro'>
<h1 class='title'>Welcome to BookShopping</h1>
<h2 class='subtitle'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
本网站提供在线购书服务，让您足不出户就能够购买您喜爱的图书，方便快捷，欢迎使用本购物系统。
</h2>
</div>
<div class='signup-form'>
<form accept-charset="UTF-8" action="servlet/SvConsumer" class="new_user"
id="new_user" method="post" name="form1">
<div class='facebook-button'>
<img alt="Facebook-sign-in" src="image/yonghuzhucelogo.png" width="399" />
</div>
<input type="hidden" name="action" value="register">
<table>
<tr>
<td align="right">&nbsp;用户名*：</td>
<td colspan="3"><input type='text' name="cname"></input></td>
</tr>
<tr>
<td align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码*：</td>
<td colspan="3"><input type='password' name="cpassword" class="cpassword" onblur="checkpassword()"></input></td>
</tr>
<tr> <td align="right">确认密码:</td>
6.1.2 登陆界面
登陆界面是用户作为登陆本系统的凭证，用户填写用户名和密码之后先和数据库里面的用户信息进行匹配，如果匹配成功则登陆成功，反之则提示登录失败。界面设计如图6.1.2所示：

图6.1.2 用户登录界面
详细设计代码如下：
<div class='stacked-group'>
<table>
<tr>
<td>用户名:</td>
<td><input name="cname" type="text" class="cname" onblur="checkname()">
</td>
<td><span hidden class="nameerror">输入名字</span></td>
</tr>
<tr>
<td >&nbsp;&nbsp;&nbsp;&nbsp;密码:</td>
<td><input name="cpassword" type="password" class="cpassword" onblur="checkpassword()">
</td>
<td><span hidden class="passworderror">输入密码</span></td>
</tr>
</table>
</div>
<div class='field login-final'>
<input class="button" name="action" type="submit" value="Let me in" />
</div>
</form>
<a href="forgetPassword.jsp" class="forgot-password">忘记密码？</a> </section>