JavaScript+jQuery程序设计第17章 课程设计——购物车设计.pptVIP

课程设计——购物车设计 购物车概述 系统设计 热点关键技术 用户登录设计 购物车操作 购物车概述 功能概述 购物车操作流程 程序预览 功能概述 这里的购物车模块是以电子商务网站为大背景进行开发的，不但完成了购物车本身应该具备的功能，诸如：商品的添加、查看购物车、单件商品购买数量的修改、从购物车移去指定商品和清空购物车；而且还包括了电子商务网站的登录功能。 购物车操作流程 购物车的操作流程：首先，用户需要进行登录，登录成功后可以购买指定的商品，购买商品后进入查看购物车页面中，在该页面可以实现很多操作，包括更改商品数量、删除商品、清空购物车、继续购物等。 程序预览 程序预览 系统设计 系统目标 开发环境 文件夹组织结构 系统目标 结合实际情况及对用户需求的分析，购物车的设计应该具有如下特点： （1）操作简单方便、界面简洁美观。 （2）能够直观展示商品价格信息。 （3）浏览速度快，防止打不开页面的情况发生。 （4）商品图片清楚，文字醒目。 （5）易维护，并提供二次开发支持。 开发环境 在开发购物车时，使用的软件开发环境如下： （1）操作系统：Windows7。 （2）开发工具：Dreamweaver CS6。 （3）浏览器：IE 8.0。 （4）分辨率：最佳效果1680×1050像素。 文件夹组织结构 热点关键技术 JavaScript中的cookie 应用Ajax技术实现用户登录 判断用户访问权限 JavaScript中的cookie 读取cookie 设置cookie var cookieString=document.cookie; document.cookie=名字=值; expires=日期; path=路径; domain=域名; secure; 应用Ajax技术实现用户登录 在该购物车模块中，实现购物车的登录功能时使用了Ajax技术。其中，应用了XMLHttpRequest对象的几个常用方法和属性。 判断用户访问权限 在购物车主页，当单击“查看购物车”超链接时首先会判断用户是否具有访问该页面的权限。如果用户未登录，在单击该超链接时会弹出“请您先登录！”的对话框，如果用户已经登录，则会跳转到查看购物车页面。 用户登录设计 用户登录功能概述 自动生成验证码 用户登录功能的实现 用户登录功能概述 在购物车中提供了用户登录的功能。用户在未登录时只能查看网站中的商品，在登录之后才可以购买商品以及对购物车进行操作。 自动生成验证码 在设计用户登录窗口时添加了验证码的功能，应用Math对象的round()方法和字符串对象的substr()方法可以生成一个4位数字的验证码。通过两个自定义函数实现生成验证码和刷新验证码的功能。 //显示验证码 function yzm(form){ var num1=Math.round(Math.random(); var num=num1.toString().substr(0,4); document.write(span id=yzm style=font-size:18px;background:#CCCCCC+num+/span); form.check2.value=num; } //刷新验证码 function code(form){ var num1=Math.round(Math.random(); var num=num1.toString().substr(0,4); document.getElementById(yzm).innerHTML=num; form.check2.value=num; } 用户登录功能的实现 在实现购物车的登录功能时使用了Ajax技术，将登录用户名（mr）和密码（mrsoft）存储在文本文件chkname.txt中，应用Ajax调用chkname.txt文件，通过Ajax返回值与用户输入的信息是否相等来判断用户是否登录成功。 购物车操作 CSS 添加至购物车 查看购物车 修改商品购买数量 移除购物车中指定商品 清空购物车 添加至购物车 在电子商务网站中，“添加至购物车”是客户端程序中非常关键的一个功能，主要用来帮助用户将选择的商品信息暂时保存到购物车中。在想要购买的宠物信息下方的“数量”文本框中输入购买数量，单击“购买”按钮，即可将选择的宠物信息添加到购物车中。