AJAX 购物网站设计文档

王艳洁

贡献于2012-12-28

字数:5628 关键词: 电子商务/商城

AJAX购物网站设计文档 一、要实现的功能 用户访问网站时,如未登陆成用户,则只可以查看网站中的商品信息不能购买商品。注册为会员并登陆后,可以购买指定数量的商品,购买完所有商品后,用户可调用结帐功能对所购买的商品进行结帐,在整个购买过程中,用户所购买的商品放在虚拟购物车中,并未记录数据库中。 二、AJAX技术在本例中的作用 实现动态无刷新的页面效果,即通过动态改变页面中层的内容改变页面的内容。 三、数据库模型设计 图3-1 数据库模型图 描述: 编号 库表名称 描述 1 ngwc_commodities 商品信息表 2 ngwc_operlog 用户操作记录,存购买信息 3 ngwc_user 用户表 4 ngwc_type 用户类型表 四、类的设计 1. 持久化类的设计 图4-1 持久化类类图 描述: 编号 类名 描述 1 NgwcCommodities 商品信息类 2 NgwcOperlog 用户购买信息类,存购买信息 3 NgwcUser 用户信息类 4 NgwcType 用户类型类 说明: 持久化类的每个类的属性都有其对应的setter和getter方法,Hibernate通过持久化类可进行数据库的操作。 2. 虚拟购物车类的设计 图4-2 虚拟购物车类类图 描述: 编号 类名 描述 1 Cart 虚拟购物车类 2 BeanItems 购物车中存放的每一个商品 3. 数据库操作类的设计 图4-3 数据库操作类类图 描述: 编号 类名 描述 1 Dao 数据库操作类 2 DaoImpl 数据库操作类的接口,定义的数据库操作类中实现在方法 Dao类中实现的方法说明: List showAllComms(int start); //按分页得所有商品 List showFindComms(String commname, int start); //按查找得所有商品 int getPages(); //得所有商品总页数 int getFindCommsPages(String commname); //得查找的商品个数 void addUser(NgwcUser user); //向数据库添加一个用户 NgwcUser getUserInfo(String username, String password); //通过用户名和密码得到用户信息 public List getUserLogs(NgwcUser user); //得到当前用户的购买记录 public boolean existUser(String username); //是否存在用户 boolean existUser(String username,String password); //是否存在该用户名及密码对应的用户 public void saveLogs(NgwcOperlog logs); //保存logs public void updateComms(NgwcCommodities comm ,int num); //更新商品信息 public void updateUser(NgwcUser user); //更新用户信息 public boolean registUser(NgwcUser user); //添加一个用户 五、功能实现 1. 注册功能实现 功能说明: 用户点击首页中的注册链接后,页面中显示注册层供用户填写注册信息,当用户输入新注册的用户名时,ajax调用后台名为checkUser的servlet判断是否存在同名用户,并返回判断的信息;当用户输入密码和确认密码时,判断密码是否和确认密码相同;若以上两个条件同时满足,注册按钮可用,否刚,注册按钮不可用。完成输入信息后,点击注册按钮进行用户注册操作,注册操作完成后,系统自动为用户完成登陆操作并返回首页。 图5-1-1 注册功能活动图 图5-1-2注册功能顺序图 描述: 编号 名称 类型 描述 1 Index.jsp 页面文件 首页页面 2 ajax.js Js文件 存放所有的javascript函数 3 checkUser Servlet 检察是否存在同名用户 4 RegistAction Action 点击注册按钮后提交到的页面 5 Session Session对象 当前用户的session 6 Dao 类 数据库操作类 2. 登陆功能实现 功能说明:用户点击完登陆链接后,在页面中显示登陆层用户输入完用户名和密码后点击登陆按钮完成登陆操作。 图5-2-1登陆功能活动图 图5-2-2 登陆功能顺序图 编号 名称 类型 描述 1 Index.jsp 页面文件 首页页面 2 ajax.js Js文件 存放所有的javascript函数 3 login Servlet 执行登陆操作 4 Session Session对象 当前用户的session 5 Dao 类 数据库操作类 3.显示所有商品功能实现 功能说明:根据是否已经登陆判断每一项商品的购买按钮是否可用,根据用户请求的页数从数据库中查询出数据,生成数据集合,根据按钮可用信息及数据集合生成页面信息并回传显示。 图5-3-1 显示所有商品活动图 图5-3-2 显示所有商品顺序图 描述 编号 名称 类型 描述 1 Index.jsp 页面文件 首页页面 2 ajax.js Js文件 存放所有的javascript函数 3 ShowAllComms Servlet 执行显示所有商品操作 4 Session Session对象 当前用户的session 5 Dao 类 数据库操作类 4. 显示所有查找的商品 功能说明:根据是否已经登陆判断每一项商品的购买按钮是否可用,根据用户请求的页数及需要查询的商品名称从数据库中查询出数据,生成数据集合,根据按钮可用信息及数据集合生成页面信息并回传显示。 图5-4-1 显示所有查找商品活动图 图5-4-2 显示所有查找商品顺序图 描述 编号 名称 类型 描述 1 Index.jsp 页面文件 首页页面 2 ajax.js Js文件 存放所有的javascript函数 3 ShowFindComms Servlet 执行显示所有查找商品的操作 4 Session Session对象 当前用户的session 5 Dao 类 数据库操作类 5. 购买商品 功能说明:用户在购买商品时,首先输入要购买的商品数量,如果要购买的商品数量大于库存的数量则不能执行购买操作,输入正确的数量后点击购买按钮执行购买操作,将用户购买的商品信息通过ajax传给后台servlet进行操作,完成购买操作后,session中用户信息的用户帐户余额根据用户的折扣率及购买商品的金额减去相应的数值,用户购买的商品信息将存入虚拟购物车实例。最后在首页中显示。 图5-5-1 购买商品时序图 描述 编号 名称 类型 描述 1 Index.jsp 页面文件 首页页面 2 ajax.js Js文件 存放所有的javascript函数 3 Buy Servlet 执行购买商品操作 4 Session Session对象 当前用户的session 图5-5-2 购买商品活动图 6. 从购物车中删除商品 功能说明:当用户想要从购物车中删除所买商品时,在首页左下方单击相应商品的”删除”链接,转向DeleteFromCart并传要删除的商品id,该Servlet负责将购物车实例从session中取出,将用户指定id的商品从购物车中删除最后,将购物车存回session并转回首页。 图5-6-1 从购物车中删除商品活动图 图5-6-2 从购物车中删除商品顺序图 描述 编号 名称 类型 描述 1 Index.jsp 页面文件 首页页面 2 DeleteFromCart Servlet 执行删除操作的Servlet 3 Session Session对象 当前用户的session 7.确认购买操作 功能说明:当用户购买完商品后,执行购买操作,结帐当前购物车,修改当前用户余额,修改库存余额,将购买记录存进数据库中。 图5-7-1 确认购买操作活动图 图5-7-2 确认购买操作顺序图 描述 编号 名称 类型 描述 1 Index.jsp 页面文件 首页页面 2 ajax.js Js文件 所有的javascript函数文件 3 BuyComms Servlet 执行确认购买操作 4 Session Session对象 当前用户的session 5 Dao 类 数据库操作类 附录 1.AJAX分页显示原理: 用户点击要显示的页数链接后,调用相应的ajax处理函数,该函数将页数作为参数传递给后台servlet进行处理,在该后台servlet中,将根据页数信息对数据进行加工,从数据库中取出对应页上应该显示的商品信息,根据页面生成规则生成html页面代码,并将这些代码回传出去,ajax的接收处理函数接收到页面代码后,调用相应标记的innerHTML方法改变显示的内容完成分页显示操作。 图 附录-1 2.虚拟购物车类代码分析 Cart类:购物车类 package com.mjpc.util; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import com.mjpc.data.NgwcCommodities; public class Cart { private int NumOfCart; //购物车中的商品总数 HashMap cart; //购物车中的商品集合,其各个项目以BeanItem类对象形式存在 String cartid; /*购物车的id号,本例中并没有使用,其它应用中可用其作为商 品的订单号(可通过sessionid或其它方式获取)*/ public Cart(){ //购物车类的构造方法,初始化一个购物车 NumOfCart = 0; cart = new HashMap(); cartid = ""; } public HashMap getCart() { return cart; } public void setCart(HashMap cart) { this.cart = cart; } public String getCartid() { return cartid; } public void setCartid(String cartid) { this.cartid = cartid; } public int getNumOfCart() { return NumOfCart; } public void setNumOfCart(int numOfCart) { NumOfCart = numOfCart; } public void addItem(Integer id, NgwcCommodities comm, int num){ //向购物车中添加一个商品 //如果购物车中没有当前id的商品则新添加一个商品项目,购物车商品数量加一 if(!this.cart.containsKey(id)){ BeanItems item = new BeanItems(comm, num); this.cart.put(id, item); this.NumOfCart++; }else{ //如果当前购物车中存在当前id的商品则在原有项目的基础上购买数量更新购物车 BeanItems item = (BeanItems) cart.get(id); item.setItemNum(item.getItemNum() + num); this.cart.put(id, item); } } public void removeItemByNum(int id){ //删除购物车中key为id的项目,购物车中商品数量减一 if(this.cart.containsKey(id)){ this.cart.remove(id); this.NumOfCart--; } } public Collection getAllItems(){ //得到购物车中的所有商品 return this.cart.values(); } public double getSum(){ //得到购物车中商品的总价格 double sum = 0; Iterator it = this.cart.values().iterator(); while(it.hasNext()){ BeanItems item = (BeanItems)it.next(); sum += item.getItemPrice(); } return sum; } } BeanItems类:购物车中的商品以BeanItems对象的形式存储 package com.mjpc.util; import com.mjpc.data.NgwcCommodities; public class BeanItems { private int itemNum; //当前商品的购买数量 private NgwcCommodities comm; //购买的具体的商品 private double itemPrice; //当前商品的价格(数量 * 单价) public BeanItems(){ //初始化一个购物车中的商品 itemNum = 0; comm = new NgwcCommodities(); } public NgwcCommodities getComm() { return comm; } public void setComm(NgwcCommodities comm) { this.comm = comm; } public int getItemNum() { return itemNum; } public void setItemNum(int itemNum) { this.itemNum = itemNum; } public BeanItems(NgwcCommodities comm, int num){ //通过购买的商品和购买的数量初始化一个商品 this.itemNum = num; this.comm = comm; } public double getItemPrice(){ //得到当前商品价格(数量 * 单价) double totalPrice = 0; //保留小数点后两位小数 totalPrice = comm.getPrice() * itemNum * 100; totalPrice = Math.round(totalPrice) / 100.0; return totalPrice; } }

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享文档获得金币 ]
0 人已下载

下载文档

相关文档