3.4 项目实训

3.4.1 项目描述

本项目实现一个会员管理系统，系统有一个登录页面login.html，代码如例3-16所示。登录页面上有一个超链接可以链接到会员注册页面register.html，代码如例3-17所示。系统登录后转到系统主页面main.html，代码如例3-18所示。主页面分为3个子窗口，3个子窗口分别对应top.html、left.html和bottom.html，代码分别如例3-19、例3-20和例3-21所示。在窗口中的left.html页面上可以实现查询会员信息、修改会员信息和删除会员信息，使用的静态页面分别是lookMember.html、updateMember.html和deleteMember.html，代码如例3-22、例3-23和例3-24所示。项目的文件结构如图3-13所示。本项目分别使用NetBeans和Eclipse开发。

图3-13 项目的文件结构

3.4.2 学习目标

本实训的主要学习目标是通过项目综合运用本章的知识点来巩固本章所学理论知识，并能为第4章的案例开发奠定基础。

3.4.3 项目需求说明

本项目通过静态页面设计一个会员管理系统，会员能够注册、登录并查询会员信息、修改会员信息和删除会员信息。

3.4.4 项目实现

登录页面（login.html）运行效果如图3-14所示。

图3-14 系统登录页面

【例3-16】 登录页面（login.html）。

单击图3-14所示页面中的超链接“注册”，将出现如图3-15所示的会员注册页面。单击图3-15中的“提交”按钮页面跳转到登录页面。

图3-15 会员注册页面

【例3-17】 会员注册页面（register.html）。

单击图3-14所示页面中的“登录”按钮将跳转到会员管理系统主页面，如图3-16所示。

图3-16 会员管理系统主页面

【例3-18】 系统主页面（main.html）。

【例3-19】 top.html页面。

【例3-20】 left.html页面。

【例3-21】 bottom.html页面。

单击图3-16所示页面中的“查询会员信息”，将出现如图3-17所示的页面，对应的超链接页面文件是lookMember.html。

图3-17 查询会员信息

【例3-22】 查询会员信息（lookMember.html）。

单击图3-17所示页面中的“修改会员信息”，将出现如图3-18所示的页面，对应的超链接页面文件是updateMember.html。单击图3-18所示页面中的“修改”按钮将跳转到查询会员信息页面。

图3-18 修改会员信息

【例3-23】 修改会员信息（updateMember.html）。

单击图3-18中的“删除会员信息”，将出现如图3-19所示的页面，对应的超链接页面是deleteMember.html。单击图3-19中的“删除”按钮页面将跳转到查询会员信息页面。

图3-19 删除会员信息

【例3-24】 删除会员信息（deleteMember.html）。

3.4.5 项目实现过程中注意的问题

在项目实现的过程中除了要注意第1章和第2章中提到的注意事项外，还需要注意框架之间的嵌套关系，否则有可能出现异常情况。

3.4.6 常见问题及解决方案

1．<frameset>标签之间嵌套关系错误

<frameset>标签之间嵌套关系错误如图3-20所示。

图3-20 <frameset>标签之间嵌套关系错误

解决方案：出现如图3-20所示的异常情况时，主要的解决方案是检查<frameset>和<frame>标签是否使用正确。

2．使用框架出现空白页面异常

使用框架出现空白页面如图3-21所示。

图3-21 使用框架出现空白页面

解决方案：使用<frameset>标签划分窗口时不能把<frameset>放在<body>中，划分窗口时HTML页面不用<body>标签，请参考例3-10和例3-18。

3.4.7 拓展与提高

请为会员管理系统添加“修改个人密码”功能，如图3-22所示。

图3-22 修改个人密码

上一章目录下一章