《HTML第18章-综合案例课件2.ppt》由会员分享，可在线阅读，更多相关《HTML第18章-综合案例课件2.ppt（13页珍藏版）》请在三一办公上搜索。
1、第18章 综合案例2,案例功能描述,1,用户登录注册模块设计,2,订单管理模块设计,3,客户管理模块设计,4,第18章 综合案例2案例功能描述1用户登录注册模块设计2订单,18.1 案例功能描述,具体功能注册新用户，或使用系统内置管理员帐号登录。登录成功后，可以执行下拉列表框中的功能。实现订单管理、客户管理、留言管理等模块，完成数据管理功能。,基于IndexedDB数据库完成用户注册与登录、订单管理、客户管理等模块。,18.1 案例功能描述具体功能基于IndexedDB数据,18.1 案例功能描述,案例的功能模块、涉及的IndexedDB数据库、对象仓库的描述见下表。,18.1 案例功能描述案
2、例的功能模块、涉及的Indexed,18.1 案例功能描述,案例包括登录注册、订单管理、客户管理和留言管理等页面。网页文件、对应的JS文件、定义的函数如下。,18.1 案例功能描述案例包括登录注册、订单管理、客户管理,18.2 用户登录注册模块设计,18.2.1 页面结构代码分析用户登录注册界面参考图18-1。页面在表单中放置了2个文本框和3个命令按钮。在初始状态下，下拉列表框是不可用的，当登录成功后，可以选择列表框中的选项进入相应的功能模块。在页面的头部引入了外部的JavaScript文件init_data.js。，,18.2 用户登录注册模块设计18.2.1 页面结构代码,18.2 用户登
3、录注册模块设计,18.2.2 CSS代码分析为body标记定义了背景图片为h2标记、form标记分别定义了样式表单上的描述文字统一放置在span标记中，并定义了样式使用属性选择器定义了input标记的的样式,18.2 用户登录注册模块设计18.2.2 CSS代码分,18.2 用户登录注册模块设计,18.2.3 JavaScript代码分析页面加载时执行window_onload()方法，功能是连接数据库对象Data，创建Web应用的4个对象仓库，创建相关的索引。单击“登录”按钮时执行btnLogin_onclick()方法，完成登录验证功能。单击“注册”按钮时执行btnRegister_onc
4、lick()方法，完成用户注册功能，对于已经存在的用户给出提示信息。btnClear_onclick()方法的功能是重置用户信息。,18.2 用户登录注册模块设计18.2.3 JavaSc,18.3 订单管理模块设计,18.3.1 页面结构代码分析订单管理模块实现的是订单数据的输入、追加、修改和删除等功能。订单管理页面的主体分为3部分，上部是数据编辑处理区域，中部是功能按钮，下部是订单汇总显示区域，效果如图所示。,18.3 订单管理模块设计18.3.1 页面结构代码分析,18.3 订单管理模块设计,18.3.2 CSS代码分析订单管理页面的CSS代码从3方面理解。第1部分是常规的标记定义，例如
5、body标记、ul标记、li标记、h2标记等。第2部分是“旅游订单明细”部分中的数据显示和编辑区域的定义，包括后代选择器.singleLine div、后代选择器.singleLine span 、后代选择器等。第3部分是汇总显示表格区域的CSS设计，包括使用#infoTable定义表格显示区域，使用后代选择器#infoTable table设置表格的cellpadding属性、cellspacing属性、font-size属性等。,18.3 订单管理模块设计18.3.2 CSS代码分析,18.3 订单管理模块设计,18.3.3 JavaScript代码分析num_onblur()方法和pri
6、ce_onblur()方法当数量文本框和单价文本框失去焦点时触发，功能是将金额文本框的值设置为数量与单价之积。btnAdd_onclick()方法将表单中的信息追加到本地对象仓库orders中，如果追加失败则在控制台中显示错误信息。如果追加成功，将会调用showAlldata()方法重新显示所有订单信息。,18.3 订单管理模块设计18.3.3 JavaScri,18.3 订单管理模块设计,btnUpdate_onclick() 、btnDelete_onclick() 方法 用于修改或删除当前订单编号所对应的订单信息。tr_onclick(tr, i)方法 将用户单击行的订单信息填入表单各控件中，设定“追加”按钮为无效状态，将“修改”和“新增”按钮设定为有效状态。showAllData(loadPage)方法和 showData(row, i)方法 从本地数据仓库中查询出所有订单信息removeAllData()方法 该方法用于清除订单汇总表中的数据,18.3 订单管理模块设计btnUpdate_onclic,18.3 订单管理模块设计,代码略。,18.3 订单管理模块设计代码略。,Thanks,Thanks,
