在上一讲中,我就说过,关于购物车模块,之前的京东和淘宝并不一样,之前的京东允许用户在没有登录的情况下就添加商品进购物车,而且加到购物车里面的商品可以一直保存着。其实这是将购物车信息写入到了Cookie中,如果清空了Cookie,那么也就清空了购物车。把购物车信息写入到了Cookie中也有其优缺点,如下:
我们可以访问一下淘淘商城首页(前提是启动了所有的服务器及工程,虽然有个别工程用不上,不过也没关系啦),并在搜索框中输入要搜索的商品(我以前添加过苹果这款手机,现在我就来搜索它)。
搜索到的结果页面如下图所示。
我们再点击这款手机,查看其详情,如下图所示。
如果这时我们点击上图中的加入购物车
按钮,如下图所示,那么可以看到请求的地址并不正确,而且请求中没有携带商品数量的信息,因此我们需要对原有商品详情页面购物车这一块进行改造。
首先,我们找到taotao-item-web工程下的item.jsp页面,并搜索"购物车",这时便可以搜索到如下图所示的内容。
为了在请求url中带上商品数量的参数,我们定义一个函数,例如addItemCart,如下图所示。
addItemCart函数的代码如下所示:
function addItemCart() {
// 取商品数量
var num = $("#buy-num").val();
// 页面跳转
location.href = "http://localhost:8089/cart/add/${item.id}.html?num=" + num;
}
其中商品数量是通过id选择器来获取的,关于显示商品数量的那行代码在下图所示的位置处。
写好了addItemCart函数之后,我们回到加入购物车那块的地方,将原来href里面的内容改为href="javascript:addItemCart()"
,如下图所示。
修改完之后,我们来刷新商品详情页面,然后点击加入购物车
按钮,这时我们可以看到跳转后的浏览器地址栏中的地址是http://localhost:8089/cart/add/160491955602173.html?num=1
,链接地址已经指向我们的购物车工程了,而且带上了商品数量参数,不过此时由于还没有实现购物车,因此页面才会显示"无法访问此网站",如下图所示。
我们再回到商品详情页面中,将商品数量添加到3,然后点击加入购物车
按钮,如下图所示。
这时跳转后浏览器地址栏中的地址是http://localhost:8089/cart/add/160491955602173.html?num=3
,可以看到只是请求后面的num参数的值变成了3,这说明我们已经改造好了。