,Click to edit Master title style,Click to edit Master text,Second level,Third level,Fourth level,Fifth level,HTML5+CSS3 Web,前端开发技术,(2,版,),LOGO,Thank You!,Click to edit Master title style,Click to edit Master text,Second level,Third level,Fourth level,Fifth level,HTML5+CSS3 Web,前端开发技术,(2,版,),Click to edit Master title style,Click to edit Master text,Second level,Third level,Fourth level,Fifth level,第,18,章,综合案例,2,案例功能描述,1,用户登录注册模块设计,2,订单管理模块设计,3,客户管理模块设计,4,第18章 综合案例2案例功能描述1用户登录注册模块设计2订单,18.1,案例功能描述,具体功能,注册新用户，,或,使用系统内置管理员帐号登录。,登录,成功,后,，,可以,执行,下拉列表框中,的功能。,实现,订单管理、客户管理、留言管理等模块，完成数据管理功能。,基于,IndexedDB,数据库完成用户注册与登录、订单管理、客户管理等模块,。,18.1 案例功能描述具体功能基于IndexedDB数据,18.1,案例功能描述,案例的功能模块,、,涉及的,IndexedDB,数据库,、,对象仓库的描述,见下,表。,18.1 案例功能描述案例的功能模块、涉及的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,用户登录注册模块设计,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_onclick(),方法，完成用户注册功能，对于已经存在的用户给出提示信息,。,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,部分是常规的标记定义，例如,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(),方法和,price_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,