HTML第18章-综合案例课件2.ppt

1、第第18章章 综合案例2案例功能描述案例功能描述1用户登录注册模块设计用户登录注册模块设计2订单管理模块设计订单管理模块设计3客户管理模块设计客户管理模块设计418.1 案例功能描述具体功能具体功能注册新用户，或使用系统内置管理员帐号登录。登录成功后，可以执行下拉列表框中的功能。实现订单管理、客户管理、留言管理等模块，完成数据管理功能。基于基于IndexedDB数据库完成用户注册与登录、订数据库完成用户注册与登录、订单管理、客户管理等模块单管理、客户管理等模块。18.1 案例功能描述 案例的功能模块、涉及的IndexedDB数据库、对象仓库的描述见下表。18.1 案例功能描述 案例包括登录注册

2、、订单管理、客户管理和留言管理等页面。网页文件、对应的JS文件、定义的函数如下。18.2 用户登录注册模块设计18.2.1 页面结构代码分析页面结构代码分析v用户登录注册界面用户登录注册界面参考参考图图18-1。v页面在表单中放置了页面在表单中放置了2个文本框和个文本框和3个命令按钮。个命令按钮。v在初始状态下，下拉列表框是不可用的，当登录成功后，在初始状态下，下拉列表框是不可用的，当登录成功后，可以选择列表框中的选项进入相应的功能模块。可以选择列表框中的选项进入相应的功能模块。v在页面的头部引入了外部的在页面的头部引入了外部的JavaScript文件文件init_data.js。，18.2

3、用户登录注册模块设计18.2.2 CSS代码分析代码分析v为为body标记定义了背景图片标记定义了背景图片v为为h2标记、标记、form标记分别定义了样式标记分别定义了样式v表单上的描述文字统一放置在表单上的描述文字统一放置在span标记中，并定义了样式标记中，并定义了样式v使用属性选择器定义了使用属性选择器定义了input标记的的样式标记的的样式18.2 用户登录注册模块设计18.2.3 JavaScript代码分析代码分析v 页面加载时执行页面加载时执行window_onload()方法，功能是连接数方法，功能是连接数据库对象据库对象Data，创建，创建Web应用的应用的4个对象仓库，创建

4、相关个对象仓库，创建相关的索引。的索引。v 单击单击“登录登录”按钮时执行按钮时执行btnLogin_onclick()方法，完方法，完成登录验证功能成登录验证功能。v 单击单击“注册注册”按钮时执行按钮时执行btnRegister_onclick()方法，方法，完成用户注册功能，对于已经存在的用户给出提示信息完成用户注册功能，对于已经存在的用户给出提示信息。v btnClear_onclick()方法的功能是重置用户信息方法的功能是重置用户信息。18.3 订单管理模块设计18.3.1 页面结构代码分析页面结构代码分析v 订单管理模块实现的是订单数据的输入、追加、修改和删除等功能。v 订单管理

5、页面的主体分为3部分，上部是数据编辑处理区域，中部是功能按钮，下部是订单汇总显示区域，效果如图所示。18.3 订单管理模块设计18.3.2 CSS代码分析代码分析v 订单管理页面的CSS代码从3方面理解。v 第1部分是常规的标记定义，例如body标记、ul标记、li标记、h2标记等。v 第2部分是“旅游订单明细”部分中的数据显示和编辑区域的定义，包括后代选择器.singleLine div、后代选择器.singleLine span、后代选择器等。v 第3部分是汇总显示表格区域的CSS设计，包括使用#infoTable定义表格显示区域，使用后代选择器#infoTable table设置表格的c

6、ellpadding属性、cellspacing属性、font-size属性等。18.3 订单管理模块设计18.3.3 JavaScript代码分析代码分析v num_onblur()方法和price_onblur()方法当数量文本框和单价文本框失去焦点时触发，功能是将金额文本框的值设置为数量与单价之积。v btnAdd_onclick()方法将表单中的信息追加到本地对象仓库orders中，如果追加失败则在控制台中显示错误信息。如果追加成功，将会调用showAlldata()方法重新显示所有订单信息。18.3 订单管理模块设计v btnUpdate_onclick()、btnDelete_onclick()方法 用于修改或删除当前订单编号所对应的订单信息。v tr_onclick(tr,i)方法 将用户单击行的订单信息填入表单各控件中，设定“追加”按钮为无效状态，将“修改”和“新增”按钮设定为有效状态。v showAllData(loadPage)方法和 showData(row,i)方法 从本地数据仓库中查询出所有订单信息v removeAllData()方法 该方法用于清除订单汇总表中的数据18.3 订单管理模块设计v代码略。代码略。